3

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

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

4

1 回答 1

3

这是Shadow DOM polyfill 的一个已知限制。它在防止组件样式溢出方面做得很好，但反过来就不行了。

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

于 2013-11-24T07:01:02.970 回答