Web Component Limitations

[gkatsev]

When working on the select menu work, I ran into a couple of platform limitations.

The two main limitations I ran into:

• it isn't possible to style shadow DOM elements unless they are explicitly exported via part and in which case, users need to do things like [disabled], ::part(disabled) { } for their styles. There is an open issue for this, called "open-stylable" "open-stylable" Shadow Roots WICG/webcomponents#909
• it isn't possible to select a nested slotted element. When we have nested child elements, and we want to style them, if they are slotted, we can only style the top level slotted element and not the slotted element's child elements. There's an issue for this with the CSSWG [css-shadow-parts] Make ::slotted() a combinator w3c/csswg-drafts#7922. A workaround for this is having a global project stylesheet.

Also, today, Lea Verou just posted a new issue on the webcomponents repo that talks about a lot of the same issues WICG/webcomponents#986