使用浏览器原生ES Modules时，如何模拟CSS Modules效果？

我正在搭建一个依赖浏览器原生ES6模块支持的网站（无需构建工具），但发现浏览器不像webpack那样能识别import "/myapp/style.css";这类导入CSS的语句。从依赖维护角度，我希望能把CSS文件和对应的JavaScript组件关联起来，目前考虑过几种思路但都有缺陷：

• 用JSS这类工具把CSS写进JS：会失去IDE的CSS语法支持，而且无构建流程下运行速度可能更慢。
• 单独存放CSS，用CSS的import镜像JS依赖：需要重复声明依赖，且浏览器不会像处理模块那样对CSS导入去重。
• 约定Foo.js自动导入Foo.css，编写服务端逻辑遍历依赖树生成link标签：可行但需要自定义基础设施，相当于在运行时做构建工具的工作。

有没有更好的实现方法？

1. 利用原生构造样式表（Constructable Stylesheets）+ Shadow DOM #

这是浏览器原生支持的方案，既能保留独立CSS文件的语法支持，又能实现CSS与JS组件的关联，还能做样式隔离和缓存去重。

核心思路是通过fetch加载CSS文件，将其转换为CSSStyleSheet实例，缓存后关联到组件的Shadow DOM中：

// 缓存已加载的样式表，避免重复请求和重复添加
const styleSheetCache = new Map();

async function loadStyleSheet(url) {
  if (styleSheetCache.has(url)) {
    return styleSheetCache.get(url);
  }
  const response = await fetch(url);
  const cssText = await response.text();
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(cssText);
  styleSheetCache.set(url, sheet);
  return sheet;
}

// 自定义组件示例
class FooComponent extends HTMLElement {
  async connectedCallback() {
    // 加载对应CSS
    const sheet = await loadStyleSheet('/myapp/Foo.css');
    // 创建Shadow DOM实现样式隔离
    this.attachShadow({ mode: 'open' });
    // 将样式表关联到Shadow DOM
    this.shadowRoot.adoptedStyleSheets = [sheet];
    // 渲染组件内容
    this.shadowRoot.innerHTML = `<div class="foo-container">这是Foo组件</div>`;
  }
}
customElements.define('foo-component', FooComponent);

优点：

• CSS保持独立文件，IDE能正常提供语法高亮和提示。
• 通过缓存避免重复加载CSS，性能更优。
• Shadow DOM天然隔离组件样式，避免全局污染。
• 完全基于浏览器原生API，无需任何构建工具。

2. 动态创建link标签+缓存 #

如果不需要样式隔离，这个方案更简单直接：在组件JS中动态创建link标签并添加到页面头部，用Set缓存已加载的CSS URL避免重复添加。

// 记录已加载的CSS文件，防止重复引入
const loadedCSS = new Set();

function loadCSS(url) {
  if (loadedCSS.has(url)) return;
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
  loadedCSS.add(url);
}

// 在Foo.js中调用，关联对应的CSS
loadCSS('/myapp/Foo.css');

// 组件逻辑代码
function renderFoo() {
  document.body.innerHTML += `<div class="foo">Foo组件内容</div>`;
}

优点：

• 实现成本极低，代码简洁。
• 同样保留独立CSS文件的开发体验。
• 缓存机制解决了重复加载的问题。

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