Konstrualne arkusze stylów

Płynne style wielokrotnego użytku.

Jason Miller

Konstruktywne arkusze stylów umożliwiają tworzenie i rozpowszechnianie stylów wielokrotnego użytku za pomocą Shadow DOM.

W przypadku JavaScriptu arkusze stylów zawsze można było tworzyć. W przeszłości proces ten polegał na utworzeniu elementu <style> za pomocą właściwości document.createElement('style'), a następnie uzyskania dostępu do właściwości „sheet”, aby uzyskać odniesienie do bazowego wystąpienia CSSStyleSheet. Ta metoda może spowodować zduplikowanie kodu CSS i powiązanego z nim zdublowanie, a dołączenie prowadzi do rozmycia treści bez stylu niezależnie od tego, czy jest jej zwielokrotnienie. Interfejs CSSStyleSheet jest podstawą zbioru interfejsów do reprezentacji CSS zwanych CSSOM, które umożliwiają zautomatyzowane manipulowanie arkuszami stylów oraz eliminowanie problemów związanych ze starą metodą.

Konstruktalne arkusze stylów pozwalają łatwo definiować i przygotowywać wspólne style CSS, a następnie stosować je do wielu katalogów źródłowych lub dokumentu. Zmiany udostępnianego arkusza CSSStyleSheet są stosowane do wszystkich elementów głównych, do których został on zastosowany, a wdrażanie arkusza stylów przebiega szybko i synchronicznie po wczytaniu arkusza.

Powiązanie utworzone przez Constructable Stylesheets dobrze sprawdza się w wielu różnych zastosowaniach. Pozwala stworzyć scentralizowany motyw używany przez wiele komponentów: motywem może być instancja CSSStyleSheet przekazywana do komponentów, a aktualizacje motywu są przenoszone do komponentów automatycznie. Można go używać do rozdzielania wartości właściwości niestandardowej CSS do określonych poddrzew DOM bez korzystania z kaskady. Może być nawet używany jako bezpośredni interfejs do parsera CSS w przeglądarce, co ułatwia wstępne wczytywanie arkuszy stylów bez wprowadzania ich w interfejsie DOM.

Tworzenie arkusza stylów

Zamiast wprowadzać w tym celu nowy interfejs API, specyfikacja Constructable StyleSheets umożliwia imperatywne tworzenie arkuszy stylów przez wywołanie konstruktora CSSStyleSheet(). Powstały obiekt CSSStyleSheet ma 2 nowe metody, które zwiększają bezpieczeństwo dodawania i aktualizowania reguł arkusza stylów bez wywoływania funkcji Flash of Unstyled Content (FOUC). Metody replace() i replaceSync() zastępują arkusz stylów ciągiem CSS, a replace() zwraca obietnicę. W obu przypadkach odwołania do zewnętrznych arkuszy stylów nie są obsługiwane – wszystkie reguły @import są ignorowane i generują ostrzeżenie.

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..."

Korzystanie z utworzonych arkuszy stylów

Drugą nową funkcją wprowadzoną w Constructable StyleSheets jest właściwość adoptedStyleSheets dostępna w sekcjach ShadowRoots i Dokumenty. Umożliwia to jawne zastosowanie stylów zdefiniowanych przez zasadę CSSStyleSheet do danego poddrzewa DOM. Aby to zrobić, ustawiamy właściwość na tablicę z co najmniej jednym arkuszem stylów, którą stosujemy do tego elementu.

// 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);