Light DOM 样式“泄漏”到 Polymer 组件的 shadow DOM 中

【问题标题】：Light DOM styles "leaking" into Polymer component's shadow DOMLight DOM 样式“泄漏”到 Polymer 组件的 shadow DOM 中
【发布时间】：2016-02-05 04:52:53
【问题描述】：

我有一个聚合物网络组件，它在组件内有一个名为 content 的 div。

我注意到如果主机页面具有div.content 的样式，那么它将将该样式应用于我的组件！

这是一个意外的转折，因为 Web 组件应该防止轻量级 DOM 样式泄漏到组件中。此外，我正在使用以下 css 规则，它应该可以防止这种事情发生：

:host {
   all: initial;
 }

有什么想法吗？

【问题讨论】：

能否请您添加整个元素的代码以及您如何使用它并添加内容的HTML？

标签： polymer polymer-1.0 web-component

【解决方案1】：

Polymer 默认不使用 shadow-dom。它使用它的近似值 shady dom，它不提供样式封装，所有内容都被转储到 light dom 中。

如果你想默认启用shadow dom，你可以使用这个config：

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

【讨论】：

我自己也意识到了这一点。
我真的不明白为什么这不是默认值。
Shadow DOM polyfill 真的很重。在原生不支持它的浏览器（除 chrome 之外的所有浏览器）上，您可以轻松地期望加载时间增加约 3 倍。这就是 IMO 可能选择加载精简版 polyfill 的原因，即默认情况下的 webcomponents-lite.js。
@Abhinav 这个答案不会强制 Polymer 加载完整的 shadow dom 支持。此标志仅指示 Polymer 使用浏览器提供的本机 Shadow DOM 实现（如果存在） - 因此仅在 Chrome 中。可能需要使用来自 Web 组件的完整 ShadowDOM polyfill，但我还没有测试过。