时间戳

首页 > 解决方案 > 跨阴影 DOM 边界的 CSS 选择器

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

问题描述

我有一个分层的 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 样式？

标签： javascriptcssshadow-dom

解决方案

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

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

推荐阅读