聚合物：自定义元素不隐藏标记，css

Question

当我第一次阅读聚合物的基础知识时，我认为聚合物标签内的所有内容（html，css，js）都隐藏在阴影DOM中。用一个简单的例子练习了一下后，我意识到我添加到自定义元素中的所有标记都可以看作Light DOM元素，并且不会被隐藏！

我试过旧版本的聚合物，它似乎只是做我的预期！但后来我有一些浏览器兼容性问题。我很困惑这一切。

如果自定义元素中的所有内容都应该隐藏到Shadow DOM中，为什么我的css和标记“暴露”而不隐藏也没有封装？

Image showing an example using an OLD version of Polymer

Image showing the same example with the CURRENT version where styles and markup are visible

感谢

Answer 1

你看到的是影子DOM填充工具，而不是原生阴影DOM。在polyfill下，Polymer将您在Shadow DOM中定义的节点呈现为元素的子节点。没有办法真正模仿SD的封装特性。 polyfill尽其所能。

要查看本机Shadow DOM，请使用Chrome Canary并打开about：flags中的“实验性网络平台功能”标志。好消息是，当原生Shadow DOM在浏览器中可用时（即将用于Chrome，即将用于FF），Polymer将使用它，并且您的元素确实会被封装。

背景：

铬在M25发布影子DOM的早期版本。这已被弃用。您谈论的早期版本的聚合物很可能使用旧的API（webkitCreateShadowRoot）。