我有一个分层 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 样式?
最佳答案
CSS 隔离是 Shadow DOM 的预期行为。
添加 <link rel="stylesheet">
元素与您要在自定义元素的 Shadow DOM HTML 代码中应用的 CSS 文件。
关于javascript - 跨影子 DOM 边界的 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56003984/