Konstruktierbare Stylesheets

Nahtlose wiederverwendbare Stile.

Jason Miller

Konstruierbare Stylesheets sind eine Möglichkeit, wiederverwendbare Stile zu erstellen und zu verteilen, wenn Shadow DOM verwendet wird.

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

Es war schon immer möglich, Stylesheets mit JavaScript zu erstellen. In der Vergangenheit wurde jedoch ein <style>-Element mit document.createElement('style') erstellt und dann auf die „sheet“-Eigenschaft zugegriffen, um einen Verweis auf die zugrunde liegende CSSStyleSheet-Instanz zu erhalten. Diese Methode kann zu doppeltem CSS-Code und dem damit verbundenen Mehraufwand führen. Das Anhängen führt zu einem Flash of Unstyled Content (FOUC), unabhängig davon, ob es zu Mehraufwand kommt oder nicht. Die Schnittstelle CSSStyleSheet ist die Wurzel einer Sammlung von CSS-Darstellungsschnittstellen, die als CSSOM bezeichnet werden. Sie bietet eine programmatische Möglichkeit, Stylesheets zu bearbeiten, und beseitigt die Probleme, die mit der alten Methode verbunden sind.

Diagramm, das den Ablauf von erstelltem CSS über die Instanziierung bis zur Anwendung zeigt.

Mit Constructable Stylesheets können Sie freigegebene CSS-Stile definieren und vorbereiten und diese dann einfach und ohne Duplizierung auf mehrere Shadow Roots oder das Dokument anwenden. Aktualisierungen eines freigegebenen CSSStyleSheet werden auf alle Roots angewendet, in die es übernommen wurde. Das Übernehmen eines Stylesheets erfolgt schnell und synchron, sobald das Stylesheet geladen wurde.

Die durch Constructable Stylesheets eingerichtete Verknüpfung eignet sich gut für eine Reihe verschiedener Anwendungen. Es kann verwendet werden, um ein zentrales Design bereitzustellen, das von vielen Komponenten verwendet wird: Das Design kann eine CSSStyleSheet-Instanz sein, die an Komponenten übergeben wird, wobei Aktualisierungen des Designs automatisch an die Komponenten weitergegeben werden. Damit können Werte für benutzerdefinierte CSS-Eigenschaften an bestimmte DOM-Unterbäume verteilt werden, ohne dass die Kaskade verwendet werden muss. Es kann sogar als direkte Schnittstelle zum CSS-Parser des Browsers verwendet werden, sodass Stylesheets einfach vorab geladen werden können, ohne sie in das DOM einzufügen.

Stylesheet erstellen

Anstatt eine neue API einzuführen, um dies zu erreichen, ermöglicht die Spezifikation Constructable StyleSheets das Erstellen von Stylesheets durch Aufrufen des CSSStyleSheet()-Konstruktors. Das resultierende CSSStyleSheet-Objekt hat zwei neue Methoden, mit denen Stylesheet-Regeln sicherer hinzugefügt und aktualisiert werden können, ohne dass ein Flash of Unstyled Content (FOUC) ausgelöst wird. Die Methoden replace() und replaceSync() ersetzen das Stylesheet durch einen CSS-String und replace() gibt ein Promise zurück. In beiden Fällen werden externe Stylesheet-Verweise nicht unterstützt. Alle @import-Regeln werden ignoriert und führen zu einer Warnung.

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

Konstruierte Stylesheets verwenden

Die zweite neue Funktion, die durch Constructable StyleSheets eingeführt wird, ist das Attribut adoptedStyleSheets, das für Shadow Roots und Dokumente verfügbar ist. So können wir die von einem CSSStyleSheet definierten Stile explizit auf einen bestimmten DOM-Unterbaum anwenden. Dazu legen wir die Property auf ein Array mit einem oder mehreren Stylesheets fest, die auf dieses Element angewendet werden sollen.

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

Zusammenfassung

Mit Constructable StyleSheets haben Webentwickler jetzt eine explizite Lösung, um CSS-StyleSheets zu erstellen und auf DOM-Bäume anzuwenden. Wir haben eine neue Promise-basierte API zum Laden von Stylesheets aus einem String von CSS-Quellen, die den integrierten Parser und die Ladesemantik des Browsers verwendet. Schließlich gibt es einen Mechanismus, mit dem Stylesheet-Updates auf alle Verwendungen eines StyleSheet angewendet werden können, was Dinge wie Designänderungen und Farbeinstellungen vereinfacht.

Demo ansehen

Zukunftspläne

Die erste Version von Constructable Stylesheets wurde mit der hier beschriebenen API ausgeliefert. Es wird jedoch daran gearbeitet, die Verwendung zu vereinfachen. Es gibt einen Vorschlag, das adoptedStyleSheets FrozenArray um spezielle Methoden zum Einfügen und Entfernen von Stylesheets zu erweitern. Dadurch würde das Klonen von Arrays überflüssig und potenzielle doppelte Stylesheet-Referenzen vermieden.

Weitere Informationen