可建構的樣式表

可重複使用的樣式，完美整合。

Jason Miller

可建構樣式表是在使用 Shadow DOM 時，建立及發布可重複使用樣式的方法。

您一直都可以使用 JavaScript 建立樣式表。不過，過去的程序是使用 document.createElement('style') 建立 <style> 元素，然後存取其 sheet 屬性，取得基礎 CSSStyleSheet 執行個體的參照。這個方法可能會產生重複的 CSS 程式碼和相關的膨脹，而且無論是否有膨脹，附加的動作都會導致未設定樣式的內容閃爍。CSSStyleSheet 介面是 CSS 表示介面集合的根，稱為 CSSOM，提供以程式輔助方式操控樣式表的方法，並解決舊方法相關的問題。

建構式樣式表可定義及準備共用的 CSS 樣式，然後輕鬆將這些樣式套用至多個 Shadow Root 或文件，且不會重複。系統會將共用 CSSStyleSheet 的更新套用至所有採用該樣式的根目錄，且樣式表載入後，採用樣式表的過程快速且同步。

Constructable Stylesheets 建立的關聯非常適合用於各種應用程式。這項功能可用於提供許多元件使用的集中式主題：主題可以是傳遞至元件的 CSSStyleSheet 例項，主題更新會自動傳播至元件。可用於將 CSS 自訂屬性值分配至特定 DOM 子樹狀結構，而不必依賴層疊。甚至可以做為瀏覽器 CSS 剖析器的直接介面，輕鬆預先載入樣式表，不必將樣式表插入 DOM。

建構樣式表

可建構樣式表規格並未導入新的 API 來達成此目的，而是透過叫用 CSSStyleSheet() 建構函式，以命令式方式建立樣式表。產生的 CSSStyleSheet 物件有兩個新方法，可更安全地新增及更新樣式表規則，不會觸發未套用樣式的內容閃爍 (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 推出的第二項新功能是 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.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

正在統整內容

有了 Constructable StyleSheets，網頁開發人員現在可以明確建立 CSS StyleSheets，並將其套用至 DOM 樹狀結構。我們提供新的 Promise 型 API，可從 CSS 來源字串載入樣式表，並使用瀏覽器的內建剖析器和載入語意。最後，我們提供機制，可將樣式表更新套用至 StyleSheet 的所有用法，簡化主題變更和顏色偏好設定等作業。

觀看產品示範

展望未來

Constructable Stylesheets 的初始版本隨附本文所述的 API，但我們正在努力讓這項功能更易於使用。目前有提案要擴充 adoptedStyleSheets FrozenArray，加入專用的樣式表插入和移除方法，這樣就不必複製陣列，也能避免重複參照樣式表。

更多資訊

• Chrome 平台狀態
• 範例
• API
• 說明影片
• 實作意願
• 出貨意願
• Discourse