如何访问元素内部两个影子dom

您可以为此使用::part伪元素和exportparts属性。它允许您为内部Shadow DOM元素创建自定义样式。

您可以在影子树的任何元素上指定“可样式化”的部分：

<x-select>
  :shadow-root
    <header class="select-header"></header>
    <div class="select-container" part="container"></div>
</x-select>

然后，您可以为该零件指定自定义样式，例如：

x-select::part(container){
  font-weight: bold;
}

此外，它的工作原理与其他伪选择喜欢的:hover，:active...

x-select::part(container):hover {
  opacity: 0.8;
}

但这不适用于嵌套零件。因此，您不能像这样使用它：

x-select::part(container)::part(aside) {
}

为此，您需要通过exportpart属性导出零件。

<x-bar>
  :shadow-root
  <x-foo exportparts="some-box: foo-some-box"></x-foo>
</x-bar>

但是，如果您需要支持IE11，则可能不是最佳选择。另一方面，所有现代浏览器都支持它：https : //caniuse.com/#search=%3A%3Apart

因此，您的示例如下所示：

// x-select


render () {
  return (
    <Host>
      <div class="select-container" part="container"></div>
    </Host>
  )
}

// x-typography


render () {
  return (
    <Host>
      <x-select exportparts="container: container"></x-select>
    </Host>
  )
}
  

<!-- usage -->

<x-typography></x-typography>

<style>
  x-typography::part(container) {
    color: blue;
  }
</style>

在这里，您可以找到很好的解释，说明其part工作原理：https：//github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md