外部样式渗入我的 Polymer 组件的本地 DOM

External style is bleeding into my Polymer component's local DOM

在我的index.html中导入我的Polymer custom element and linking the bootstrap stylesheet. If I inspect my custom element and its local DOM, I see that the bootstrap style is bleeding onto it. Is it because the shadow DOM polyfill of Polymer (shady DOM)不支持封装?

我已经尝试设置 Polymer global DOM setting to "shadow", but that didn't help (maybe because I'm using Safari and THAT it does not support shadow DOM yet, but I have linked the full WebComponents 库,所以应该对其进行 polyfill。

搜索 SO,我发现了这个问题:External CSS affecting ("bleeding" into) shadow DOM with Polymer, but it is related to version 0.5 of Polymer,所以我现在不知道它对我有多重要。

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

你可以强制 Polymer 与 shadow DOM 一起工作,但请注意它没有得到完全支持,polyfill webcomponents.js 正在做繁重的工作以使其工作,因此性能不佳最佳的。

Shadow DOM 在 Polymer 1.0 中默认不启用。这是因为目前并非所有浏览器都支持 shadow DOM 并且很难混合使用,因此他们不希望人们在不同的浏览器中体验不同的外观。但是,您可以打开它。参见 here for how to do this. More information on this here and here

Known limitations

  • CSS encapsulation is limited.

这是阴影 DOM polyfill 的 known limitation