可构造的样式表

样式支持无缝重复使用。

可构造的样式表是一种 在使用 Shadow 时创建和分发可重复使用的样式的方法 DOM

浏览器支持

  • Chrome:73。 <ph type="x-smartling-placeholder">
  • Edge:79。
  • Firefox:101.
  • Safari:16.4。 <ph type="x-smartling-placeholder">

来源

一直以来,您都可以使用 JavaScript 创建样式表。不过, 一直以来都是使用<style> document.createElement('style'),然后访问其工作表属性以获取 对底层基础设施的引用 CSSStyleSheet 实例。这种方法可能会产生重复的 CSS 代码及其相应的膨胀, 而附加行为会导致一闪而过无样式的内容,无论是否存在 是否膨胀。CSSStyleSheet 接口是 CSS 集合的根 称为 CSSOM、 提供了一种编程方式来操作样式表,并且消除了 与旧方法相关的问题。

展示 CSS 准备和应用的示意图。

可构造的样式表让您可以定义和准备共享 CSS 然后将这些样式应用到多个阴影根或文档 且无需复制。对共享 CSSStyleSheet 的更新将应用于 所有纳入它的根基,采用 样式表 加载完成后,表格将快速同步。

可构建式样式表设置的关联非常适合许多不同的应用。它可用于提供许多组件使用的集中式主题:主题可以是传递给组件的 CSSStyleSheet 实例,主题的更新会自动传播到组件。它可用于将 CSS 自定义属性值分发到特定 DOM 子树,而无需依赖于级联。它甚至可以 用作浏览器 CSS 解析器的直接接口, 预加载样式表,而不将其注入 DOM。

构建样式表

可构造样式表规范通过调用 CSSStyleSheet() 构造函数,使您能够以命令方式创建样式表,而无需引入新的 API 来实现此目的。生成的 CSSStyleSheet 对象有两个 新方法使添加和更新样式表规则更加安全, 触发未设置样式的 Flash 内容 (FOUC) 的观看次数。 通过 replace()replaceSync() 方法均使用 CSS 字符串替换样式表,并且 replace() 返回一个 Promise。在这两种情况下,外部样式表引用均不 支持 - 所有 @import 规则都会被忽略并生成警告。

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

使用构造的样式表

Constructable StyleSheets 引入的第二项新功能是 adoptedStyleSheets 属性,文档。这个 可让我们显式地将 CSSStyleSheet 定义的样式应用于给定 DOM 子树。为此,我们将 属性设为由一个或多个样式表组成的数组, 会应用到该元素

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);
<ph type="x-smartling-placeholder">

综合应用

借助 Constructable StyleSheets,网络开发者现在可以针对 创建 CSS 样式表并将其应用到 DOM 树。我们推出了 基于 Promise 的 API,用于从使用 浏览器的内置解析器和加载语义。最后,我们有 将样式表更新应用到样式表的所有用例的机制, 并简化了主题更改和颜色偏好设置等操作。

查看演示

展望未来

可构建样式的初始版本随本文所述的 API 一起发布,但我们正在努力使其更易于使用。还有 提案以延长 adoptedStyleSheets FrozenArray,其中包含用于插入和 删除样式表,无需克隆数组,并避免 可能重复的样式表引用。

更多信息