javascript - 跨影子 DOM 边界的 CSS 选择器

Question

我有一个分层 CSS 类选择器，我想知道如果类层次结构出现在影子 DOM 边界上，声明的样式是否也适用。CSS 选择器如下所示:

.section .row .col {
    color: #f00;
}

然后我还有一些包含自定义元素的 HTML 标记...

<div class="section">
  <my-element></my-element>
</div>

...并且元素也有一些标记:

<div class="row">
  <div class="col">
     Some red content
  </div>
</div>

我正在使用 Polymer3，DOM 在渲染时看起来非常好，并且 my-element 被设置为 div 部分下方的阴影 DOM。一切正常，但 my-element 的内部内容不是预期的红色。我还确保在自定义元素中也导入了样式表(ES6 模块)，但似乎无法在影子 DOM 中正确选择类层次结构。 DOM 在浏览器控制台中看起来像这样:

<div class="section">
  #shadow-root (open)        
    <div class="row">
      <div class="col">
         Some red content
      </div>
    </div>
</div>

所以我在这里做错了什么，或者这实际上是预期的行为，因为我们不想通过 shadow DOM 的封装来渗透 CSS 样式？

Answer 1

CSS 隔离是 Shadow DOM 的预期行为。

添加 <link rel="stylesheet">元素与您要在自定义元素的 Shadow DOM HTML 代码中应用的 CSS 文件。