Angular配置ViewEncapsulation.ShadowDOM后CSS样式未隔离如何解决？

1. 你观测到的不是ShadowDOM样式隔离失效，而是CSS的默认继承特性：ShadowDOM的隔离规则仅阻止外部CSS选择器直接选中ShadowDOM内部元素、以及非继承属性的渗透，但font-size、color、font-family这类可继承属性，默认会从处于普通DOM树中的组件宿主元素（即你示例中的<my-app>标签）继承属性值，宿主本身会继承全局CSS给html、body等父级设置的可继承属性，进而传递到ShadowDOM内部，这是W3C规范规定的正常表现，不是Angular或者ShadowDOM的Bug。
2. 如果出现非继承属性（如border、background）渗透的情况，可以排查是否使用了过旧的Angular版本存在兼容问题，或是浏览器开发者工具开启了自动注入测试样式的相关开关。

• 要完全阻断所有全局可继承属性传入当前ShadowDOM组件，可以在组件样式文件中给:host设置all: initial重置所有继承属性，之后再自定义组件的基础样式即可：

/* app.component.css */
:host {
  all: initial;
  /* 补充组件自身需要的基础布局、样式属性 */
  display: block;
  font-size: 14px;
  color: #333;
}

• 如果仅需要覆盖个别继承属性，直接在:host上定义对应属性值即可，无需全量重置：

:host {
  font-size: 16px; /* 单独覆盖全局继承的字号 */
}

• 全局样式中尽量避免使用*通配符设置可继承属性，减少不必要的继承传递。

内容的提问来源于stack exchange，提问作者The.Wolfgang.Grimmer