聚合物及其阴影DOM中的CSS封装限制
玛卜杜拉
问题
在处理Polymer项目时，我发现他们在Shadow DOM polyfill上的页面具有一组已知的限制http://www.polymer-project.org/platform/shadow-dom.html#known-limitations。
列表上的第一个限制是：
研究
在我运行的一些简单测试中，我没有看到任何封装问题。我有一个jsbin，我一直在进行测试。http://jsbin.com/ANeCUv/10/edit。
为了测试，我从聚合物模板内部的样式标签中删除了css import语句。我注意到，即使在上述标题的style标签中仍调用了相同的导入，该元素也变得没有样式。这至少在这种情况下告诉我，封装阻止了jquery-ui.css对元素的Shadow DOM进行样式设置。
我决定更具体地研究该问题，并在样式指南的评论中找到了一些参考，例如http://www.polymer-project.org/articles/styling-elements.html
我再次使用较旧版本的IE进行了测试，并确认css正在从元素外部引用的样式中渗入。
我了解聚合物及其填充材料的设计，是为了使更新的Web技术可访问，并允许使用较旧的技术来支持较旧浏览器中不受支持的功能或进行故障转移。因此，我知道如何将此问题视为Shadow DOM polyfill的限制。
除了此问题（支持较旧的浏览器）之外，我无法找到其他封装问题。如果唯一已知的限制是与旧版浏览器不兼容，则“ CSS封装是有限的”是一个非常通用的标签。
概要
除了旧版浏览器中Shadow DOM polyfill支持的不一致之外，它们在CSS封装方面还有其他已知问题吗？
比比尔
大多数情况下，您永远不会遇到问题，或者只需要进行一些调整即可在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下进行调整。
希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
聚合物阴影dom元素的基于类的CSS样式
- 2
聚合物-获得位于阴影dom中的divs位置
- 3
包含聚合物元素的DIV的动态高度（阴影DOM）
- 4
具有聚合物元素的XMSerializer暴露阴影dom
- 5
如何在聚合物自定义元素中呈现阴影DOM
- 6
访问聚合物中的DOM
- 7
没有阴影球造型封装的聚合物元件
- 8
没有阴影球造型封装的聚合物元件
- 9
索引不接收聚合物中的阴影根事件
- 10
飞镖聚合物中的条件CSS
- 11
聚合物组件不封装JavaScript
- 12
飞镖聚合物更新聚合物dom元素
- 13
飞镖聚合物更新聚合物dom元素
- 14
dom-if模板中的聚合物1.0选择元素
- 15
dom-if中重复的聚合物模板
- 16
聚合物硫化CSS
- 17
带有选择器的聚合物/阴影dom通用选择器
- 18
聚合物：轻型DOM与本地DOM
- 19
在聚合物中定位？
- 20
从DOM中删除聚合物元素并再次插入后如何更新聚合物元素绑定
- 21
聚合物“ DOM绑定”更新绑定
- 22
聚合物成分影响外部DOM
- 23
覆盖聚合物元素CSS
- 24
聚合物数据绑定中的“ with”语句？
- 25
聚合物特性不在元素中
- 26
去除飞镖中的聚合物元素
- 27
聚合物中的横向沟通
- 28
聚合物-遍历模板中的对象
- 29
声明聚合物中的事件
我来说两句