使用 Polymer 影响（“渗入”）阴影 DOM 的外部 CSS答案

【问题标题】：External CSS affecting ("bleeding" into) shadow DOM with Polymer使用 Polymer 影响（“渗入”）阴影 DOM 的外部 CSS
【发布时间】：2013-11-23 09:41:17
【问题描述】：

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

<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。

【问题讨论】：

标签： javascript html css polymer

【解决方案1】：

这是known limitation of the Shadow DOM polyfill。它在防止组件样式溢出方面做得很好，但反过来就不行了。

Here's 用于您的用例的代码笔。它可以在 Chrome 33.0.1717.0 canary（Polymer 不填充 Shadow DOM）中按您的意图工作，但在 31.0.1650.57 中则不行。

【讨论】：