4 ms·

There's one thing that I haven't figured out about custom web components which make them completely broken for me: using them as form elements with good DX and

There's one thing that I haven't figured out about custom web components which make them completely broken for me: using them as form elements with good DX and UX. For example custom button that should behave like native html button - submit form on click, submit form on enter if I am in one of the text inputs, correctly handling "form" attribute when the button is outside of the form itself etc. I know about "formAssociated" and "ElementInternals" but they don't solve the problem completely. Imho this isn't solved anywhere and makes the web components no-go for design systems. https://github.com/WICG/webcomponents/issues/814 https://github.com/WICG/webcomponents/issues/814 I also find baffling that there is _zero_ information about forms in the Lit3.0 documentation. If someone figured this out please enlighten me. Example: https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7Y3VzdG9tRWxlbWVudCwgcHJvcGVydHl9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuQGN1c3RvbUVsZW1lbnQoJ2xpdC1idXR0b24nKVxuZXhwb3J0IGNsYXNzIFNpbXBsZUJ1dHRvbiBleHRlbmRzIExpdEVsZW1lbnQge1xuICBzdGF0aWMgc3R5bGVzID0gY3NzYGJ1dHRvbiB7IGJhY2tncm91bmQ6IGxpbWUgfWA7XG4gIHN0YXRpYyBnZXQgZm9ybUFzc29jaWF0ZWQoKSB7XG4gICAgcmV0dXJuIHRydWU7XG4gIH1cbiAgXG4gIHByaXZhdGUgaW50ZXJuYWxzOiBFbGVtZW50SW50ZXJuYWxzO1xuXG4gIEBwcm9wZXJ0eSgpXG4gIG5hbWUgPSAnU29tZWJvZHknO1xuICBcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgICB0aGlzLmludGVybmFscyA9IHRoaXMuYXR0YWNoSW50ZXJuYWxzKCk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgPGJ1dHRvbiB0eXBlPVwic3VibWl0XCI-JHt0aGlzLm5hbWV9ITwvYnV0dG9uPmA7XG4gIH1cbn1cbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaW1wbGUtZ3JlZXRpbmcuanNcIj48L3NjcmlwdD5cbiAgPHNjcmlwdD5cbiAgICAgICAgZnVuY3Rpb24gb25TdWJtaXQoZXZlbnQpIHtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7IC8vIFByZXZlbnQgdGhlIGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uXG4gICAgICAgICAgICBhbGVydCgnRm9ybSBzdWJtaXR0ZWQhJyk7XG4gICAgICAgIH1cbiAgICA8L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuICA8Zm9ybSBvbnN1Ym1pdD1cIm9uU3VibWl0KGV2ZW50KTtcIj5cbiAgICA8aW5wdXQ-XG4gIDxsaXQtYnV0dG9uIG5hbWU9XCJUaGlzIGRvZXNuJ3Qgc3VibWl0XCIgdHlwZT1cInN1Ym1pdFwiPjwvbGl0LWJ1dHRvbj5cbiAgICBcbiAgPGJ1dHRvbiB0eXBlPVwic3VibWl0XCI-VGhpcyB3b3JrczwvYnV0dG9uPiAgXG4gICAgXG4gIDwvZm9ybT5cbjwvYm9keT5cbiJ9LHsibmFtZSI6InBhY2thZ2UuanNvbiIsImNvbnRlbnQiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcImxpdFwiOiBcIl4zLjAuMC1wcmUuMVwiLFxuICAgIFwiQGxpdC9yZWFjdGl2ZS1lbGVtZW50XCI6IFwiXjIuMC4wLXByZS4xXCIsXG4gICAgXCJsaXQtZWxlbWVudFwiOiBcIl40LjAuMC1wcmUuMVwiLFxuICAgIFwibGl0LWh0bWxcIjogXCJeMy4wLjAtcHJlLjFcIlxuICB9XG59IiwiaGlkZGVuIjp0cnVlfV0 https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1n...

claytongulick 3y ago
I think a lot of that is pushed down to the design system/library implementations. I use Web Components as a lightweight wrapper around that stuff. For example, if I'm using bootstrap I generally have a Web Component that uses all the boostrap styling in the light dom and have a "scene" or "modal" or whatever component that just has regular HTML rendered by lit-html. The component contains all the functionality for the form - fetching data, filling dropdown lists, validating, submitting, etc... so in that case, the web component isn't at the button level, it's at the logical application feature/form level. There are plenty of design systems that'll do what you're talking about though, Ionic is probably the most popular, but there's shoelace and a bunch of others that wrap and enhance form element functionality.

claytongulick 3y ago

I think a lot of that is pushed down to the design system/library implementations. I use Web Components as a lightweight wrapper around that stuff. For example, if I'm using bootstrap I generally have a Web Component that uses all the boostrap styling in the light dom and have a "scene" or "modal" or whatever component that just has regular HTML rendered by lit-html. The component contains all the functionality for the form - fetching data, filling dropdown lists, validating, submitting, etc... so in that case, the web component isn't at the button level, it's at the logical application feature/form level. There are plenty of design systems that'll do what you're talking about though, Ionic is probably the most popular, but there's shoelace and a bunch of others that wrap and enhance form element functionality.