javascript - Polymer:自定义元素不隐藏标记、CSS

Question

当我第一次阅读 Polymer 的基础知识时，我认为 polymer 标签内的所有内容(html、css、js)都隐藏在影子 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 做了它能做的事情。

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

背景:

Chrome 在 M25 中发布了 Shadow DOM 的早期版本。此后已被弃用。您所谈论的 Polymer 的早期版本很可能正在使用旧的 API (webkitCreateShadowRoot)。