轻量级 DOM 样式“泄露"进入 Polymer 组件的 shadow DOM [英] Light DOM styles "leaking" into Polymer component's shadow DOM

问题描述

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

I have a polymer web component which has a div named content, within the component.

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

I have noticed that if the host page has a style for div.content then it applies that style to my component!

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

This is an unexpected turn of events since web components are supposed to prevent light DOM styling from leaking into the component. In addition, I am using the following css rule which is supposed to prevent such a thing from happening:

:host {
   all: initial;
 }

有什么想法吗?

推荐答案

Polymer 默认不使用 shadow-dom.它使用它的近似值 shady dom，它不提供样式封装，一切都被转储到 light dom 中.

Polymer by default doesn't use shadow-dom. It uses an approximation of it called shady dom, which doesn't provide style encapsulation and everything is dumped into light dom.

如果你想默认启用 shadow dom，你可以使用这个 配置:

If you want to enable shadow dom by default, you can do so by using this config:

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

这篇关于轻量级 DOM 样式“泄露"进入 Polymer 组件的 shadow DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！