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);
Putting it all together
With Constructable StyleSheets, web developers now have an explicit solution for
creating CSS StyleSheets and applying them to DOM trees. We have a new
Promise-based API for loading StyleSheets from a string of CSS source that uses
the browser's built-in parser and loading semantics. Finally, we have a
mechanism for applying stylesheet updates to all usages of a StyleSheet,
simplifying things like theme changes and color preferences.
Looking ahead
The initial version of Constructable Stylesheets shipped with the API
described here, but there's work underway to make things easier to use. There's
a proposal to extend
the adoptedStyleSheets
FrozenArray with dedicated methods for inserting and
removing stylesheets, which would obviate the need for array cloning and avoid
potential duplicate stylesheet references.
More information