能否为可构造样式表添加唯一标识？CSSStyleSheet是否为只读对象？

场景设置 #

• 用户交互可能触发多个组件异步注入文档，每个组件对应一个可构造样式表（Constructable Stylesheet）
• 组件标记可被重复注入任意次数，但对应样式表只需构造并被文档采用一次，后续注入的组件会自动沿用该样式表的样式

核心问题 #

需要为每个可构造样式表添加唯一标识，避免重复构造和采用。尝试多种方法均失败：

1. 修改现有title属性：componentAStylesheet.title = 'Component A'; 无效果（title是只读属性）
2. 添加自定义属性：componentAStylesheet.componentTitle = 'Component A'; 无效果
3. 修改原型的title：CSSStyleSheet.prototype.title = 'Component A'; 报错（title是仅getter属性）
4. 原型添加自定义属性：CSSStyleSheet.prototype.componentTitle = 'Component A'; 无效果

疑问：是不是CSSStyleSheet对象被冻结/只读，无法添加或修改属性？

解答 #

是的，CSSStyleSheet实例属于浏览器原生宿主对象，默认不可扩展，无法直接添加自定义属性；同时像title这类内置属性大多是只读的，无法修改。

可行解决方案 #

方案1：全局映射对象（你的替代方案优化）

创建全局对象存储组件标识与样式表的映射，每次注入组件前先检查是否已存在对应样式表：

// 全局存储组件样式表的映射
const componentStyleSheets = {};

// 获取或创建组件样式表的工具函数
function getComponentStyleSheet(componentId) {
  if (!componentStyleSheets[componentId]) {
    const sheet = new CSSStyleSheet();
    // 写入组件专属样式
    sheet.replaceSync(`.${componentId} { padding: 1rem; border: 1px solid #eee; }`);
    componentStyleSheets[componentId] = sheet;
    // 首次创建后立即添加到文档的adoptedStyleSheets
    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
  }
  return componentStyleSheets[componentId];
}

// 使用示例：注入Component A时调用
const componentASheet = getComponentStyleSheet('componentA');
// 后续重复调用会直接返回已创建的样式表，不会重复添加到文档

方案2：WeakMap关联标识与样式表

如果担心全局对象的内存占用问题（比如组件样式表可能被销毁时自动释放），可以用WeakMap：

// 用WeakMap存储样式表与标识的关联，样式表销毁时自动回收
const sheetIdentifiers = new WeakMap();

// 创建样式表并绑定唯一标识
const componentASheet = new CSSStyleSheet();
sheetIdentifiers.set(componentASheet, 'componentA');

// 检查文档是否已采用对应标识的样式表
function isSheetAdopted(identifier) {
  return document.adoptedStyleSheets.some(sheet => sheetIdentifiers.get(sheet) === identifier);
}

// 使用示例
if (!isSheetAdopted('componentA')) {
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, componentASheet];
}

方案3：样式表内埋唯一标识

不想额外存储映射的话，可以在样式表中添加独特的注释规则作为标识：

const componentASheet = new CSSStyleSheet();
// 写入带唯一标识的注释和组件样式
componentASheet.replaceSync(`/* component-id: componentA */ 
.componentA { color: #2c3e50; }`);

// 检查文档是否已采用该组件的样式表
function isComponentSheetAdopted(componentId) {
  return document.adoptedStyleSheets.some(sheet => {
    try {
      // 遍历样式表规则查找标识注释
      for (const rule of sheet.cssRules) {
        if (rule.type === CSSRule.COMMENT_RULE && rule.textContent.includes(`component-id: ${componentId}`)) {
          return true;
        }
      }
    } catch (e) {
      // 跨域样式表无法访问cssRules，直接跳过
      return false;
    }
    return false;
  });
}

注意：跨域加载的样式表无法访问cssRules，需要捕获异常处理。

总结 #

无法直接给CSSStyleSheet实例添加自定义属性，但可以通过外部映射存储或样式表内埋标识的方式实现唯一识别，避免重复构造和采用样式表。

内容的提问来源于stack exchange，提问作者Rounin