html - 如何选择开槽元素的内容？

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

标签： htmlcssshadow-dom

Answer 1

要ul在 aspan中选择一个，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>