CSS 模块（原生模块）

它们实际上被称为“CSS 模块脚本”，并且是浏览器的原生功能，与 流行的开源项目 不同，该项目通过在 HTML 和 CSS 中创建唯一的类名标识符来实现作用域样式。

原生 CSS 模块是 ES 模块的一部分（类似于我们最近介绍的 JSON 模块）。

// Regular ES Modules
import React from "https://cdn.skypack.dev/[email protected]";

// Newfangled JSON Modules
import configData from './config-data.json' assert { type: 'json' };

// Newfangled CSS Modules
import styleSheet from "./styles.css" assert { type: "css" };

我第一次从 Justin 的推文中看到这一点

无需构建的 JS 和 CSS 模块！

随着即将推出的 CSS 模块，我们将很快拥有

✅ JS 模块
✅ 裸指定符
✅ CSS 模块
✅ 组件
✅ 作用域样式

所有这些都内置于平台，无需构建，可以使用 `python -m SimpleHTTPServer 8000` 😎 pic.twitter.com/Q9zw1Pn1pF

— Justin Fagnani (@justinfagnani) 2021 年 6 月 11 日

目前这仅限于 Chrome。相关链接

• 实施意图：CSS 模块 V1
• Chrome 平台状态：CSS 模块脚本
• GitHub/WhatWG：引入 CSS 模块脚本

在我写这篇文章时，它只在启用了实验性 Web 平台功能的 Chrome Canary 中有效。 如果你问，“我什么时候可以在各种用户使用各种浏览器的情况下，在生产项目中使用它？”，我只能说：我不知道。 可能要几年。 也可能永远不会。 但它仍然很有趣，值得一试。 也许支持会快速发展。 也许你会参与 Electron 项目或其他可以依赖特定浏览器功能的项目。

这看起来像是对 可构造样式表 的扩展，可构造样式表也是 Chrome 独有的，因此“落后”的浏览器需要先从那里开始。

我在这里尝试了 Justin 的想法

如果我记录从 CSS 模块导入返回的内容，它是一个 CSSStyleSheet

如果你要实际使用样式... 那就是你的事了。 Justin 的想法基本上将样式作为一个单行代码应用，因为碰巧的是 lit-html 支持 CSSStyleSheet（这些文档没有说明这一点，但我认为他们会在某个时候说明这一点）。 对于原生 Web 组件，差别不大：你导入它，获取 CSSStyleSheet，然后像这样将其应用于 Web 组件

this.shadowRoot.adoptedStyleSheets = [myCSSStyleSheet];

我认为这一切的重点是

• 我们需要一种在 JavaScript 中导入样式表的方法，这是我所知道的第一个真正清晰的尝试，
• 现在，我们可以对 CSS 进行编程访问，如果我们想在使用它之前对其进行操作，并且
• 它看起来特别适合 Web 组件使用，但它很通用。 一旦你拥有样式表，你可以用它做任何你想做的事情。