Document : propriété adoptedStyleSheets
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2023.
La propriété adoptedStyleSheets de l'interface Document est utilisée pour définir un tableau de feuilles de style construites à utiliser par le document.
Note :
Une feuille de style construite est une feuille de style créée de manière programmatique en utilisant le constructeur CSSStyleSheet() (par opposition à une feuille de style créée par un agent utilisateur lors de l'importation d'une feuille de style à partir d'un script, importée en utilisant <style> et @import, ou liée avec <link>).
Les mêmes feuilles de style construites peuvent également être partagées avec une ou plusieurs instances de ShadowRoot en utilisant la propriété ShadowRoot.adoptedStyleSheets.
La modification d'une feuille de style adoptée affectera tous les objets qui l'adoptent.
Les feuilles de style dans la propriété sont évaluées avec les autres feuilles de style du document en utilisant l'algorithme de cascade CSS.
Lorsque la résolution des règles prend en compte l'ordre des feuilles de style, adoptedStyleSheets est supposé être ordonné après celles de Document.styleSheets.
Seules les feuilles de style créées à l'aide du constructeur CSSStyleSheet() dans le contexte du Document actuel peuvent être adoptées.
Valeur
La valeur est un tableau d'instances de CSSStyleSheet qui doivent avoir été créées en utilisant le constructeur CSSStyleSheet() dans le contexte du même Document.
Si le tableau doit être modifié, utilisez des mutations en place comme push(). Les instances de CSSStyleSheet elles-mêmes peuvent également être modifiées, et ces modifications s'appliqueront partout où la feuille de style est adoptée.
Dans une version antérieure de la spécification, le tableau n'était pas modifiable, donc la seule façon d'ajouter de nouvelles feuilles de style était d'assigner un nouveau tableau à adoptedStyleSheets.
Exceptions
NotAllowedErrorDOMException-
L'une des instances de
CSSStyleSheetdans le tableau n'a pas été créée en utilisant le constructeurCSSStyleSheet()ou a été construite dans un document différent de celui en cours, comme par exemple dans un cadre.
Exemples
Adopter une feuille de style
Le code ci-dessous montre une feuille de style en cours de construction, puis CSSStyleSheet.replaceSync() est appelé pour ajouter une règle à la feuille.
La feuille de style est ensuite ajoutée à un tableau et assignée à la propriété adoptedStyleSheets.
// Créez une feuille de style "construite" vide
const sheet = new CSSStyleSheet();
// Appliquez une règle à la feuille
sheet.replaceSync("a { color: red; }");
// Appliquez la feuille de style à un document
document.adoptedStyleSheets.push(sheet);
Nous pouvons ajouter une nouvelle règle à la feuille de style en utilisant CSSStyleSheet.insertRule().
sheet.insertRule("* { background-color: blue; }");
// Le document aura maintenant un fond bleu.
Partager une feuille de style avec un DOM d'ombre
Nous pouvons partager une feuille de style avec un DOM d'ombre (shadow DOM en anglais) de manière similaire.
// Créez un élément dans le document, puis créez un DOM d'ombre :
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
// Adoptez la même feuille de style dans le DOM d'ombre
shadow.adoptedStyleSheets = [sheet];
Spécifications
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |
Compatibilité des navigateurs
Voir aussi
- Feuilles de style constructibles (angl.) (web.dev)
- Utiliser le DOM d'ombre
- Le constructeur
CSSStyleSheet() - La méthode
CSSStyleSheet.replaceSync() - La méthode
CSSStyleSheet.replace() - La méthode
CSSStyleSheet.insertRule() - La méthode
CSSStyleSheet.deleteRule()