::slotted CSS selector for nested children in shadowDOM slot

Question

The CSS ::slotted selector selects children of the element.

however, when trying to select grandchildren like with ::slo

Answer 1

styling ::slotted elements in shadowDOM

TL;DR

• slotted content remains in lightDOM, is reflected to a <slot>

• ::slotted(*) can only target the lightDOM SKIN with simple selectors

• For an example where an Element wraps its lightDOM contents in an extra shadowDOM layer,
  see: https://jsfiddle.net/CustomElementsExamples/Lhcsd2m5/

---

background

Yes, ::slotted() not styling nested elements is expected behavior.

The term slotted is counterintuitive,
it implies element lightDOM is moved to shadowDOM

slotted lightDOM is NOT moved, it remains.. hidden.. in lightDOM
the content (IF slotted) is reflected to a <slot></slot>

Or from Google Developer Documentation