javascript - Polymer 及其 Shadow DOM 中的 CSS 封装限制

Question

问题

在使用 polymer 元素时，我发现他们的 Shadow DOM polyfill 页面有一组已知的限制 http://www.polymer-project.org/platform/shadow-dom.html#known-limitations .

列表中的第一个限制是:

研究

在我运行的一些简单测试中，我没有发现任何封装问题。我有一个 jsbin，我一直在测试东西。 http://jsbin.com/ANeCUv/10/edit .

为了测试，我从 polymer 模板内的样式标签中删除了 css import 语句。我注意到即使在上述 header 的样式标记中仍然调用了相同的导入，该元素也变得没有样式。这至少在这种情况下向我展示了封装阻止了 jquery-ui.css 为我的元素的 Shadow DOM 设置样式。

我决定更具体地研究这个问题，并找到了一些引用资料，例如样式指南评论中的这个 http://www.polymer-project.org/articles/styling-elements.html

我再次使用旧版本的 IE 进行了测试，并确认 css 从元素外部引用的样式中渗入。

我理解 polymer 及其 polyfill 的设计，是为了让更新的网络技术易于访问，并允许旧浏览器中不支持的功能得到旧技术或优雅故障转移的支持。所以我理解这个问题将如何被视为 Shadow DOM polyfill 的限制。

除了这个支持旧版浏览器的问题，我没能找到其他封装问题。如果唯一已知的特定限制是与旧浏览器不兼容，那么“CSS 封装是有限的”是一个非常通用的标签。

总结

除了旧版浏览器中 Shadow DOM polyfill 支持的不一致之外，还有其他已知的 CSS 封装问题吗？

Answer 1

大多数时候，您永远不会遇到问题，或者只需要进行一些调整即可在 polyfill 和原生 Shadow DOM 下工作。

这个 bin 说明了两个常见问题:http://jsbin.com/hugoliyo/2/edit

如果您在 Chrome 稳定版与 FF、Safari 或 IE 中运行该页面，您会看到不同之处。

第一个限制是来自主页的样式可能会泄漏到 polyfill 的影子 dom 中。这是第一个示例，其中元素的影子 dom 中的 div 被设置为红色。那是因为没有阻止外部样式匹配的影子 dom 边界。

第二个限制是插入点。 polyfill 重写了原生选择器 ::content p成为my-element p ，这反过来又错误地匹配了 <p>在影子 dom 中。

这两个问题都有变通方法，但需要小心处理。 http://www.polymer-project.org/docs/polymer/styling.html谈论如何强制执行严格的样式和使用 polyfill-*选择器在 polyfill 下进行调整。

希望这对您有所帮助。