聚合物中的CSS封装限制及其Shadow DOM(CSS Encapsulation Limitations in Polymer and Its Shadow DOM)

 问题 
 
 在使用聚合物项目时，我发现他们在Shadow DOM polyfill上的页面有一组已知的限制http://www.polymer-project.org/platform/shadow-dom.html#known-limitations 。 
 
 列表的第一个限制是： 
 
 
 研究 
 
 在我运行的一些简单测试中，我没有看到任何封装问题。 我有一个jsbin，我一直在测试。 http://jsbin.com/ANeCUv/10/edit 。 
 
 为了测试我从聚合物模板里面的样式标签中删除了那个css import语句。 我注意到，即使在上面标题中的样式标记中仍然调用相同的导入，该元素也变得没有样式。 这至少在这种情况下向我展示了封装阻止了jquery-ui.css为我的元素的Shadow DOM设置样式。 
 
 我决定更具体地研究这个问题，并在样式指南http://www.polymer-project.org/articles/styling-elements.html的评论中找到了一些参考文献，例如这个参考文献。 
 
 
 我再次使用旧版本的IE测试，并确认css从元素外部引用的样式中流失。 
 
 我理解聚合物及其polyfill的设计，是为了使新的Web技术可访问，并允许旧版本的技术支持不受支持的功能或优雅地进行故障转移。 所以我理解这个问题如何被视为Shadow DOM polyfill的限制。 
 
 除了支持旧浏览器的这个问题，我还没有找到其他封装问题。 虽然“CSS封装有限”是一个非常通用的标签，如果唯一已知的限制是与旧浏览器不兼容。 
 
 概要 
 
 除了旧版浏览器中Shadow DOM polyfill支持的不一致之外，还有CSS Encapsulation的其他已知问题？ 

Issue
 
In working with the polymer project I found that their page on their Shadow DOM polyfill had a set of known limitations http://www.polymer-project.org/platform/shadow-dom.html#known-limitations.
 
The first limitation on the list was :
 
 
Research
 
I hadn't seen any encapsulation issues on some of the simple tests I had run. I have one jsbin, I've kept around to test things. http://jsbin.com/ANeCUv/10/edit . 
 
To test I removed that css import statement from my style tag inside of the polymer template. I noted that the element became unstyled even though the same import was still called in the style tag in the above header. This showed me at least in this case the encapsulation prevented the jquery-ui.css from styling the Shadow DOM of my element.
 
I decided to research the issue more specifically, and found a few references, like this one in the comments of a styling guide http://www.polymer-project.org/articles/styling-elements.html 
 
 
I tested again with an older version of IE and confirmed that css was bleeding in from styles referenced outside of the element. 
 
I understand the design of polymer and its polyfills, is to make newer web technologies accessible, and allow unsupported features in older browsers to be supported with older techniques or failover gracefully. So I understand how this issue wold be viewed as a limitation of the Shadow DOM polyfill. 
 
Other than this issue with support for older browsers, I have not been able to find other encapsulation issues. Though the "CSS encapsulation is limited" is a very generic label if the only specific known limitation is incompatibility with older browsers.
 
Summary
 
Outside of inconsistencies in the Shadow DOM polyfill support in older browsers are their other known issues with CSS Encapsulation? 

原文：https://stackoverflow.com/questions/24806213