如何 select 开槽元素的内容？

Question

我的插槽中有一个跨度。该插槽包含 div>ul>li。我想访问 ul 元素。

我的代码：

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

我试过类似的方法，但没有用：

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

Answer 1

既然可以做到，为什么要把事情复杂化 -

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

到 select 一个 ul 在一个 span 在一个 slot 你可以只使用 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>

如何 select 开槽元素的内容？

How do I select content of a slotted element?

html

css

shadow-dom