Question

我必须遗漏一些东西，但我无法弄清楚是什么。我用聚合物实现了简单的自定义元素：

<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"）的内容以红色显示。如果我理解正确，这不应该发生（见this doc）。请注意，我在元素的构造函数中显式声明了applyAuthorStyles: false（它不应该是必需的，因为它是默认行为）。我不明白为什么外部CSS会影响shadow DOM中的元素。我甚至尝试在元素的定义中明确指定shadowdom属性，但结果是一样的。

我错过了什么？

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

Answer 1

这是known limitation of the Shadow DOM polyfill。它可以很好地防止组件样式流失，但是反过来却没有做同样的事情。

Here's用于您的用例的codepen。它适用于你想要的Chrome 33.0.1717.0 canary（Polymer不会polyfill Shadow DOM），但不是31.0.1650.57。

外部CSS影响（＆＃34;流血＆＃34;进入）使用Polymer的shadow DOM

1 个答案: