可构造的样式表

样式支持无缝重复使用。

Jason Miller

可构造的样式表是一种 在使用 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，其中包含用于插入和 删除样式表，无需克隆数组，并避免 可能重复的样式表引用。

更多信息