可建構的樣式表

可無縫重複使用的樣式。

Jason Miller

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

瀏覽器支援

  • Chrome：73。
  • Edge：79。
  • Firefox：101。
  • Safari：16.4。

資料來源

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

圖表顯示 CSS 的準備和應用方式。

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

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

建構樣式表

可建構的樣式表規格並未引入新 API 來達成這項目標，而是透過叫用 CSSStyleSheet() 建構函式，以命令方式建立樣式表。產生的 CSSStyleSheet 物件具有兩種新方法，可讓您在新增及更新樣式表規則時更安全，且不會觸發Flash of Unstyled Content (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..."

使用結構化樣式表

可建構的 StyleSheet 引進的第二項新功能是 adoptedStyleSheets 屬性，可用於 Shadow Root 和 Documents。這可讓我們明確地將 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);

全面整合使用

有了可建構的 StyleSheet，網頁開發人員現在就能明確地建立 CSS StyleSheet，並將其套用至 DOM 樹狀結構。我們推出了新的以承諾為基礎的 API，可從使用瀏覽器內建剖析器和載入語意的 CSS 來源字串載入 StyleSheet。最後，我們提供一種機制，可將樣式表更新套用至所有 StyleSheet 用途，簡化主題變更和顏色偏好設定等操作。

觀看示範影片

展望未來

初始版的 Constructable Stylesheets 已隨這裡所述的 API 一併發布，但我們正在努力讓使用方式更簡單。提案建議使用專用方法來插入及移除樣式表，以擴充 adoptedStyleSheets FrozenArray，這樣就不必複製陣列，也能避免產生重複的樣式表參照。

更多資訊