2

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

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

我需要覆盖background-coloron select-container。我无权访问<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

但它们都不起作用。

4

1 回答 1

1

您可以为此使用::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

于 2020-08-10T09:02:50.667 回答