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

Question

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

我尝试了旧版本的 Polymer，它似乎符合我的预期！但后来我遇到了一些浏览器兼容性问题。我对这一切感到很困惑。

如果自定义元素中的所有内容都应该隐藏到 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

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

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

背景：

Chrome 在 M25 中发布了 Shadow DOM 的早期版本。这已被弃用。您所说的 Polymer 的早期版本很可能使用的是旧 API (webkitCreateShadowRoot)。