利用 constructable stylesheets 高效引入 css 的核心做法是：使用 new cssstylesheet() 创建样式表实例，通过 replacesync() 或 replace() 方法注入样式规则，最后将实例赋值给元素的 adoptedstylesheets 属性。这样做能显著减少解析开销并支持运行时动态修改样式，且浏览器会自动处理样式隔离与复用。
如何创建并应用一个可复用的样式表实例？
创建一个可复用的样式表实例需要经历定义、填充和挂载三个步骤。首先调用 new CSSStyleSheet() 获取空实例，接着使用 replaceSync() 同步写入 CSS 字符串，最后将该实例放入目标元素（如 Shadow DOM 宿主或 Document 节点）的 adoptedStyleSheets 数组中。此过程在页面加载阶段执行一次即可，后续相同组件可直接引用该实例，避免重复解析。
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
.card {
background: #f0f0f0;
padding: 16px;
border-radius: 8px;
}
`);
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<div class="card">Content</div>';
// 关键步骤：应用样式表
this.shadowRoot.adoptedStyleSheets = [sheet];
}
}
customElements.define('my-card', MyCard);
运行上述代码后，所有 sheet 实例。若需验证效果，可在控制台检查 document.querySelectorAll('my-card') 返回的元素，其 Shadow Root 的 adoptedStyleSheets 属性将包含相同的 CSSStyleSheet 对象引用，证明内存中仅存在一份样式数据。
如何在运行时安全地动态更新样式内容？
运行时动态更新样式应优先使用 replace() 方法而非 replaceSync()，因为前者支持异步操作并可返回 Promise，便于在样式替换完成前进行状态管理或回滚。当需要批量修改多个规则时，可先构建新的 CSS 字符串，再调用 sheet.replace(newCSS)。由于 adoptedStyleSheets 是只读数组，更新内容时无需重新赋值数组本身，只需修改已挂载的 sheet 实例内部即可触发重绘。
// 假设 sheet 已在上一节中定义并应用
async function updateThemeColor(newColor) {
const newCSS = `
.card {
background: ${newColor};
color: white;
}
`;
try {
await sheet.replace(newCSS);
console.log('样式更新成功');
} catch (error) {
console.error('样式更新失败:', error);
}
}
// 调用示例
updateThemeColor('#3498db');
执行 updateThemeColor('#3498db') 后，所有已渲染的 replace() 是异步的，若在极短时间内连续调用多次，只有最后一次调用的结果会生效，中间过程会被丢弃。这种机制保证了样式更新的原子性，避免了部分更新导致的闪烁问题。
当 adoptedStyleSheets 数组为空时会发生什么？
当 adoptedStyleSheets 数组为空或未设置时，元素将不会应用任何 Constructable Stylesheet 定义的样式，仅依赖常规 CSS 选择器或内联样式。此时即使 CSSStyleSheet 实例已通过 replaceSync() 填充了内容，也不会对 DOM 产生视觉影响。这通常发生在开发者忘记将实例推入数组，或在 Shadow DOM 模式下误用了全局样式表引用。验证方法是检查元素的 computed style，若预期样式未生效，则需确认 adoptedStyleSheets 是否包含正确的实例引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
