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

Question

问题

在处理聚合物项目时，我发现他们在 Shadow DOM polyfill 上的页面存在一系列已知限制http://www.polymer-project.org/platform/shadow-dom.html#known-limitations。

列表中的第一个限制是：

研究

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

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

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

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

我了解聚合物及其 polyfill 的设计，是为了让较新的 Web 技术可访问，并允许旧浏览器中不受支持的功能通过旧技术或优雅的故障转移得到支持。所以我理解这个问题将如何被视为 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 的 shadow dom 中。第一个示例，其中元素的 shadow dom 中的 div 被设置为红色。那是因为没有阴影 dom 边界阻止外部样式匹配。

第二个限制是插入点。 polyfill 将原生选择器 ::content p 重写为 my-element p，而后者又错误地匹配 shadow dom 中的 <p>。

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

希望这会有所帮助。