聚合物 - 在Chrome的元素浏览器中可见的内部元素

Question

我刚开始学习Polymer，我一直在研究他们的文档。我创建了一个非常简单的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>

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

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

这正确显示了一个蓝色的＆＃39; p＆＃39;元素说＆＃34; Hello World！＆＃34;，我还可以看到元素上的CSS样式正确地没有渗透到其他＆＃39; p＆＃39;元素之外页面上的元素。

到目前为止一切顺利。但是，在文档中，我一直在阅读Web组件的一个好处是它的内部实现细节隐藏在主DOM树之外。他们给出的例子是视频＆＃39;元素，其中包含其他元素，但您无法直接查询这些元素。

但是，在Chrome开发者工具中，我能够看到＆＃39; p＆＃39;我的＆＃39; test-element＆＃39;中的DOM树中的元素。我甚至可以用jQuery查询它，我认为我不应该这样做：

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

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

Answer 1

您看到的原因是shady-dom。默认情况下，聚合物实现shady-dom而不是shadow-dom（这也是我们使用lite webcomponentsjs版本的shadow-dom，不存在影子dom）的原因，因为3个主流浏览器（chrome） ，safari和firefox）目前只有chrome有支持且shadow-dom使用来自polyfill(webcomponentsjs)的{​​{1}}非常昂贵（以及其他一些原因）。 shady-dom有其自身的缺点，包括你观察到的和其他一些。您可以详细了解shadow和shady dom here。

注意：如果您在devtool设置中启用了shadow-dom选项，则仍然可以在chrome dev-tool中看到Show user agent shadow DOM的内部元素，但是这样使用不同NodeList结构的时间。

对于那些支持它的浏览器（即Chrome），您可以通过设置全局＆＃39; dom＆＃39;来启用Shadow DOM。聚合物设置为阴影＆＃39; （有关详细信息，请参阅Polymer Docs）：

window.Polymer = {
  dom: 'shadow'
};