外部样式渗入我的 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。
在我的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。