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