Angular - ShadowDom 封装

ViewEncapsulation.ShadowDom

ShadowDom 模式将应用 HTML 原生的 shadow dom 概念来限定组件的样式范围。组件的元素在任何情况下都不会受到全局样式的干扰，因为它完全通过 shadowDOM 概念隐藏。

示例 - ShadowDom 封装的使用

让我们创建一个简单的组件来查看 ViewEncapsulation.None 模式是如何工作的。

步骤 1： 使用 cd 命令导航到项目文件夹。创建一个新组件并将其命名为 view-encapsulation-sample。

ng generate component view-encapsulation-sample
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.spec.ts (675 bytes)
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.ts (271 bytes)
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.css (0 bytes)
CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.html (41 bytes)

步骤 2： 现在，转到 view-encapsulation-sample.ts 文件。为组件添加 ViewEncapsulation.None 模式，如下所示 −

view-encapsulation-sample.ts

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

@Component({
   selector: 'app-view-encapsulation-sample',
   imports: [],
   templateUrl: './view-encapsulation-sample.html',
   styleUrl: './view-encapsulation-sample.css',
   encapsulation: ViewEncapsulation.None
})
export class ViewEncapsulationSample {

}

步骤 3： 修改模板 view-encapsulation-sample.html，添加两个容器，如下所示 −

view-encapsulation-sample.ts

<div>I am inside the none container</div>
<div class="mystyle">I am inside the none container and has my own style</div>

在这里，第一个容器没有任何样式或 class，更容易受到全局样式的干扰。第二个容器具有 class 属性，但仍然有可能受到全局样式的干扰。

步骤 4： 在组件 CSS 文件 view-encapsulation-sample.css 中应用样式，如下所示 −

view-encapsulation-sample.css

div.mystyle { color: brown }

步骤 5： 将组件添加到 app 组件和 app.html 中，如下所示 −

app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ViewEncapsulationSample } from './view-encapsulation-sample/view-encapsulation-sample';

@Component({
   selector: 'app-root',
   imports: [RouterOutlet, ViewEncapsulationSample],
   templateUrl: './app.html',
   styleUrl: './app.css'
})
export class App {
   protected readonly title = signal('expense-manager');
}

app.html

<app-view-encapsulation-sample />
<router-outlet />

步骤 6： 在全局 CSS 资源 styles.css 中添加针对 div 标签的样式，并运行应用程序。

styles.css

div { color: blue }

输出

现在，运行应用程序并查看输出。

现在，两个容器都受到原生 shadowDOM 概念的保护，不受全局样式的干扰。

在应用程序中应用不同的封装

组件的 view encapsulation 可以与其他在应用程序中使用的组件不同，因为 view encapsulation 是按组件基础应用的。即使是嵌套组件也可以根据组件需求具有不同的 view encapsulation 选项。Angular 甚至在非常复杂的嵌套组件树中也会按照指示应用封装。