Search code examples
cssweb-componentshadow-domnative-web-component

Styling descendent element in slotted element

Is it possible to select descendent element in slotted element?

Example like this:

::slotted(div p) {
        color: blue;
    }

<div><p>test</p><div>

It doesn't work

Solution

  • No, you can only select top-level nodes with ::slotted().

    The selector inside ::slotted() can only be a compound selector, so div p is not a valid one.

    According to Hayato Ito :

    The reason of this restriction is to make a selector style-engine friendly, in terms of performance.

    See the styling example in the Shadow Dom v1 presentation.