Styling descendent element in slotted element

Question

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

Similar to https://stackoverflow.com/questions/49268817/slot-selector-limit-in-webcomponent — Intervalia, Mar 14 '18 at 20:52

score 5 · Accepted Answer · answered Jan 23 '18 at 22:11

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.

1 Answers1