Javascript 外部CSS使用聚合物影响（“出血”到）阴影DOM_Javascript_Html_Css_Polymer

Javascript 外部CSS使用聚合物影响（“出血”到）阴影DOM

javascript html css polymer

Javascript 外部CSS使用聚合物影响（“出血”到）阴影DOM,javascript,html,css,polymer,Javascript,Html,Css,Polymer,我一定错过了什么，但我想不出是什么。我使用聚合物实现了简单的自定义元素：泰克。。。胸膛聚合物（“测试元素”{ applyAuthorStyles:错误， }); 然后我在一个简单的页面中使用它： .deepinside{颜色：红色；} 你好元素内部的div（带有class=“deepinside”）的内容以红色显示。如果我理解正确，这种情况就不会发生（请参阅）。请注意，我在元素的构造函数中显式声明了applyAuthorStyles:false（这应该不是必需的，因为这是默认行

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


泰克。。。胸膛
聚合物（“测试元素”{
applyAuthorStyles:错误，
});

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


.deepinside{颜色：红色；}
你好

元素内部的

div

（带有

class=“deepinside”

）的内容以红色显示。如果我理解正确，这种情况就不会发生（请参阅）。请注意，我在元素的构造函数中显式声明了

applyAuthorStyles:false

（这应该不是必需的，因为这是默认行为）。我不明白为什么外部CSS会影响阴影DOM中的元素。我甚至尝试在元素的定义中显式地指定

shadowdom

属性，但结果是一样的

我错过了什么

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

这是一个新版本。它在防止组件样式泄漏方面做得相当好，但在另一方面却做不到

为您的用例准备一个代码笔。它在Chrome 33.0.1717.0 canary中按您的意愿工作（对于它，Polymer不polyfill Shadow DOM），但在31.0.1650.57中不起作用

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