Search code examples
htmlcssshadow-dom

How do I select content of a slotted element?


I have a span in my slot. And that slot contains div>ul>li. I would like to have access to the ul element.

My code:

<slot>
    <span>
        <div>
            <ul>
                <li>Test</li>
                <li>Test123</li>
                <li>Testabc</li>
            </ul>
        </div>
    </span>    
</slot>

I have tried something like this, but it didn't work:

 ::slotted(span[ul]) {
        background-color: rgba(255, 55, 255, 1);
        border: brown;
    }

Solution

  • Why complicate things when you can do this -

    slot span ul {
      background-color: rgba(255, 55, 255, 1);
      /* border: brown; */ /* this is not valid */
      border: 1px solid brown; 
    }
    <slot>
      <span>
            <div>
                <ul>
                    <li>Test</li>
                    <li>Test123</li>
                    <li>Testabc</li>
                </ul>
            </div>
        </span>
    </slot>