外部CSS影响(“出血”进入）具有聚合物的阴影DOM

External CSS affecting ("bleeding" into) shadow DOM with Polymer

本文关键字：聚合物 DOM 阴影 进入 影响 CSS 出血 外部      更新时间：2023-09-26

我一定遗漏了什么，但我不知道是什么。我用聚合物实现了简单的自定义元素：

<polymer-element name="test-elem">
    <template>
        <content></content>
        <div id="container">
            <div class="deepinside">
            TECK ... CHEST
            </div>
        </div>
    </template>
    <script>
        Polymer('test-elem', {
            applyAuthorStyles: false,
        });
    </script>
</polymer-element>

然后我在一个简单的页面中使用它：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <script src="libs/polymer.min.js"></script>
    <link rel="import" href="test-elem.html">
    <style>
    .deepinside { color: red; }
    </style>
</head>
<body>
    <test-elem>Hi</test-elem>
</body>
</html>

元素内部div（带class="deepinside"）的内容显示为红色。如果我理解正确，这不应该发生（请参阅此文档）。请注意，我在元素的构造函数中显式声明了applyAuthorStyles: false（这应该不是必需的，因为这是默认行为）。我不明白为什么外部CSS会影响shadow DOM中的一个元素。我甚至尝试在元素的定义中显式指定shadowdom属性，但结果是一样的。

我错过了什么？

FWIW，我在OS X 10.7.5上运行Chrome版本31.0.1650.57。

这是Shadow DOM polyfill的一个已知限制。它在防止零部件样式流失方面做得很好，但在其他方面却做不到。

这是一个用于您的用例的代码笔。它在Chrome 33.0.1717.0金丝雀（Polymer不会对Shadow DOM进行聚合填充）中按您的意愿工作，但在31.0.1650.57中则不然。

相关文章：