CSS :part 伪选择器可以用于设置嵌套 Web 组件的样式吗？

Question

使用 Shadow DOM 创建具有封装样式的 Web 组件时，可以使用 ::part 伪选择器对部分阴影标记进行样式设置 ( https://developer.mozilla.org/en-US/docs/Web/CSS/::part）。

零件选择器可以用于定位嵌套阴影零件吗？

<custom-element>
  #shadow-root
    <div part="thats-easy"></div>
    <another-custom-element part="proxy-part">
      #shadow-root
        <div part="target-me"></div>
    </another-custom-element>
</custom-element>

目前的努力没有结果：

another-custom-element::part(target-me) { }
custom-element::part(proxy-part) another-custom-element::part(target-me) { }
custom-element::part(proxy-part another-custom-element::part(target-me)) { }
custom-element::part(proxy-part::part(target-me)) { }
```

Answer 1

有趣的转变，这是可能的，直到关于exportparts
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts

实施例1

<style>
  mux-player::part(textspan) { color: red; }
</style>

<mux-player>
  <template shadowrootmode="open">
    <media-poster-image exportparts="poster, img, innerspan: textspan">
      <template shadowrootmode="open">
        <img part="poster img" src="...">

        <span part="innerspan">
          This text will be red because the containing shadow host forwards innerspan to the document as "textspan" and the document style matches it.
        </span>

        <span part="textspan">
          This text will not be red because textspan in the document style cannot match against the part inside the inner custom element if it is not forwarded.
        </span>
      </template>
  </template>
</mux-player>

实施例2

生产中具有多个嵌套自定义元素和 CSS 部分的示例。
https://github.com/muxinc/elements/blob/main/packages/mux-player/src/template.ts