跨浏览器兼容：Web Component中替代import assert导入CSS的方案咨询

我在基于Chrome的浏览器中，通过以下方式给Web Component导入样式表：

组件内部导入自身样式：

import sheet from '/Vanilla/ScrollGrid.css' assert {type: 'css'};

调用页面传递用户样式时的处理：

if (userStyles != undefined && userStyles != null) {
    if (typeof userStyles == "string") {
        let userStylesURL;
        try 
        {
            userStylesURL = new URL(userStyles, baseURL);
        } catch (err) {
            console.log(err.message);
        }
        if (userStylesURL != undefined) {
            userSheet = (userStylesURL.protocol == "http:" || "htps:")
        }
    }
}
if (userSheet)
{
    myCSSMod = await import(userStyles, { assert: {type: "css"}});
}

var x = new sg.ScrollGrid("myTable", dimCols, options, myCSSMod.default);

组件内应用样式的逻辑：

if (userStyles != undefined && userStyles != null) {
    if (userStyles.type == "text/css") {
        this.#shadowRoot.adoptedStyleSheets.push(userStyles);
    }
}

this.#shadowRoot.adoptedStyleSheets.push(sheet);

我也试过用动态创建<link>标签替代模块导入：

let link = document.createElement('link');
link.href = "./toggle.css";
link.rel = "stylesheet";
link.type = "text/css";
this.shadowRoot.appendChild(link);

现在需要支持Safari和Firefox，要替换掉import方法。尝试过用<link>的.sheet属性，但遇到「必须是通过CSSStylesheet()构造的样式表」的限制。我希望组件继续支持传入CSSStylesheet类型的可选样式参数（而非仅字符串URL），目前想到三个方案：

1. 让调用页面通过fetch或其他方式加载样式为字符串，再用CSSStylesheet()构造函数创建实例后传给组件。这个方案的优势是既支持硬编码的短样式字符串，也能处理大型外部CSS文件。
2. 将参数改为URL字符串，在组件内运行时创建<link>元素。
3. 使用指向外部URL的「disabled」状态<style>标签，然后获取其innerHTML作为字符串。但不确定禁用的style标签是否会填充innerHTML，也不确定在style标签上使用URL是否已被弃用。

有没有其他方案？欢迎给出建议和偏好。

方案1（推荐保留并优化）：调用方预处理为CSSStyleSheet #

这是最贴合你需求的方案，完全保留组件接受CSSStyleSheet实例的能力，同时兼容所有现代浏览器。

优化实现：

给调用方提供辅助工具函数，简化样式加载与转换流程，降低调用复杂度：

// 辅助函数：从URL或字符串创建CSSStyleSheet
async function createStyleSheet(source, baseURL) {
  let cssText;
  if (typeof source === 'string') {
    try {
      // 优先尝试作为URL加载
      const url = new URL(source, baseURL);
      const res = await fetch(url);
      cssText = await res.text();
    } catch (err) {
      // 加载失败则视为内联样式字符串
      cssText = source;
    }
  } else if (source instanceof CSSStyleSheet) {
    return source;
  } else {
    throw new Error('Invalid style source');
  }

  const sheet = new CSSStyleSheet();
  await sheet.replace(cssText);
  return sheet;
}

// 调用方使用示例
const userSheet = await createStyleSheet(userStyles, window.location.href);
const x = new sg.ScrollGrid("myTable", dimCols, options, userSheet);

组件内部无需修改现有逻辑，直接接收CSSStyleSheet实例并添加到adoptedStyleSheets即可。

优点：

• 完全符合你要求的「支持CSSStyleSheet类型参数」需求
• 兼容Safari 14.1+、Firefox 75+等所有支持CSSStyleSheet构造函数的现代浏览器
• 同时支持内联样式字符串和外部URL两种输入
• 样式加载过程可控，能灵活处理错误情况

方案2：组件内兼容处理多类型参数 #

如果不想让调用方做额外处理，可以在组件内部封装兼容逻辑，同时支持CSSStyleSheet实例或URL字符串输入：

async function applyUserStyles(shadowRoot, userStyles, baseURL) {
  if (!userStyles) return;

  // 直接处理已有的CSSStyleSheet实例
  if (userStyles instanceof CSSStyleSheet) {
    shadowRoot.adoptedStyleSheets.push(userStyles);
    return;
  }

  // 处理URL字符串
  if (typeof userStyles === 'string') {
    try {
      const url = new URL(userStyles, baseURL);
      const res = await fetch(url);
      const cssText = await res.text();
      const sheet = new CSSStyleSheet();
      await sheet.replace(cssText);
      shadowRoot.adoptedStyleSheets.push(sheet);
    } catch (err) {
      console.error('Failed to load user styles:', err);
    }
  }
}

// 组件内调用
await applyUserStyles(this.#shadowRoot, userStyles, window.location.href);
this.#shadowRoot.adoptedStyleSheets.push(sheet);

优点：

• 调用方可以灵活传入URL或预创建的CSSStyleSheet实例
• 组件内部封装兼容逻辑，调用方无需关心底层实现
• 避免了<link>标签样式表无法加入adoptedStyleSheets的限制

方案3：动态创建<link>标签（兼容旧浏览器） #

如果需要支持更老的浏览器（如Safari <14.1），可以用动态<link>标签实现，但无法将样式表加入adoptedStyleSheets，不过样式仍会作用于Shadow DOM：

function applyUserStyles(shadowRoot, userStyles) {
  if (!userStyles) return;

  if (userStyles instanceof CSSStyleSheet) {
    shadowRoot.adoptedStyleSheets.push(userStyles);
    return;
  }

  if (typeof userStyles === 'string') {
    const link = document.createElement('link');
    link.href = userStyles;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.onload = () => console.log('User styles loaded');
    link.onerror = (err) => console.error('Failed to load user styles:', err);
    shadowRoot.appendChild(link);
  }
}

// 组件内调用
applyUserStyles(this.#shadowRoot, userStyles);
this.#shadowRoot.adoptedStyleSheets.push(sheet);

注意：

这种方式适合不需要操作样式表实例的场景，无法通过adoptedStyleSheets管理样式优先级。

不推荐方案：禁用状态的<style>标签 #

你提到的第三种方案不建议使用，原因如下：

• <style>标签的url()属性并非标准特性，浏览器支持性极差且已被废弃
• 禁用的<style>标签不会自动加载外部URL内容，innerHTML也不会被填充

额外方案：使用Constructable Stylesheets polyfill #

如果需要支持非常老旧的浏览器（如Firefox <75、Safari <14.1），可以引入Constructable Stylesheets的polyfill，这样你可以继续使用adoptedStyleSheets API，无需大幅修改现有逻辑。

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