CSS :部件伪选择器可以用来样式嵌套的web组件吗？

Question

当使用shadowed创建具有封装样式的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

不是的。这是不可能的。它破坏了封装原理。正确的方法是使用适当的主题。这意味着使用以下两种方法的组合：

::part - For direct theming of the component
:host-context - for theming based on the context
::slotted - For styling the slotted element inside the styling

对于更多的动态主题化，您可以将上述样式与Element.matches API结合使用。无论组件的用户设置了什么类/上下文，都可以更改嵌套子组件的样式。

附带说明，即使不使用Shadow或Web，修改颓废组件的样式也是一种糟糕的做法。它将导致一个脆弱的、不可维护的CSS。

编辑注意事项：

:host-context并不是在所有浏览器中都实现的，而且可能永远也不会实现。

Answer 2

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