外部样式正在渗入我的 Polymer 组件的本地 DOM答案

【问题标题】：External style is bleeding into my Polymer component's local DOM外部样式正在渗入我的 Polymer 组件的本地 DOM
【发布时间】：2015-10-16 10:56:33
【问题描述】：

在我的 index.html 中，我正在导入我的 Polymer 自定义元素并链接引导样式表。如果我检查我的自定义元素及其本地 DOM，我会发现引导程序样式正在流血。是不是因为Polymer（shady DOM）的shadow DOM polyfill不支持封装？

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

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

【问题讨论】：

【解决方案1】：

已知限制

CSS 封装是有限的。

这是 Shadow DOM polyfill 的 known limitation。

【讨论】：

【解决方案2】：

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

【讨论】：

正如我在问题描述中所说，我已经尝试启用 shadow dom，但没有帮助。这可能是因为 Safari 尚不支持 shadow DOM，并且无法通过 polyfill 实现封装。

【解决方案3】：

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

您可以强制 Polymer 使用 shadow DOM，但请注意它没有得到完全支持，并且 polyfill webcomponents.js 正在做繁重的工作以使其工作，因此性能不是最佳的。

【讨论】：

如果至少 web components.js polyfill 提供封装我会很高兴，但根据我的测试它没有。令人困惑的是，Polymer 文档说：“Shadow DOM（及其通过 Shady DOM 的近似值）为 Web 开发带来了非常需要的范围和样式封装的好处，从而更安全、更容易地推断 CSS 对应用程序部分的影响。样式不会从上面泄漏到本地 DOM，样式也不会从一个本地 DOM 泄漏到内部其他元素的本地 DOM。"。
来源：polymer-project.org/1.0/docs/devguide/…
我建议使用一些样式命名约定。