理解constructed stylesheet与#shadow-root 解决Angular组件CSS覆盖问题

Shadow DOM样式隔离机制 #

Angular widget如果使用Native Shadow DOM封装（即你看到的#shadow-root节点），会默认开启样式隔离，主文档的普通CSS规则无法直接作用到Shadow Tree内部的元素，这是多次尝试样式不生效的核心原因。

定位Shadow Root内样式来源 #

打开Chrome DevTools，选中Shadow Root内的目标元素，查看「样式」面板的规则来源标注即可判断：

• 标注为injected stylesheet：样式来自Constructed Stylesheet注入
• 标注为shadow root内<style>标签：样式是widget内部静态挂载的style标签
• 标注为具体CSS文件名：样式来自Angular组件编译后的打包样式

Constructed Stylesheet核心说明 #

这是浏览器原生提供的样式表API，核心特性如下：

• 支持创建可复用的样式表实例，无需重复生成