Angular ViewEncapsulation.ShadowDOM 不會隔離 css 樣式

Question

我讀過ShadowDOM將 shadow dom 樹與外部 css 隔離，所以我嘗試使用ViewEncapsulation.ShadowDom在 Angular 中使用ViewEncapsulation.ShadowDom ，但似乎全局 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 樹下。

看下圖，Font-size是由ShadowDOM下的元素繼承的

Answer 1

從w3 規范

3.3.2 繼承

影子樹的頂層元素繼承自它們的宿主元素

這意味着可繼承的樣式，如顏色或字體大小等，在 shadow DOM 中繼續繼承，將穿透 shadow DOM 並影響組件的樣式。

您可以通過使用強制它回到初始狀態

app.component.ts

:host {
  all: initial;
}

它將阻止繼承而不影響 ShadowDOM 中定義的其他 CSS。

分叉的堆棧閃電戰

也可以看看：

• https://polymer-library.polymer-project.org/2.0/docs/devguide/style-shadow-dom#use-inheritance-from-document-level-styles
• https://css-tricks.com/playing-shadow-dom/
• https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/