Light DOM 样式 "leaking" 到 Polymer 组件的阴影 DOM

Question

我有一个聚合物网络组件，在组件中有一个 div 命名内容。

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

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

:host {
   all: initial;
 }

有什么想法吗？

Answer 1

Polymer 默认不使用阴影-dom。它使用一个名为 shady dom 的近似值，它不提供样式封装，所有内容都被转储到 light dom.

如果您想默认启用阴影 dom，您可以使用此 config：

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

Light DOM styles "leaking" into Polymer component's shadow DOM