如何阻止组件使用者通过::ng-deep修改我的Angular组件样式？

• 正确启用ViewEncapsulation.ShadowDom
  你之前测试ShadowDom没生效，大概率是用法没到位。得给组件库的每个核心组件显式配置encapsulation: ViewEncapsulation.ShadowDom，而且组件的样式必须定义在自身的styles/styleUrls里。Shadow DOM的天生隔离特性会直接挡住外部的::ng-deep穿透，因为Shadow DOM边界会彻底阻断外部样式入侵，不管是普通选择器还是::ng-deep这种穿透型的都没用。
  示例代码：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'lib-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    encapsulation: ViewEncapsulation.ShadowDom // 关键配置
  })
  export class MyComponentComponent { }
  

  注意：要是组件库的组件嵌套了没开ShadowDom的子组件，那子组件可能还是会被穿透，所以得确保核心组件全量启用ShadowDom。

• 用CSS Shadow Parts做可控样式开放
  要是你需要给开发者留定制空间，但又不想让他们乱改，可以用CSS Shadow Parts。在组件模板里给允许定制的元素加part属性，比如：

  <div part="container">
    <p part="text">组件内容</p>
  </div>
  

  开发者只能通过:part()选择器定制这些暴露的元素，根本没法用::ng-deep碰未暴露的内部元素，既保留了灵活性，又锁死了不可控的样式穿透。
  外部定制示例：

  lib-my-component::part(container) {
    background-color: #f0f0f0;
  }
  

• SCSS层面强化样式隔离
  在组件库的SCSS代码里，把所有样式都套在:host选择器下，别写全局样式。另外，用SCSS的混合宏或者变量封装样式逻辑，进一步确保内部样式不会被外部::ng-deep影响。比如：

  :host {
    display: block;
    // 所有组件样式都塞这里面
    .internal-element {
      color: #333;
    }
  }
  

  搭配ShadowDom一起用的话，这种包裹会把隔离效果拉满，外部::ng-deep根本碰不到内部元素。

内容的提问来源于stack exchange，提问作者Flame of Anor