The Failed Promise of Web Components

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

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#...)

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#..., same situation, everyone likes it, only Chrome ships so far) and focusability (https://github.com/w3c/webcomponents/issues/762, still figuring out what the solution should be).

That’s great, thanks for the links.

> 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.)

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.