Nahtlose wiederverwendbare Stile
Mit konstruierbaren Stylesheets können Sie bei Verwendung des Shadow DOM wiederverwendbare Stile erstellen und verteilen.
Es war schon immer möglich, Stylesheets mit JavaScript zu erstellen. Bisher wurde jedoch ein <style>-Element mit document.createElement('style') erstellt und dann auf seine Tabelleneigenschaft zugegriffen, um einen Verweis auf die zugrunde liegende CSSStyleSheet-Instanz zu erhalten. Bei dieser Methode kann es zu doppelten CSS-Code und der damit verbundenen Aufblähung kommen. Das Anhängen führt zu einem Blitz von nicht formatierten Inhalten, unabhängig davon, ob diese vorhanden sind oder nicht. Die CSSStyleSheet-Schnittstelle ist die Grundlage einer Sammlung von CSS-Darstellungsschnittstellen, die als CSSOM bezeichnet werden. Sie bietet eine programmatische Möglichkeit, Stylesheets zu bearbeiten und die mit der alten Methode verbundenen Probleme zu beseitigen.
Mit konstruktiven Stylesheets können Sie gemeinsam genutzte 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 werden auf alle Root-Zertifikate angewendet, in die es übernommen wurde. Die Einführung eines Stylesheets erfolgt nach dem Laden des Tabellenblatts schnell und synchron.
Die Verknüpfung, die von Konstruktable Stylesheets eingerichtet wird, eignet sich gut für eine Reihe verschiedener Anwendungen. Es kann verwendet werden, um ein zentrales Thema 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 von benutzerdefinierten CSS-Eigenschaften an bestimmte DOM-Unterstrukturen verteilt werden, ohne auf die Kaskade zurückzugreifen. Er 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
Statt eine neue API zu implementieren, ermöglicht die Spezifikation Konstruktable StyleSheets die zwingende Erstellung von Stylesheets durch Aufrufen des CSSStyleSheet()-Konstruktors. Das resultierende CSSStyleSheet-Objekt hat zwei neue Methoden, die das Hinzufügen und Aktualisieren von Stylesheet-Regeln sicherer machen, ohne dass 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. @import-Regeln werden ignoriert und es wird eine Warnung ausgegeben.
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 Composeable StyleSheets eingeführt wurde, ist eine adoptedStyleSheets-Eigenschaft, die für Shadow Roots und Dokumente verfügbar ist. So können die in CSSStyleSheet definierten Stile explizit auf eine bestimmte DOM-Unterstruktur angewendet werden. Dazu setzen wir die Eigenschaft auf ein Array aus 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);
Zusammenfassung
Mit Composeable StyleSheets haben Webentwickler jetzt eine explizite Lösung, um CSS-Style Sheets zu erstellen und auf DOM-Strukturen anzuwenden. Es gibt eine neue Promise-basierte API, mit der StyleSheets aus einer CSS-Quelle geladen, die den integrierten Parser des Browsers und die Ladesemantik verwendet. Schließlich gibt es noch einen Mechanismus, mit dem Aktualisierungen von Stylesheets auf alle Verwendungen eines Style Sheets angewendet werden. Dadurch werden Themen wie Designänderungen und Farbeinstellungen vereinfacht.
Zukunftspläne
Dies ist die erste Version von konstruktiven Stylesheets, die mit der hier beschriebenen API ausgeliefert wurde. Wir arbeiten jedoch daran, die Verwendung zu vereinfachen. Es gibt einen Vorschlag zur Erweiterung von adoptedStyleSheets FrozenArray um spezielle Methoden zum Einfügen und Entfernen von Stylesheets. Dadurch entfällt das Klonen des Arrays und potenzielle doppelte Stylesheet-Verweise werden vermieden.