Google chrome 聚合物-铬和x27中可见的内部元素；s元素浏览器

我刚开始学习聚合物，我一直在研究他们的文档。我创建了一个非常简单的Hello World元素，它似乎对我很有用：

<link rel="import" href="/path/to/polymer/polymer.html">

<dom-module id="test-element">
    <template>
        <style>
            p {
                color: blue;
            }
        </style>
        <p>Hello [[name]]!</p>
    </template>
    <script>
        Polymer({
            is: 'test-element',
            properties: {
                name: String
            }
        });
    </script>
</dom-module>

p{
颜色：蓝色；
}
你好[[姓名]]

聚合物({
是：'测试元素'，
特性：{
名称：String
}
});

我可以成功导入并使用页面上的元素：

<link rel="import" href="/path/to/my/test-element.html">
<test-element name="World"></test-element>

这正确地显示了一个蓝色的“p”元素，表示“helloworld！”，我还可以看到该元素上的CSS样式没有正确地渗透到元素外部页面上的其他“p”元素中

到目前为止还不错。然而，在我读到的文档中，web组件的好处之一是它的内部实现细节隐藏在主DOM树中。他们给出的示例是“video”元素，其中包含其他元素，但您不能直接查询这些元素

然而，在Chrome开发者工具中，我能够在我的“测试元素”中看到DOM树中的“p”元素。我甚至可以用jQuery查询它，我认为我不应该这样做：

$("test-element p")
// Produces: [ <p class="style-scope test-element">Hello World!</p> ]

$（“测试元素p”）
//产生：[p class=“style scope test element”>你好，世界！
]

---

我是做错了什么，还是我误解了聚合物的工作方式？

你看到的背后的原因是

阴暗的dom

。Polymer在默认情况下实现了

shady dom

而不是

shadow dom

（这也是我们使用

lite

版本的

webcomponentsjs

，不存在shadow dom）作为三种主要浏览器（chrome、safari和firefox）中的一种目前只有chrome支持和

shadowDOM

，使用

polyfill（webcomponentsjs）

中的

shadowDOM

成本非常高（还有一些其他原因）

shadydom

有自己的缺点，包括您观察到的缺点和其他一些缺点。您可以阅读有关

shadow

和

shady

dom的更多信息

注意：如果在devtool设置中启用

显示用户代理阴影dom

选项，您仍然可以在

chrome开发工具中看到
阴影dom
的内部元素，但这次使用不同的节点列表结构


对于那些确实支持它的浏览器（即Chrome），您可以通过将全局“DOM”设置设置为“Shadow”（有关更多详细信息，请参阅）：

您所看到的背后的原因是
shadydom
。Polymer在默认情况下实现了
shady dom
而不是
shadow dom
（这也是我们使用
lite
版本的
webcomponentsjs
，不存在shadow dom）作为三种主要浏览器（chrome、safari和firefox）中的一种目前只有chrome支持和
shadowDOM
，使用
polyfill（webcomponentsjs）
中的
shadowDOM
成本非常高（还有一些其他原因）
shadydom
有自己的缺点，包括您观察到的缺点和其他一些缺点。您可以阅读有关
shadow
和
shady
dom的更多信息

注意：如果在devtool设置中启用
显示用户代理阴影dom
选项，您仍然可以在
chrome开发工具中看到
阴影dom
的内部元素，但这次使用不同的节点列表结构


对于那些确实支持它的浏览器（即Chrome），您可以通过将全局“DOM”设置设置为“Shadow”（有关更多详细信息，请参阅）：

启用
shadowdom
后，是否可以尝试相同的测试。是怎么做到的。太棒了，我不能再在支持影子DOM的浏览器上查询内部元素了。如果您可以将您的评论作为答案发布，我将投票并接受。在启用
shadowdom
后，您可以尝试同样的测试吗。是怎么做到的。太棒了，我不能再在支持影子DOM的浏览器上查询内部元素了。如果你能发表你的评论作为回答，我会投赞成票并接受它。
window.Polymer = {
  dom: 'shadow'
};