Javascript 聚合物及其影子DOM中CSS封装的局限性 问题

在处理polymer项目时，我发现他们的ShadowDOM polyfill页面有一系列已知的限制

清单上的第一个限制是：

研究 在我运行的一些简单测试中，我没有看到任何封装问题。我有一个jsbin，我一直在测试东西

为了测试，我从聚合模板内部的样式标记中删除了css导入语句。我注意到，即使在上面标题中的样式标记中仍然调用了相同的导入，该元素仍然没有设置样式。这表明，至少在本例中，封装阻止了jquery-ui.css对元素的阴影DOM进行样式化

我决定更具体地研究这个问题，并在样式指南的评论中找到了一些参考资料，比如这篇

我用一个旧版本的IE再次测试，确认css从元素外部引用的样式中溢出

我理解polymer及其polyfills的设计是为了让新的web技术可以访问，并允许旧浏览器中不受支持的功能得到旧技术的支持或优雅地进行故障切换。所以我理解这个问题将如何被视为阴影DOM多边形填充的一个限制

除了支持旧浏览器的问题之外，我还没有发现其他封装问题。尽管“CSS封装有限”是一个非常通用的标签，如果已知的唯一特定限制是与旧浏览器不兼容的话

总结

---

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

大多数情况下，在polyfill和本机Shadow DOM下，您永远不会遇到问题，或者只需要进行一些调整即可

此bin说明了两个常见问题：

如果在Chrome stable与FF、Safari或IE中运行该页面，您将看到不同之处

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

第二个限制是插入点。polyfill将本机选择器

：：content p

重写为

我的元素p

，这反过来又错误地匹配了阴影dom中的

这两个问题都有解决办法，但需要谨慎。讨论如何执行严格的样式设置，以及如何使用

polyfill-*

选择器在polyfill下进行调整

希望这有帮助