CODEWITHSUNDEEP
cssweb-componentshadow-domnative-web-component
asv
asv

Reputation: 3792

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

Upvotes: 4

Views: 1395

Answers (1)

Supersharp
Supersharp

Reputation: 31161

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.

Upvotes: 5

Related Questions