如何从外部样式表创建合法的Constructable Stylesheet？

由于Chrome 84及之后版本禁用了CSSStyleSheet.replace()/replaceSync()中的@import规则，目前可以通过以下几种可靠方式从外部文件创建Constructable Stylesheet：

1. Fetch 获取样式文本后创建样式表 #

这是兼容性较好的通用方案，核心思路是通过fetch拉取外部CSS文件的文本内容，再传入Constructable Stylesheet的方法中：

async function getConstructableStyleSheet(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Failed to load styles: ${res.statusText}`);
  const cssText = await res.text();
  
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(cssText);
  return sheet;
}

// 用法示例
(async () => {
  try {
    const myComponentStyles = await getConstructableStyleSheet('/styles/component.css');
    // 将样式表关联到Shadow DOM
    myComponent.shadowRoot.adoptedStyleSheets = [myComponentStyles];
  } catch (err) {
    console.error(err);
  }
})();

注意事项：

• 需处理跨域问题：如果CSS文件来自不同域名，服务器需配置CORS响应头允许当前域名访问。
• 样式中的相对路径（如背景图、字体引用）会自动继承fetch响应的URL作为基准路径，无需手动调整。

2. 原生CSS模块导入（推荐） #

现代浏览器支持直接将CSS文件作为模块导入，导入后的结果就是一个现成的CSSStyleSheet实例，无需额外处理：

// 直接导入外部CSS文件
import componentStyles from '/styles/component.css' assert { type: 'css' };

// 直接用于Shadow DOM
myComponent.shadowRoot.adoptedStyleSheets = [componentStyles];

优势：

• 原生规范支持，代码简洁，无需手动处理文本解析和样式表创建。
• 自动处理CSS内部的@import规则（会将导入的样式合并到当前样式表中）。
• 浏览器兼容性：Chrome 91+、Firefox 101+、Safari 15.4+，基本覆盖现代浏览器场景。

3. 动态创建link元素提取样式（不推荐） #

这是一种兼容旧浏览器的hack方案，通过动态插入link标签加载样式，再从已加载的样式表中提取规则文本：

function createStyleSheetFromLink(url) {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.media = 'print'; // 临时设置为print避免影响全局样式
    
    link.onload = () => {
      const originalSheet = link.sheet;
      let cssText = '';
      // 遍历所有CSS规则拼接文本
      for (let i = 0; i < originalSheet.cssRules.length; i++) {
        cssText += originalSheet.cssRules[i].cssText;
      }
      
      const constructableSheet = new CSSStyleSheet();
      constructableSheet.replaceSync(cssText);
      
      document.head.removeChild(link);
      resolve(constructableSheet);
    };
    
    link.onerror = (err) => {
      document.head.removeChild(link);
      reject(err);
    };
    
    document.head.appendChild(link);
  });
}

缺点：

• 样式会短暂暴露到全局（即使设置media:print，仍存在一定风险）。
• 若样式中包含嵌套的@import，需要递归处理加载，实现复杂且容易出错。
• 性能不如前两种方案，仅作为极端兼容场景的备选。

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