可構造樣式表 - 經過javascript來生成css的新方式

可構造樣式表是一種使用Shadow DOM進行建立和分發可重用樣式的新方法。

使用Javascript來建立樣式表是可能的。然而，這個過程在歷史上一直是使用document.createElement('style')來建立<style>元素，而後經過訪問其sheet屬性來得到一個基礎的CSSStyleSheet實例的引用。這種方法能夠生成重複的CSS，其會使得代碼極速膨脹。不管是否存在臃腫，這種附加的動做會致使未樣式化內容的閃爍。CSSStyleSheet接口是CSS集合的根，被稱爲CSSOM，提供一種程序化的方法去控制樣式，還有就是消除相關聯的舊代碼的問題。

可構造的樣式表能夠定義和準備共享的CSS樣式，而後輕鬆的吧這些樣式應用到多個Shadow Roots中或者是文檔中，且無需重複。修改CSSStyleSheet之後，其相關聯的樣式也都會被改變。而且一旦加載了樣式表，其新樣式會很快且同步的加載到頁面中。

由Constructable Stylesheets建立的關聯很適合許多不一樣的應用程序。它能夠被用於在多個不一樣的組件間提供一個集中的主題：主題能夠傳遞到組件的是CSSStyleSheet的實例，當主題改變之後，會自動傳遞給組件。它能夠不依賴樣式表，吧自定義CSS屬性分發給特定的DOM子樹中。它甚至能夠直接用於瀏覽器解析器直接的接口，無需將他們注入到DOM就能夠很輕易的加載樣式表。

構建一個樣式表

與引入一個新API不一樣，可構造樣式表規範使得其能夠經過調用CSSStyleSheet()構造函數來強制建立樣式表。CSSStyleSheet對象的結果有兩個方法，這倆方法會使樣式表更安全的被添加和修改，其操做不會觸發無格式內容的閃光（FOUC）。replace()會返回一個Promise，一旦有外部引用（@import）被加載就會解析。而replaceSync()不容許外部引用。

const sheet = new CSSStyleSheet();// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');// this throws an exception:try {
  sheet.replaceSync('@import url("styles.css")');} catch (err) {
  console.error(err); // imports are not allowed}// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

使用可構造樣式表

由可構造樣式表引入的第二個新功能是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 = [sheet];// Apply the stylesheet to a Shadow Root:const node = document.createElement('div');const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];

注意咱們是覆蓋了adoptedStyleSheets的值，而不是改變了數組的值。這是必要的，由於這個數組是被凍結的。像push()那樣改變值會拋出一個異常，因此咱們必須賦值一個新數組。爲了保留經過adoptedStyleSheets添加的已經存在樣式表。咱們可使用合併數組的方式來建立一個新數組，這個數組包含已經存在的舊樣式，和新添加的新樣式。

const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');// Combine existing sheets with our new one:
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

總結

因爲可構造樣式表，網站開發人員如今有一個建立CSS樣式表而且把他們應用到DOM樹中的一個明確的解決方案。咱們有了一個新的基於Promise的API，用於從使用瀏覽器內置解析器和加載語義的CSS源字符串中加載樣式表。最終，咱們有一種機制，能夠將樣式表更新應用於StyleSheet的全部用法，從而簡化主題更改和顏色首選項等操做。

展望將來

可構建樣式表的初始版本附帶了此處描述的API，但正在開展工做以使事情更容易使用。 有人建議使用專用方法擴展adoptStyleSheets FrozenArray以插入和刪除樣式表，這樣就不須要進行數組克隆並避免可能的重複樣式表引用。

翻譯自：

https://developers.google.com...

轉載自：http://www.lht.ren/article/17/