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

Question

我正在使用以下网络组件树：

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

我需要覆盖 select-container 上的 background-color。我无法访问 <x-select> 代码，只能访问 <x-typography>.

我知道如何 :host 和 ::slotted 工作，我试过：

:host(x-typography):host(x-select) .select-container
:host(x-typography):host(x-select) .select-container
:host(x-typography :host(x-select)) .select-container

但其中 none 有效。

Answer 1

您可以为此使用 ::part pseudo-element 和 exportparts 属性。它允许您为内部阴影 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

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

How to access elements inner two shadow dom

css

stenciljs

stencil-component