0

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

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

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

显示使用旧版本 Polymer 的示例的图像

图片显示了与当前版本相同的示例，其中样式和标记可见

谢谢

4

1 回答 1

3

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

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

背景：

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

于 2014-04-01T15:54:32.467 回答