Konstruierbare Stylesheets

Nahtlose wiederverwendbare Stile

Jason Miller

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

Es war schon immer möglich, Stylesheets mit JavaScript zu erstellen. Bisher wurde dazu ein <style> Element mit document.createElement('style') erstellt und dann über die Eigenschaft `sheet` auf die zugrunde liegende CSSStyleSheet Instanz zugegriffen. Diese Methode kann zu doppeltem CSS-Code und der damit verbundenen Aufblähung führen. Das Anhängen führt unabhängig davon, ob eine Aufblähung vorliegt, zu einem Flash von nicht formatierten Inhalten. Die CSSStyleSheet-Schnittstelle ist die Root einer Sammlung von CSS Darstellungsschnittstellen, die als CSSOM bezeichnet werden. Sie bietet eine programmatische Möglichkeit, Stylesheets zu bearbeiten und die Probleme zu beseitigen, die mit der alten Methode verbunden sind.

Mit erstellbaren Stylesheets können gemeinsame CSS-Stile definiert und vorbereitet werden. Diese Stile lassen sich dann einfach und ohne Duplizierung auf mehrere Shadow Roots oder das Dokument anwenden. Aktualisierungen eines gemeinsamen `CSSStyleSheet` werden auf alle Roots angewendet, in die es übernommen wurde. Das Übernehmen eines Stylesheets ist schnell und synchron, sobald das Stylesheet geladen wurde.

Die von erstellbaren Stylesheets eingerichtete Zuordnung eignet sich gut für eine Reihe verschiedener Anwendungen. Sie 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. Aktualisierungen des Designs werden automatisch an die Komponenten weitergegeben. Sie kann verwendet werden, um Werte für benutzerdefinierte CSS-Properties an bestimmte DOM-Unterstrukturen zu verteilen, ohne auf die Kaskade angewiesen zu sein. Sie 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 für erstellbare Stylesheets , Stylesheets imperativ zu erstellen, indem der Konstruktor CSSStyleSheet() aufgerufen wird. Das resultierende `CSSStyleSheet`-Objekt hat zwei neue Methoden, mit denen Stylesheet-Regeln sicherer hinzugefügt und aktualisiert werden können, ohne dass ein Flash von nicht formatierten Inhalten (Flash of Unstyled Content, FOUC) ausgelöst wird. Die replace() und replaceSync() Methoden ersetzen das Stylesheet durch einen CSS-String. 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..."

Erstellte Stylesheets verwenden

Die zweite neue Funktion, die mit erstellbaren Stylesheets eingeführt wurde, ist die adoptedStyleSheets , die für Shadow Roots und Dokumenteverfügbar ist. Damit können wir die von einem CSSStyleSheet definierten Stile explizit auf eine bestimmte DOM-Unterstruktur anwenden. Dazu legen wir die Eigenschaft 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 erstellbaren Stylesheets haben Webentwickler jetzt eine explizite Lösung zum Erstellen von CSS-Stylesheets und zum Anwenden auf DOM-Strukturen. Wir haben eine neue Promise-basierte API zum Laden von Stylesheets aus einem CSS-Quellstring, die den integrierten Parser und die Ladesemantik des Browsers verwendet. Außerdem gibt es einen Mechanismus zum Anwenden von Stylesheet-Aktualisierungen auf alle Verwendungen eines Stylesheets, wodurch Dinge wie Designänderungen und Farbpräferenzen vereinfacht werden.

Demo ansehen

Zukunftspläne

Die erste Version von erstellbaren Stylesheets wurde mit der hier beschriebenen API ausgeliefert. Es wird jedoch daran gearbeitet, die Verwendung zu vereinfachen. Es gibt einen Vorschlag, das adoptedStyleSheets eingefrorene Array um spezielle Methoden zum Einfügen und Entfernen von Stylesheets zu erweitern. Dadurch wäre das Klonen von Arrays nicht mehr erforderlich und potenzielle doppelte Stylesheet-Verweise würden vermieden.

Weitere Informationen

• Chrome Platform Status
• Beispiel
• API
• Erklärer
• Intent to Implement
• Intent to Ship
• Discourse