Polymer

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>

正确显示蓝色 'p' 元素说 "Hello World!"，我还可以看到元素上的 CSS 样式正确地没有渗透到其他 'p'元素之外的页面元素。

到目前为止一切顺利。但是，在文档中我一直在阅读 Web 组件的好处之一是它的内部实现细节从主 DOM 树中隐藏。他们给出的示例是 'video' 元素，其中包含其他元素，但您不能直接查询这些元素。

但是，在 Chrome 开发人员工具中，我能够在 'test-element' 内的 DOM 树中看到 'p' 元素。我什至可以用 jQuery 查询它，我认为我不应该这样做：

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

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

Answer 1

您所看到的背后的原因是 shady-dom。 Polymer 默认实现 shady-dom 而不是 shadow-dom（这也是我们使用 lite 版本 webcomponentsjs 的原因，没有阴影 - dom 存在）作为 3主要浏览器（chrome、safari 和 firefox）目前只有 chrome 支持，shadow-dom 并且使用 polyfill(webcomponentsjs) 中的 shadow-dom 非常昂贵（以及其他一些原因） . shady-dom 有其自身的缺点，包括您观察到的缺点和其他一些缺点。您可以阅读更多关于 shadow 和 shady dom here.

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

对于那些支持它的浏览器（即 Chrome），您可以通过将全局 'dom' Polymer 设置设置为 [=39= 来启用 Shadow DOM ]（有关详细信息，请参阅 Polymer Docs）：

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

Polymer - 在 Chrome 的元素浏览器中可见的内部元素

Polymer - Internal elements visible in Chrome's elements browser

google-chrome

web-component

polymer-1.0