Angular ViewEncapsulation.ShadowDOM 不隔离 css 样式答案

【问题标题】：Angular ViewEncapsulation.ShadowDOM doesn't isolate css stylesAngular ViewEncapsulation.ShadowDOM 不隔离 css 样式
【发布时间】：2021-09-04 05:07:05
【问题描述】：

我读到ShadowDOM 将 shadow dom 树与外部 css 隔离开来，所以我尝试使用 ViewEncapsulation.ShadowDom 在 Angular 中使用它，但似乎全局 css 仍在泄漏到 Shadow DOM .

请在此处查看代码： https://stackblitz.com/edit/shadow-dom-test?file=src/app/app.component.ts

import { Component, VERSION, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
}

之后，在style.css 中设置任何css 都会影响AppComponent 下的元素，即使封装设置为ViewEncapsulation.ShadowDom 并且组件包含在ShadowDom 树下。

见下图，ShadowDOM下的元素继承Font-size

【问题讨论】：

您使用的是哪种浏览器？
some css 是什么？你能具体说明问题吗？
@deepakchethan 我正在使用 google-chrome
@yurzui，是的，style.css 下的全局样式会影响AppComponent 下的元素，即使它有ViewEncapsulation.ShadowDom。我一直认为全局样式不会影响 ShadowDom 下的元素。

标签： angular shadow-dom

【解决方案1】：

来自w3 spec

3.3.2 继承

影子树的顶级元素从其宿主继承元素

这意味着可继承的样式，如颜色或字体大小等，继续在 shadow DOM 中继承，将穿透 shadow DOM 并影响组件的样式。

你可以通过使用强制它回到初始状态

app.component.ts

:host {
  all: initial;
}

它将阻止继承而不影响 ShadowDOM 中定义的其他 CSS。

Forked Stackblitz

另见：

【讨论】：

我总是把lamplightdev.com/blog/2019/03/26/…博客放在第一位，这是最好的书面解释
太棒了！现在，这一切都说得通了。非常感谢。有没有办法在创建组件时自动添加:host { all: initial }？
您可以为组件创建自己的原理图，您可以在其中拥有此 css