Comment by rafram
2 days ago
> Web components can only style their immediate children.
This isn’t true at all. You’re doing something incorrect when creating your shadow root or adding your styles. (“Web components” aren’t really a thing - it’s a marketing term for a set of technologies - so I assume that you’re talking about custom elements with shadow roots here.)
Refer to example 4 in the CSS Scoping specification:
> It will not select #three (no slot attribute) nor #four (only direct children of a shadow host can be assigned to a slot).
— https://drafts.csswg.org/css-scoping/#example-7cc70c2d
I’m talking about the #four case.
Alternatively, refer to the issue that was opened in the web components issue tracker here:
> > you can only select a direct item within the slot
> That is by design. See #331 for details.
> We don't have a plan to support an arbitrary selector for ::slotted.
— https://github.com/WICG/webcomponents/issues/594#issuecommen...
> “Web components” aren’t really a thing
This is an empty nitpick. The people writing the specs call them web components, the people implementing them call them web components, the people writing them call them web components. There is nothing wrong with calling them web components.
> I assume that you’re talking about custom elements with shadow roots here.
You don’t have to assume anything. I explicitly said that it constructed a shadow DOM.
Yeah, slotted elements have to be direct children, but you can select any descendant in CSS. That text is only referring to the ::slotted() pseudo-element.