不能直接用，因其每次attachshadow()都重复请求、无法复用cssom、导致fouc和内存泄漏；正确方案是new cssstylesheet()创建实例，replacesync()注入，adoptedstylesheets复用，并需手动管理生命周期防泄漏。
Constructable CSS 是目前在 Web Components 中引入外部 CSS 的唯一可控方案，不是“能用就行”，而是“必须自己管生命周期”。
为什么不能直接用 <link rel="stylesheet"> 加载外部 CSS？
在 Shadow DOM 里写 <link href="style.css"> 看似省事，但每次调用 attachShadow() 都会触发一次 HTTP 请求，即使 URL 完全相同；浏览器不会复用已加载的样式表，导致重复 fetch、FOUC（闪屏）、CSSOM 内存泄漏。更关键的是：它无法跨组件实例共享解析后的样式规则——每个组件都持有一份独立的 CSSOM 对象。
如何正确创建并复用 CSSStyleSheet 实例？
核心是把样式表变成 JS 对象，提前构造、缓存、注入。流程分三步：
- 用
new CSSStyleSheet()创建一次，之后复用该实例 - 用
sheet.replaceSync(text)同步注入 CSS 文本（避免异步加载导致的样式空白） - 将同一
sheet实例赋给多个shadowRoot.adoptedStyleSheets
示例：
const BUTTON_STYLES = new CSSStyleSheet();
BUTTON_STYLES.replaceSync(`
:host { display: inline-block; }
button { background: #007bff; color: white; border: none; }
`);
class MyButton extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [BUTTON_STYLES]; // 复用！
shadow.innerHTML = `<button><slot></slot></button>`;
}
}
customElements.define('my-button', MyButton);
哪些浏览器支持？要不要 polyfill？
截至 2026 年 9 月，CSSStyleSheet 和 adoptedStyleSheets 已全量稳定支持：
- Chrome 73+、Edge 79+、Firefox 117+
- Safari 17.4+（2024 年 3 月起移除实验标记）
无需 polyfill。若需兼容 Safari 17.3 及更早版本，可降级为 shadowRoot.innerHTML += '<style>...</style>'，但会失去复用和同步注入能力。
最容易被忽略的点：生命周期管理
CSSStyleSheet 是 JS 对象，不会自动销毁。如果组件频繁挂载/卸载（比如路由切换、列表滚动），而你没在 disconnectedCallback() 中清理 adoptedStyleSheets，旧 sheet 会持续驻留内存，造成累积泄漏。必须手动做两件事：
- 保存对
sheet的引用（比如存在类静态属性或 WeakMap 中） - 在
disconnectedCallback()中执行shadowRoot.adoptedStyleSheets = []
否则，看似“轻量”的样式复用，反而成为内存泄漏的温床。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
