聚合物中的CSS封装限制及其Shadow DOM

Question

问题

在使用聚合物项目时,我发现他们在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的其他已知问题吗？

Answer 1

大多数情况下,您从未遇到过问题,或者只需要进行一些调整即可在polyfill和Native Shadow DOM下工作.

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

如果您在Chrome稳定版与FF,Safari或IE中运行该页面,您会看到差异.

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

插入点可以看到第二个限制.在填充工具重写天然选择::content p是my-element p,这反过来,不正确地匹配<p>在阴影DOM.

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

希望这可以帮助.