外部风格正在流入我的Polymer组件的本地DOM

Question

在我的index.html中，我导入了我的Polymer自定义元素并链接了引导程序样式表。如果我检查我的自定义元素及其本地DOM，我看到引导样式正在流淌到它上面。是因为Polymer（shady DOM）的影子DOM填充不支持封装吗？

我已尝试将Polymer全局DOM设置设置为"shadow"，但这并没有帮助（可能是因为我使用的是Safari而且它还不支持shadow DOM ，但我已经链接了完整的WebComponents库，所以它应该填充那个）。

在SO上搜索，我发现了这个问题：External CSS affecting ("bleeding" into) shadow DOM with Polymer，但它与Polymer的0.5版有关，所以我现在还不知道它对我来说有多相关。 / p>

Answer 1

  

已知限制

     

  
• CSS封装有限。
  

这是Shadow DOM polyfill的known limitation。

Answer 2

在Polymer 1.0中默认不启用Shadow DOM。这是因为并非所有浏览器目前都支持shadow DOM，并且难以拼接，因此他们不希望人们在不同的浏览器中体验不同的外观。但是你可以打开它。有关如何执行此操作，请参阅here。有关此here和here

的详细信息

Answer 3

想象一下Shady DOM实现类似于jQuery插件。 当插件向您添加新元素时，不会以任何方式封装。

你可以强制Polymer使用shadow DOM，但要注意它不是完全支持的，并且polyfill webcomponents.js正在做一个繁重的工作，因此性能不是最佳的。