如何像导入 JS 模块一样导入 CSS？
短信预约 -IT技能 免费直播动态提醒
然后，你可以将 CSS 样式与可构造样式表(Constructable Stylesheet) 相同的方式作用于 document 和 shadow dom，这比其他加载 CSS 的方式更方便、更高效。
什么是可构造样式表?
在了解 CSS Module Script 之前，我们先来了解下啥是可构造样式表(Constructable Stylesheet)。和表面意思一样，它是为了 CssStyleSheet 可直接构造而设计的，在 document 和 shadow dom 下都可以使用。
使用可构造样式表：
- 通过 new CSSStyleSheet() 构造一个样式表
- 改变可构造样式表
- 通过 adoptedStyleSheets 使用可构造样式表
改变可构造样式表有如下API：
- insertRule(rule，index) 往 cssRules 属性里插入 rule
- deleteRule(rule，index) 从 cssRules 属性里删除 rule
- replace(text) 异步替换 cssRules
- replaceSync(text) 同步的 replace
- // Construct the CSSStyleSheet
- const stylesheet = new CSSStyleSheet();
-
- // Add some CSS
- stylesheet.replaceSync('body { background: #000 !important; }')
- // OR stylesheet.replace, which returns a Promise instead
-
- // Tell the document to adopt your new stylesheet.
- // Note that this also works with Shadow Roots.
- document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
使用 CSS Module Script
引入 CSS Module Script 将作用于 document 和 shadow dom，如下：
- import sheet from './styles.css' assert { type: 'css' };
- document.adoptedStyleSheets = [sheet];
- shadowRoot.adoptedStyleSheets = [sheet];
CSS Module Script 默认导出的是一个 可构造样式表 ，与任何其他 可构造样式表 一样，它使用 adoptedstylesheet 作用于 document 和 shadow dom。
和其他使用 JavaScript 引入 CSS 的方式不同，你无需创建一个
反馈
我要
反馈
