仅使用CSS选择shadow-root中的元素

Question

有什么方法可以在不使用 JS 的情况下更改 Shadow-root 中的 CSS 我的意思是仅 CSS。我浏览了一些东西，但找不到一种没有 js 的方法。

假设我们有代码

<div id="parent">
   #shadow-root (open)
     <div id="child">
     </div>
</div>

如何仅使用 CSS 访问子元素？

Answer 1

仅当组件作者明确允许在影子 DOM 中的元素上使用

part

属性时。在这种情况下，您可以使用

::part

伪元素选择器:

将 CSS 应用于该元素

这是一个例子：

customElements.define('foo-bar', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'})
    this.shadowRoot.innerHTML = '<p part="baz">foo-bar here</p>';
  }
});

::part(baz) {
  background-color: red;
}

<foo-bar></foo-bar>

请注意，您不能执行类似

::part(foo) + .internal-css-class {...}

的操作（

::part

不能成为复合选择器的一部分）。

除此之外，您始终可以使用CSS的继承属性，这些属性也会影响shadow DOM。例如。将 Web 组件放入

<h1>

将影响其字体大小和粗细（除非它专门为这些属性定义了自己的值）。