如何为插入的元素的后代设置样式（在 shadowroot 的样式表中）？

Question

这是我的尝试，但 span 元素没有我希望的 deeppink 边框（我在 Google Chrome 83 中）：

const d = document.querySelector('div')

const r = d.attachShadow({mode: 'open'})

r.innerHTML = `
  <style>
    /* This doesn't work as I was hoping: */
    ::slotted(p) span {
      border: 1px solid deeppink;
    }
    
    /* This doesn't work (and I wouldn't expect it to), but I tried it anyways: */
    ::slotted(span) {
      border: 1px solid deeppink;
    }
    
    /* This doesn't work either: */
    :host span {
      border: 1px solid deeppink;
    }
    
    /* This works, but not what I'm trying to do. */
    ::slotted(p) {
      background: #f9f9f9
    }
  </style>
  <slot></slot>
`

<div>
  <p><span>test</span></p>
  <p><span>test</span></p>
  <p><span>test</span></p>
  <p><span>test</span></p>
  <p><span>test</span></p>
</div>

我们如何为分布式（开槽）子代的后代设置样式？

Answer 1

• 插槽内容保留在 lightDOM 中，反映到一个
• ::slotted(*) 只能使用 simple 选择器
定位 lightDOM SKIN

详细答案请参见： ::slotted CSS selector for nested children in shadowDOM slot

更新：示例 <div SLOT=Hello> 内容不是 IN shadowDOM

<my-element>
  <div slot=Hello>Hello reflected (slotted) lightDOM DIV</div>
</my-element>

<my-element>
  <div slot=NoSlot>Hello not slotted lightDOM DIV</div>
</my-element>

<script>
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode: 'open'})
        .innerHTML=`<slot name=Hello><b>I am shadowDOM SLOT content</b></slot>`;
    }
    connectedCallback() {
      console.log(this.shadowRoot.querySelector('slot').innerHTML)
    }
  });
</script>