Nahtlose wiederverwendbare Stile.
Mit konstruktionsfähigen Stylesheets können Sie wiederverwendbare Stile mithilfe von ShadowDOM erstellen und verteilen.
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.
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.
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