Konstruierbare Stylesheets

Nahtlose wiederverwendbare Stile.

Mit konstruktionsfähigen Stylesheets können Sie wiederverwendbare Stile mithilfe von ShadowDOM erstellen und verteilen.

Unterstützte Browser

  • 73
  • 79
  • 101
  • 16.4

Quelle

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 Tabellenblatteigenschaft zugegriffen, um einen Verweis auf die zugrunde liegende CSSStyleSheet-Instanz zu erhalten. Diese Methode kann duplizierten CSS-Code und den damit verbundenen aufgeblähten Code erzeugen. Das Anhängen führt zu einem Flash von nicht formatierten Inhalten, unabhängig davon, ob sie aufgebläht sind oder nicht. Die CSSStyleSheet-Schnittstelle ist die Basis einer Sammlung von CSS-Darstellungsschnittstellen, die als CSSOM bezeichnet werden. Sie bietet eine programmatische Möglichkeit zur Bearbeitung von Stylesheets und beseitigt Probleme im Zusammenhang mit der alten Methode.

Diagramm zur Vorbereitung und Anwendung von CSS

Mit konstruierbaren Stylesheets können Sie freigegebene CSS-Stile definieren und vorbereiten und diese Stile dann einfach und ohne Duplizierung auf mehrere Shadow Roots oder das Dokument anwenden. Aktualisierungen eines freigegebenen CSSStyleSheet-Dateien werden auf alle Stammknoten angewendet, in die es übernommen wurde. Das Übernehmen eines Stylesheets erfolgt nach dem Laden des Tabellenblatts schnell und synchron.

Die über konstruierbare Stylesheets eingerichtete Verknüpfungen eignen 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. Aktualisierungen des Designs werden dann automatisch an die Komponenten weitergegeben. Damit lassen sich Werte von benutzerdefinierten CSS-Eigenschaften auf bestimmte DOM-Unterstrukturen verteilen, ohne dass die Kaskade verwendet wird. Er kann sogar als direkte Schnittstelle für den CSS-Parser des Browsers verwendet werden. So können Stylesheets ganz einfach vorab geladen werden, ohne dass sie in das DOM eingefügt werden.

Stylesheet erstellen

Statt eine neue API zu diesem Zweck einzuführen, ist es mit der Spezifikation Konstruktable StyleSheets möglich, Stylesheets zu erstellen, indem der CSSStyleSheet()-Konstruktor aufgerufen wird. Das resultierende CSSStyleSheet-Objekt hat zwei neue Methoden, mit denen sich Stylesheet-Regeln sicherer hinzufügen und aktualisieren lassen, 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-Objekt zurück. In beiden Fällen werden externe Stylesheet-Verweise nicht unterstützt – @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 in Konstruktable StyleSheets eingeführt wurde, ist die Property adoptedStyleSheets, die für Shadow Roots und Documents verfügbar ist. Dadurch können die von einem CSSStyleSheet definierten Stile explizit auf eine bestimmte DOM-Unterstruktur angewendet werden. Dazu setzen wir die Eigenschaft auf ein Array mit einem oder mehreren Stylesheets, 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);

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.

View Demo

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