Konstruierbare Stylesheets

Nahtlose wiederverwendbare Stile

Jason Miller

Konstruierbare Stylesheets sind Möglichkeit, wiederverwendbare Stile zu erstellen und zu verteilen, wenn Sie Schatten verwenden. DOM

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 die Blatteigenschaft zugegriffen, um eine Referenz auf die zugrunde liegende CSSStyleSheet-Instanz zu erhalten. Bei dieser Methode kann es zu doppelten CSS-Codes kommen, Der Vorgang des Anhängens führt zu einer Reihe unformatierter Inhalte, unabhängig davon, ob die Seiten ob es aufgebläht ist oder nicht. Die CSSStyleSheet-Schnittstelle ist der Stamm einer CSS-Sammlung Darstellungsschnittstellen, die als CSSOM Sie bieten eine programmatische Möglichkeit zur Bearbeitung von Stylesheets sowie das Entfernen von im Zusammenhang mit der alten Methode.

Konstruierbare Stylesheets ermöglichen es, gemeinsam genutzte CSS zu definieren und vorzubereiten und wenden Sie diese Stile dann auf mehrere Shadow Roots oder das Dokument leicht und ohne Duplizierung. Aktualisierungen eines freigegebenen CSSStyleSheet werden angewendet auf alle Wurzeln, in die es übernommen wurde, und die Einführung eines Stylesheet nach dem Laden des Tabellenblatts schnell und synchron ist.

Die durch konstruierbare Stylesheets eingerichtete Verknüpfung eignet sich gut für eine unterschiedlichen Bewerbungen. Sie können damit ein zentrales Thema von vielen Komponenten verwendet: Das Design kann eine CSSStyleSheet-Instanz sein, die an Komponenten werden aktualisiert, wobei die Aktualisierungen des Designs auf die Komponenten übertragen werden. automatisch. Mit dieser Methode können Werte von benutzerdefinierten CSS-Properties auf 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. Stylesheets vorab laden, ohne sie in das DOM einzufügen.

Stylesheet erstellen

Anstatt eine neue API einzuführen, um dies zu erreichen, bietet das Konstruktable StyleSheets können Sie Stylesheets zwangsweise erstellen, indem Sie CSSStyleSheet()-Konstruktor. Das resultierende CSSStyleSheet-Objekt hat zwei neue Methoden, die das Hinzufügen und Aktualisieren von Stylesheet-Regeln ohne Auslösung von Flash von Unstyled Inhalt (FOUC). Die replace() und replaceSync() ersetzen die Methoden replace() das Stylesheet durch einen CSS-String gibt ein Promise zurück. In beiden Fällen sind externe Stylesheet-Verweise nicht unterstützt: Alle @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 benutzerdefinierten Stylesheets eingeführt wurde, ist das Attribut adoptedStyleSheets, das für Schattenwurzeln und Dokumente verfügbar ist. Dieses können Sie die durch CSSStyleSheet definierten Stile explizit auf ein bestimmtes DOM anwenden. Unterstruktur. Hierzu setzen wir die -Eigenschaft auf ein Array aus einem oder mehreren Stylesheets auf auf dieses Element anwenden.

// 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 können Webentwickler jetzt eine konkrete Lösung für CSS-Style-Tabellen erstellen und auf DOM-Strukturen anwenden. Wir haben eine neue, versprechenbasierte API zum Laden von Stylesheets aus einem CSS-Quellstring entwickelt, die den integrierten Parser und die Ladesemantik des Browsers verwendet. Schließlich haben wir noch eine Mechanismus zur Anwendung von Stylesheet-Aktualisierungen auf alle Verwendungen eines Style-Sheet, um Dinge wie Designänderungen und Farbeinstellungen zu vereinfachen.

Demo ansehen

Zukunftspläne

Die erste Version der konstruktiven Stylesheets, die mit der API ausgeliefert wird die hier beschriebene Funktion. Wir arbeiten jedoch daran, sie nutzungsfreundlicher zu gestalten. Es gibt ein Angebot, um das Angebot das adoptedStyleSheets FrozenArray mit speziellen Methoden zum Einfügen und Entfernen von Stylesheets, wodurch das Klonen von Arrays überflüssig mögliche doppelte Stylesheet-Referenzen.

Weitere Informationen

• Status der Chrome-Plattform
• Beispiel
• API
• Erklärung
• Implementierungsabsicht
• Versandabsicht
• Diskurs