如何避免Angular Shadow DOM Style Bleeding

Question

我有一个主机组件，其中包含使用 ViewEncapsulation.None 的标头组件和使用 ViewEncapsulation.ShadowDom 的 mainContainer 组件。 mainContainer 组件还包括一个带有 ViewEncapsulation.None 的管理组件。我观察到管理组件的样式同时应用于 Shadow DOM 和根 DOM，这会影响 header 组件的样式。如何防止管理组件的样式泄漏到根 DOM 中？

管理组件是一个复合组件，包含其他几个组件，我不想使用 ViewEncapsulation.ShadowDom。

Answer 1

您可以编写一个包含更改的包装类，这将解决您的泄漏到根问题。

为了简单起见，您必须使用

scss

。

.admin-component {
  // other classes here
}

在 HTML 中，您必须将

admin-component

类应用到组件 HTML 的根目录。

<div class="admin-component">
    ...
</div>

您还可以尝试

:host

缩小CSS的范围。

:host {
  // other classes here
}

---

为了防止 CSS 向下泄漏，您必须使用单级样式，这意味着使用

>

您始终定位组件内最近的 dom 元素。

.admin-component {
  & > div.container > div.col-12 > div.title-text {
    color: white;
  }
}

上述样式不会泄漏到子元素，并且仅适用于您的组件。但更简单的方法就是启用

ViewEncapsulation.Default

，而不是这个方法。