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>

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

Answer 1

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

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

跨阴影DOM边界的CSS选择器

1 个答案: