Stili riutilizzabili senza interruzioni.
I fogli di stile costruibili consentono di creare e distribuire stili riutilizzabili quando si utilizza ShadowDOM.
È sempre stato possibile creare fogli di stile utilizzando JavaScript. Tuttavia, storicamente il processo prevedeva la creazione di 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ò generare un codice CSS duplicato e il relativo gonfiore
e l'atto di attaccare genera un lampo di contenuti senza stile che si tratti
di gonfiore o meno. L'interfaccia CSSStyleSheet
è la base di una raccolta di interfacce di rappresentazione CSS denominate CSSOM, che offrono un modo programmatico per manipolare i fogli di stile, nonché per eliminare i problemi associati al metodo precedente.
I fogli di stile costruibili consentono di definire e preparare gli stili CSS condivisi, quindi di applicare questi stili a più radici ombre o al documento in modo semplice e senza duplicati. Gli aggiornamenti a un file CSSStyleSheet condiviso vengono applicati a tutte le directory principali in cui è stato adottato e l'adozione di un foglio di stile è veloce e sincrono 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 si propagano
automaticamente ai componenti. Può essere utilizzata per distribuire i valori delle proprietà
personalizzate CSS a
sottoalberi DOM specifici senza fare affidamento sulla
cascade. Può essere utilizzato anche come interfaccia diretta con l'analizzatore sintattico CSS del browser, semplificando il precaricamento dei fogli di stile senza inserirli nel DOM.
Creazione di un foglio di stile
Invece di introdurre una nuova API per ottenere questo risultato, la specifica marcabile
Fogli di stile
consente di creare fogli di stile in modo imperativo richiamando
il costruttore CSSStyleSheet()
. L'oggetto CSSStyleSheet risultante offre due
nuovi metodi che rendono più sicuro l'aggiunta e l'aggiornamento delle regole dei fogli 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 una promessa. In entrambi i casi, i riferimenti ai fogli di stile esterni non sono supportati: eventuali regole @import
vengono ignorate e generano 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 dei fogli di stile creati
La seconda nuova funzionalità introdotta da structable Style Sheets è una proprietà
adoptedStyleSheets
disponibile in Shadow
Roots
e Documenti. Questo
consente di applicare in modo esplicito gli stili definiti da un elemento 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);
Riassumendo
Con structable Style Sheets, gli sviluppatori web hanno a disposizione una soluzione esplicita per creare fogli di stile CSS e applicarli alle strutture DOM. Disponiamo di una nuova API basata su Promise per caricare Fogli di stile da una stringa di origine CSS che utilizza l'analizzatore sintattico integrato del browser e il caricamento della semantica. Infine, è disponibile un meccanismo per applicare gli aggiornamenti dei fogli di stile a tutti gli utilizzi di StyleSheet, semplificando aspetti come le modifiche ai temi e alle preferenze di colore.
Prospettive future
La versione iniziale dei fogli di stile costruibili viene fornita con l'API descritta qui, ma stiamo lavorando per rendere tutto più facile da usare. È disponibile una proposta per estendere il FrozenArray di adoptedStyleSheets
con metodi dedicati per inserire e rimuovere i fogli di stile, in modo da evitare la necessità di clonare gli array ed evitare potenziali riferimenti ai fogli di stile duplicati.