Once again I’m in the same
#webcomponents crossroads I’ve been many times before.
My component (an editable <color-swatch> if you need to know) has an <input>. Ideally the input should be styled like other inputs on the page and be able to participate in form submission.
Options:
1. Use shadow DOM like I’m supposed to:
- Default UA styling. Can manually pull in all stylesheets from all parent roots to adopt the page’s <input> styling.
- needs me to replicate the whole HTMLInputElement interface and use ElementInternals for it to work properly w/ form submission.
Both tedious AF.
2. Use shadow DOM + a slot, authors can slot in their own <input> for its style to match the page or for form submission.
- Now my CSS needs to account for *both* shadow DOM inputs *and* light DOM inputs.
- Any styles set on the light DOM version have lower specificity than even a plain input selector.
3. I require authors to BYOE, i.e. slot in their own input at all times. This becomes their opt-in to editability. Tedious DX for authors.
4. We *only* do slotted light DOM input, and if one is not provided, we generate it and add the proper slot attribute to it.
Main downside here seems to be theoretical purity, so it may actually be the lesser of four evils.
But damn that’s a crappy set of choices. :/
