可构造样式表 - 通过javascript来生成css的新方式
作者:小辞 标签:Javascript

​可构造样式表是一种使用Shadow DOM进行创建和分发可重用样式的新方法。

使用Javascript来创建样式表是可能的。然而,这个过程在历史上一直是使用document.createElement('style')来创建<style>元素,然后通过访问其sheet属性来获得一个基础的CSSStyleSheet实例的引用。这种方法可以生成重复的CSS,其会使得代码极速膨胀。无论是否存在臃肿,这种附加的动作会导致未样式化内容的闪烁。CSSStyleSheet接口是CSS集合的根,被称为CSSOM,提供一种程序化的方法去控制样式,还有就是消除相关联的旧代码的问题。

 

可构造的样式表可以定义和准备共享的CSS样式,然后轻松的吧这些样式应用到多个Shadow Roots中或者是文档中,且无需重复。修改CSSStyleSheet以后,其相关联的样式也都会被改变。并且一旦加载了样式表,其新样式会很快且同步的加载到页面中。

由Constructable Stylesheets创建的关联很适合许多不同的应用程序。它可以被用于在多个不同的组件间提供一个集中的主题:主题可以传递到组件的是CSSStyleSheet的实例,当主题改变以后,会自动传递给组件。它可以不依赖样式表,吧自定义CSS属性分发给特定的DOM子树中。它甚至可以直接用于浏览器解析器直接的接口,无需将他们注入到DOM就可以很轻易的加载样式表。

 

构建一个样式表

与引入一个新API不同,可构造样式表规范使得其可以通过调用CSSStyleSheet()构造函数来强制创建样式表。CSSStyleSheet对象的结果有两个方法,这俩方法会使样式表更安全的被添加和修改,其操作不会触发无格式内容的闪光(FOUC)。replace()会返回一个Promise,一旦有外部引用(@import)被加载就会解析。而replaceSync()不允许外部引用。

const sheet = new CSSStyleSheet();// replace all styles synchronously:
sheet
.replaceSync('a { color: red; }');// this throws an exception:try {
  sheet
.replaceSync('@import url("styles.css")');} catch (err) {
  console
.error(err); // imports are not allowed}// replace all styles, allowing external resources:
sheet
.replace('@import url("styles.css")')
 
.then(sheet => {
    console
.log('Styles loaded successfully');
 
})
 
.catch(err => {
    console
.error('Failed to load:', err);
 
});

 

使用可构造样式表

由可构造样式表引入的第二个新功能是Shadow Roots和Documents中的adoptedStyleSheets属性。这允许我们显式的将由CSSStyleSheet定义的属性应用到给定的DOM子树中。为此,我们将属性设置为一个具有一个或者多个样式表的数组,以用于该元素。

// Create our shared stylesheet:const sheet = new CSSStyleSheet();
sheet
.replaceSync('a { color: red; }');// Apply the stylesheet to a document:
document
.adoptedStyleSheets = [sheet];// Apply the stylesheet to a Shadow Root:const node = document.createElement('div');const shadow = node.attachShadow({ mode: 'open' });
shadow
.adoptedStyleSheets = [sheet];

注意我们是覆盖了adoptedStyleSheets的值,而不是改变了数组的值。这是必要的,因为这个数组是被冻结的。像push()那样改变值会抛出一个异常,所以我们必须赋值一个新数组。为了保留通过adoptedStyleSheets添加的已经存在样式表。我们可以使用合并数组的方式来创建一个新数组,这个数组包含已经存在的旧样式,和新添加的新样式。

const sheet = new CSSStyleSheet();
sheet
.replaceSync('a { color: red; }');// Combine existing sheets with our new one:
document
.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

 

总结

由于可构造样式表,网站开发人员现在有一个创建CSS样式表并且把他们应用到DOM树中的一个明确的解决方案。我们有了一个新的基于Promise的API,用于从使用浏览器内置解析器和加载语义的CSS源字符串中加载样式表。最终,我们有一种机制,可以将样式表更新应用于StyleSheet的所有用法,从而简化主题更改和颜色首选项等操作。

 

展望未来

可构建样式表的初始版本附带了此处描述的API,但正在开展工作以使事情更容易使用。 有人建议使用专用方法扩展adoptStyleSheets FrozenArray以插入和删除样式表,这样就不需要进行数组克隆并避免可能的重复样式表引用。

 

翻译自:

https://developers.google.com/web/updates/2019/02/constructable-stylesheets