可构造样式表(Constructable Stylesheet)

可构造样式表——Constructable Stylesheet

最近在看vite源码的时候发现了一个可构造样式表 很有意思，下面简单介绍下。

webpack实现样式的热更新，需要通过创建style标签还有script标签，但是这种方式会导致head里快速膨胀，并且会导致未样式化内容闪烁，而vite使用了可构造样式表来避免这种问题。

可构造样式表 和表面意思一样 是为了CssStyleSheet可直接构造而设计的，在document和shadow dom下都可以使用。

使用可构造样式表：

1. 通过new CSSStyleSheet()构造一个样式表

2. 改变可构造样式表

3. 通过adoptedStyleSheets使用可构造样式表

改变可构造样式表有如下API：

• insertRule(rule，index) 往cssRules属性里插入rule
• deleteRule(rule，index) 从cssRules属性里删除rule
• replace(text) 异步替换cssRules
• replaceSync(text) 同步的replace

// Construct the CSSStyleSheet
const stylesheet = new