如何设置已插入元素的后代样式（在 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(*) 只能使用简单选择器

长答案见：

更新：示例 `<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>

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

How to style descendants of element that was slotted (in the stylesheet of the shadowroot)?

html

javascript

css

shadow-dom

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

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

How to style descendants of element that was slotted (in the stylesheet of the shadowroot)?

html

javascript

css

shadow-dom

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

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