Constructable Stylesheets：adoptedStyleSheets 与组件样式复用

---

title: Constructable Stylesheets：adoptedStyleSheets 与组件样式复用

keywords:

• Constructable Stylesheets
• adoptedStyleSheets
• CSSStyleSheet
• Shadow DOM
• 组件样式

description: 介绍可构建样式表的创建与复用、在文档与 Shadow DOM 中采用样式（adoptedStyleSheets），提升组件化样式的性能与可维护性，提供示例与兼容建议。

categories:

• 文章资讯
• 技术教程

---

概述

Constructable Stylesheets 允许通过 new CSSStyleSheet() 构建样式并在多个根（文档/Shadow DOM）间复用，避免重复 <style> 注入与字符串拼接，改善组件样式管理与性能。

示例

const sheet = new CSSStyleSheet()
await sheet.replace(`.btn{padding:8px 12px;border-radius:8px}`)
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]

class XCard extends HTMLElement {
  constructor(){ super(); const root = this.attachShadow({ mode:'open' }); root.adoptedStyleSheets = [sheet]; root.innerHTML = '<button class="btn">OK</button>' }
}
customElements.define('x-card', XCard)

工程建议

• 复用与拆分：将通用样式拆分为多个 CSSStyleSheet；按组件导入，减少重复。
• 动态更新：使用 replace/replaceSync 更新样式；控制更新频率以避免布局抖动。
• 兼容：旧浏览器回退到 <style> 注入；通过构建工具或运行时分支处理。

参考与验证

• MDN CSSStyleSheet 文档：https://developer.mozilla.org/docs/Web/API/CSSStyleSheet
• Chrome 平台文档（Adopted StyleSheets）：https://developer.chrome.com/docs/web-platform/constructable-stylesheets/
• web.dev 指南：https://web.dev/articles/constructable-stylesheets