3 ms·

Thanks for the link. This library unfortunately highlights further challenges with Web Components like mixing custom WCs with native form elements. To use Shoel

Thanks for the link. This library unfortunately highlights further challenges with Web Components like mixing custom WCs with native form elements. To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. > Shoelace forms don't make use of action and method attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the slSubmit event as shown in the example below and make an XHR request with the resulting form data. > https://shoelace.style/components/form https://shoelace.style/components/form

domenicd 6y ago
This is fixable, using the form-associated custom elements feature that's specified in HTML. (Introduction: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example https://html.spec.whatwg.org/multipage/custom-elements.html#...) However, that's only currently shipping in Chrome, despite the other browsers being positive on it. Similar capability gaps that we're working to close are accessibility (https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-accessibility-example https://html.spec.whatwg.org/multipage/custom-elements.html#..., same situation, everyone likes it, only Chrome ships so far) and focusability (https://github.com/w3c/webcomponents/issues/762 https://github.com/w3c/webcomponents/issues/762, still figuring out what the solution should be).
- ssorallen 6y ago
  That’s great, thanks for the links.
claviska 6y ago
> To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. Shoelace author here. This is somewhat true (I wouldn’t call it “a bunch” though), and it will be until form-associated custom elements are standard. However, I’d argue that most form validation and submission is done with JavaScript these days. I can’t think of the last time I saw a post request submitted from a form in the wild. (Not that it doesn’t happen, but it seems to be quite rare now.)
- ssorallen 6y ago
  Thanks for the reply! Shoelace does look great, and I recognize doing the form submission this way is a requirement currently. Hopefully the links above about allowing custom WebComponents to act as native form elements will further enable Shoelace.

domenicd 6y ago

This is fixable, using the form-associated custom elements feature that's specified in HTML. (Introduction: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example https://html.spec.whatwg.org/multipage/custom-elements.html#...) However, that's only currently shipping in Chrome, despite the other browsers being positive on it. Similar capability gaps that we're working to close are accessibility (https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-accessibility-example https://html.spec.whatwg.org/multipage/custom-elements.html#..., same situation, everyone likes it, only Chrome ships so far) and focusability (https://github.com/w3c/webcomponents/issues/762 https://github.com/w3c/webcomponents/issues/762, still figuring out what the solution should be).

ssorallen 6y ago
That’s great, thanks for the links.

claviska 6y ago

> To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. Shoelace author here. This is somewhat true (I wouldn’t call it “a bunch” though), and it will be until form-associated custom elements are standard. However, I’d argue that most form validation and submission is done with JavaScript these days. I can’t think of the last time I saw a post request submitted from a form in the wild. (Not that it doesn’t happen, but it seems to be quite rare now.)

ssorallen 6y ago
Thanks for the reply! Shoelace does look great, and I recognize doing the form submission this way is a requirement currently. Hopefully the links above about allowing custom WebComponents to act as native form elements will further enable Shoelace.