CSSOM

May 7, 2023

CSSOM

plantuml

实际上并没有单独的 StyleSheet 类出现，只有 CSSStyleSheet。
该类表示单个 CSS 样式表，样式表则是包含 CSSRule 的集合。
CSSStyleSheet 是可直接构造的。如非手动通过 js 构造，则其来源如下：

来源	存在于 `document.styleSheets`	获取 owner 元素或规则	owner	获取 CSSStyleSheet
`<style>` 和 `<link>`	是	`.ownerNode`	对应 Element	`.sheet`
其它样式表中的 `@import` 规则	是	`.ownerRule`	CSSImportRule	`.styleSheet`
`<?xml-stylesheet ?>` 处理指令	是	`.ownerNode`	ProcessingInstruction	`.sheet`
HTTP Link Header	是	无	无	无
浏览器默认样式表	否	无	无	无

document.styleSheets（StyleSheetList）只读，可以迭代为 CSSStyleSheet。

interface StyleSheetList {
    readonly length: number;
    item(index: number): CSSStyleSheet | null;
    [index: number]: CSSStyleSheet;
}

Chrome>=73
adoptedStyleSheets 是 DocumentOrShadowRoot 接口上的一个属性

/**
 * 即 Document 或 ShadowRoot
 *
 * @see https://github.com/microsoft/TypeScript/blob/16a36a71f13893bb0d99be45b9b0b3f53fa56a91/src/lib/dom.generated.d.ts#L7421
 */
interface DocumentOrShadowRoot {}

const shadowRoot: ShadowRoot = document.createElement("div").attachShadow({ mode: "open" });
shadowRoot.adoptedStyleSheets; // CSSStyleSheet[]

const doc: Document = document;
doc.adoptedStyleSheets; // CSSStyleSheet[]

document.adoptedStyleSheets（CSSStyleSheet[]）可读写，只包含通过 CSSStyleSheet() 构造函数构造的样式表。
（实际上是一个 Proxy）会按照 CSS 层叠算法与文档的其他样式表一起进行评估。

CSSGroupingRule 对应于 at-rule，嵌套其它 CSSRules。

CSSStyleRule 表示单个 CSS 样式规则，即表示最小的选择器规则。
它持有 StylePropertyMap，而 StylePropertyMap 就是一个 CSS 属性到 CSSStyleValue 数组的键值对。
（StylePropertyMap 是现代化的 CSSStyleDeclaration 替代）

可构造样式表

旧方法往往通过操纵 style 元素来操纵样式表，该方法可能产生重复的 css 代码，导致样式闪烁

const style = document.createElement("style");
style.innerHTML = `body {background:blue}`;

document.head.append(style);
const sheet: CSSStyleSheet | null = style.sheet;
// 注意 CSSStyleSheet 对象始终是对附加到文档的样式表的引用
// 因此，必须保证 style 元素已附加到文档
// style.sheet 才是 CSSStyleSheet
// 否则 style.sheet 为 null
console.log(sheet!);

Array.from(document.styleSheets).some((ss) => ss === sheet); // => true

随着 ShadowDOM 的引入，现在可以手动构造 CSSStyleSheet 对象

通过 adoptedStyleSheets 属性来附加构造的 CSSStyleSheet 对象，
样式表还可以在多个文档中共享引用，达到一处修改，多处同步的效果

const sheet = new CSSStyleSheet();
sheet.replaceSync("a { color: red; }");

document.adoptedStyleSheets.push(sheet);

const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
shadow.adoptedStyleSheets.push(sheet);

参见：https://web.dev/articles/constructable-stylesheets

←Back to home