如何阻止Angular项目中ShadowDom Web组件被其他组件样式注入

以下几种方法可以阻止默认视图封装的组件样式被冗余注入到带ShadowDom的Web Components中：

• 为Web Components对应的Angular组件显式启用ShadowDom封装
  在你的Web Component组件的@Component装饰器中，设置encapsulation: ViewEncapsulation.ShadowDom，让Angular为该组件创建独立的ShadowRoot，隔离外部样式注入：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'web-component-button',
    templateUrl: './web-component-button.component.html',
    styleUrls: ['./web-component-button.component.css'],
    encapsulation: ViewEncapsulation.ShadowDom
  })
  export class WebComponentButtonComponent { }
  

• 在模块中声明CUSTOM_ELEMENTS_SCHEMA
  让Angular正确识别Web Components类型，避免将Angular组件的样式错误泄漏到Web Components中。在你的根模块或功能模块中添加：

  import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppComponent } from './app.component';
  import { WebComponentButtonComponent } from './web-component-button/web-component-button.component';
  import { RandomNormalBoxComponent } from './random-normal-box/random-normal-box.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      WebComponentButtonComponent,
      RandomNormalBoxComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class AppModule { }
  

• 让Web Components自带ShadowDom内联样式
  如果你的Web Components是独立自定义元素，直接将样式嵌入到ShadowRoot内部，不依赖Angular的样式系统，从根源上避免外部样式注入：

  class WebComponentButton extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
        <style>
          .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            background: #2196F3;
            color: white;
            cursor: pointer;
          }
        </style>
        <button class="btn"><slot></slot></button>
      `;
    }
  }
  
  customElements.define('web-component-button', WebComponentButton);
  

• 配置全局样式按需注入
  对于不需要全局注入的样式，在angular.json中设置inject: false，然后手动在需要的组件中引入，避免样式被无差别注入到所有组件（包括Web Components）：

  {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "options": {
              "styles": [
                {
                  "input": "src/styles.css",
                  "inject": false
                },
                "src/global-required-styles.css"
              ]
            }
          }
        }
      }
    }
  }
  

  之后在根组件模板中手动引入非自动注入的样式：

  <link rel="stylesheet" href="styles.css">
  

内容的提问来源于stack exchange，提问作者Niels Prins