Fogli di stile costruibili

Stili riutilizzabili senza soluzione di continuità.

Jason Miller

I fogli di stile costruibili sono un modo per creare e distribuire stili riutilizzabili quando utilizzi ShadowDOM.

È sempre stato possibile creare fogli di stile utilizzando JavaScript. Tuttavia, in passato, la procedura consisteva nel creare un elemento <style> utilizzando document.createElement('style'), per poi accedere alla relativa proprietà del foglio per ottenere un riferimento all'istanza CSSStyleSheet sottostante. Questo metodo può produrre codice CSS duplicato e il relativo gonfiore e l'attacco porta a un lampo di contenuti senza stile, indipendentemente dal fatto che siano gonfi o meno. L'interfaccia CSSStyleSheet è la radice di una raccolta di interfacce di rappresentazione CSS dette CSSOM, che offre un modo programmatico per manipolare i fogli di stile, oltre a eliminare i problemi associati al vecchio metodo.

I fogli di stile costruibili consentono di definire e preparare stili CSS condivisi e quindi applicare questi stili a più radici ombre o al documento in modo semplice e senza duplicati. Gli aggiornamenti a un CSSStyleSheet condiviso vengono applicati a tutte le cartelle root in cui è stato adottato e l'adozione di un foglio di stile è rapida e sincrona una volta caricato il foglio.

L'associazione impostata dai fogli di stile costruibili si presta bene a una serie di applicazioni diverse. Può essere utilizzato per fornire un tema centralizzato utilizzato da molti componenti: il tema può essere un'istanza CSSStyleSheet passata ai componenti, con aggiornamenti del tema che vengono propagati automaticamente ai componenti. Può essere utilizzato per distribuire i valori delle proprietà personalizzate CSS in sottoalbero DOM specifici senza fare affidamento sulla cascata. Può anche essere utilizzato come interfaccia diretta con l'analizzatore sintattico CSS del browser, in modo da precaricare facilmente i fogli di stile senza inserirli nel DOM.

Creazione di un foglio di stile

Anziché introdurre una nuova API per ottenere questo risultato, la specifica BuildableStyle Sheet consente di creare fogli di stile in modo imperativo richiamando il costruttore CSSStyleSheet(). L'oggetto CSSStyleSheet risultante ha due nuovi metodi che rendono più sicuro l'aggiunta e l'aggiornamento delle regole del foglio di stile senza attivare Flash of Unstyled Content (FOUC). I metodi replace() e replaceSync() sostituiscono entrambi il foglio di stile con una stringa di CSS e replace() restituisce un valore Promise. In entrambi i casi, i riferimenti esterni ai fogli di stile non sono supportati: qualsiasi regola @import viene ignorata e genererà un avviso.

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

Utilizzo di fogli di stile creati

La seconda nuova funzionalità introdotta da Realizzabile StyleFogli è una proprietà adoptedStyleSheets disponibile in ShadowRoots e in Documenti. Questo consente di applicare esplicitamente gli stili definiti da CSSStyleSheet a un determinato sottoalbero DOM. Per farlo, impostiamo la proprietà su un array di uno o più fogli di stile da applicare a quell'elemento.

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