如何选择带槽元素的内容？

Question

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;
    }

Answer 1

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>

Answer 2

To select an ul in a span in a slot you can just use slot span ul { ... } :

 slot span ul { background-color: rgba(255, 55, 255, 1); border: solid brown 3px; }

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