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

然而，当尝试选择像这样的孙辈时::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);

<my-element>
  <p>
    <span>Test</span>
  </p>
</my-element>

请注意跨度如何没有得到边框。

这是预期的行为吗？我无法找到这方面的具体文档。

如果是，有办法解决这个问题吗？

ShadowDOM 中的 ::slotted 元素样式

TL;DR

• ::开槽规格：https://drafts.c​​sswg.org/css-scoping/#slotted-pseudo

• 开槽内容remains in light DOM, is 反映 to a <slot> in shadow DOM

• ::slotted(x)定位 lightDOM 外部元素（又名“皮肤”），NOTShadowDOM 中的 SLOT

• ::slotted(x) takes basic选择器

• 可继承的样式逐渐渗透到shadowDOM中
  https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

• 有关 SLOT 和相关主题的最新 WHATWG 讨论，请参阅

  • https://github.com/whatwg/html/issues/6051#issuecomment-816971072
    参加者：rniwa（苹果） ，annvk（Mozilla），dominic（谷歌）
  • https://github.com/WICG/webcomponents/issues/934#issuecomment-906063140

有趣的读物：

• HTML 元素的历史作者：扬·米克索夫斯基

• Shadow DOM 有争议的部分的立场摘要 — Web Components F2F，2015-04-24

背景

Yes, ::slotted()不对嵌套元素设置样式是预期行为。

期限slotted是违反直觉的，
这意味着 lightDOM 元素是moved到shadowDOM

开槽 lightDOM 是没有动过，它仍然..隐藏..在lightDOM中
内容（如果开槽）是反映 to a <slot></slot>

Or from 谷歌开发者文档