How do I select content of a slotted element?

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

Do read: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668 — Danny '365CSI' Engelman, Sep 18 '20 at 11:18
The concept of ```` is that **its content** is replaced with content from lightDOM. In your code above you either do not need ```` OR the whole ```` will be destroyed when content gets *slotted* into the ```` — Danny '365CSI' Engelman, Sep 18 '20 at 15:26

score 0 · Accepted Answer · answered Sep 15 '20 at 13:53

0

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>

answered Sep 15 '20 at 13:53

Debsmita Paul

1,442
9
22

I am working with a shadow-dow. So, the
is generated automatically.
– Nida Sep 16 '20 at 08:55
In that case also, this code should work. Did it work? – Debsmita Paul Sep 16 '20 at 09:07
1

Yes. but I had to change my html-code a little bit. So, Thank you for your answer. – Nida Sep 17 '20 at 09:59

score 0 · Answer 2 · answered Sep 15 '20 at 13:53

0

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>

answered Sep 15 '20 at 13:53

johannchopin

13,720
10
55
101

Well in this case just remove the `slot` selector and use `span ul { ... }` – johannchopin Sep 15 '20 at 14:09

How do I select content of a slotted element?

2 Answers2