样式表(Constructable Stylesheet)"/>
可构造样式表(Constructable Stylesheet)
可构造样式表——Constructable Stylesheet
最近在看vite源码的时候发现了一个可构造样式表 很有意思,下面简单介绍下。
webpack实现样式的热更新,需要通过创建style标签还有script标签,但是这种方式会导致head里快速膨胀,并且会导致未样式化内容闪烁,而vite使用了可构造样式表来避免这种问题。
可构造样式表 和表面意思一样 是为了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
更多推荐
可构造样式表(Constructable Stylesheet)
发布评论