相关疑难解决方法(0)

:: 用于 shadowDOM 插槽中嵌套子项的插槽 CSS 选择器

CSS::slotted选择器选择<slot>元素的子元素。

但是,当尝试选择像 with ::slotted(*), ::slotted(*) *, or那样的孙子时,选择::slotted(* *)器似乎没有生效。

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      <style>
        ::slotted(*) {
          display: block;
          border: solid blue 1px;
          padding: 3px;
        }
        ::slotted(*) span {
          display: block;
          border: solid red 1px;
          padding: 3px;
        }
        ::slotted(* span) {
          display: block;
          border: solid green 1px;
          padding: 3px;
        }
      </style>
      <slot></slot>
    `;
  }
}
customElements.define('my-element', MyElement);
Run Code Online (Sandbox Code Playgroud)
<my-element>
  <p>
    <span>Test</span>
  </p>
</my-element> …
Run Code Online (Sandbox Code Playgroud)

css css-selectors web-component shadow-dom custom-element

17
推荐指数
1
解决办法
3447
查看次数