Polymer：自定义元素不隐藏标记，css

Question

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

我已经尝试过旧版的Polymer，它看起来像我预期的那样！但后来我遇到了一些浏览器兼容性问题。我对所有这一切感到很困惑。

如果自定义元素中的所有内容都应隐藏在Shadow DOM中，为什么我的css和标记＆＃34;暴露＆＃34;而不是隐藏或封装？

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

您所看到的是Shadow DOM polyfill而非Native DOM。在polyfill下，Polymer将您在Shadow DOM中定义的节点渲染为元素的子节点。没有办法真正模仿SD的封装功能。 polyfill尽其所能。

要查看原生Shadow DOM，请使用Chrome Canary并启用＆＃34;实验性网络平台功能＆＃34;标志在约：旗帜。好消息是，当浏览器中提供原生Shadow DOM时（Chrome很快就会推出FF），Polymer会使用它，你的元素确实会被封装。

背景：

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