Styles réutilisables et fluides
Les feuilles de style constructibles permettent de créer et de distribuer des styles réutilisables lorsque vous utilisez Shadow DOM.
Il a toujours été possible de créer des feuilles de style à l'aide de JavaScript. Cependant, le processus a toujours consisté à créer un élément <style> à l'aide de document.createElement('style'), puis à accéder à sa propriété de feuille pour obtenir une référence à l'instance CSSStyleSheet sous-jacente. Cette méthode peut générer du code CSS en double et la surcharge associée. L'opération d'association entraîne l'apparition d'un flash de contenu sans style, qu'il s'agisse ou non d'une surcharge. L'interface CSSStyleSheet est à la racine d'une collection d'interfaces de représentation CSS appelée CSSOM, qui offre un moyen programmatique de manipuler des feuilles de style et d'éliminer les problèmes associés à l'ancienne méthode.
Les feuilles de style constructibles permettent de définir et de préparer des styles CSS partagés, puis d'appliquer ces styles à plusieurs racines fantômes ou au document, facilement et sans duplication. Les mises à jour d'une feuille de style CSSStyleSheet partagée sont appliquées à toutes les racines dans lesquelles elle a été adoptée, et l'adoption d'une feuille de style est rapide et synchrone une fois la feuille chargée.
L'association créée par les feuilles de style à construire se prête bien à de nombreuses applications différentes. Il peut être utilisé pour fournir un thème centralisé utilisé par de nombreux composants: il peut s'agir d'une instance CSSStyleSheet transmise aux composants, les mises à jour du thème se propagent automatiquement aux composants. Il peut être utilisé pour distribuer des valeurs de propriété personnalisée CSS à des sous-arborescences DOM spécifiques sans utiliser la cascade. Il peut même être utilisé comme interface directe vers l'analyseur CSS du navigateur, ce qui facilite le préchargement des feuilles de style sans les injecter dans le DOM.
Construire une feuille de style
Plutôt que d'introduire une nouvelle API pour effectuer cette opération, la spécification Constructable StyleSheets permet de créer des feuilles de style de manière impérative en appelant le constructeur CSSStyleSheet(). L'objet CSSStyleSheet obtenu comporte deux nouvelles méthodes qui facilitent l'ajout et la mise à jour de règles de feuille de style sans déclencher de Flash of Unstyled Content (FOUC).
Les méthodes replace() et replaceSync() remplacent la feuille de style par une chaîne CSS, et replace() renvoie une promesse. Dans les deux cas, les références externes de feuille de style ne sont pas acceptées. Toutes les règles @import sont ignorées et génèrent un avertissement.
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..."
Utiliser des feuilles de style créées
La deuxième nouvelle fonctionnalité introduite par Constructable StyleSheets est une propriété adoptedStyleSheets disponible dans Shadow Roots et Documents. Cela nous permet d'appliquer explicitement les styles définis par un CSSStyleSheet à une sous-arborescence DOM donnée. Pour ce faire, nous définissons la propriété sur un tableau contenant une ou plusieurs feuilles de style à appliquer à cet élément.
// 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