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

▲

JimDabell 4 months ago | parent [-]

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.

	▲	rafram 4 months ago \| parent [-]
		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.