Verbessern Sie HTML mit benutzerdefinierten Tags und Shadow DOM

In meinem vorherigen Beitrag habe ich die Grundlagen der Erstellung benutzerdefinierter Etiketten erklärt. Tatsächlich beseitigen benutzerdefinierte Tags einen Teil der Sprödigkeit beim Erstellen großartiger Webanwendungen. Das Streben nach Kontrolle hört jedoch nicht auf und herkömmliche benutzerdefinierte Tags reichen nicht aus, um leistungsstarke Anwendungen zu erstellen. Beispielsweise kann sich die Anzahl der Stilselektoren in Ihrem Code durch das Hinzufügen benutzerdefinierter Tags erhöhen. Dies ist nur einer von vielen Faktoren, die zu Leistungsproblemen führen können.

Eine Möglichkeit, dieses Problem zu lösen, ist Shadow DOM.

Shadow DOM funktioniert durch die Einführung bereichsbezogener Stile. Es sind keine besonderen Namenskonventionen oder Tools erforderlich. Mit Shadow DOM ist die Bündelung von CSS mit Markup einfach. Darüber hinaus ermöglicht uns diese Funktion, alle Details zur Implementierung in einfachem JavaScript auszublenden.

Warum Shadow DOM verwenden?

Shadow DOM bietet die folgenden Lösungen:

• Unabhängige Elemente im DOM zulassen. Abfragen wiedocument.querySelectorgeben keine verwaisten Elemente zurück.
• Bereichsbezogenes CSS zulassen. Scoped CSS stellt sicher, dass alle Stilregeln innerhalb der Seite bleiben. Es bedeutet auch einfachere CSS-Selektoren ohne Namenskonflikte und viele gängige Klassen.

Unser Beispiel

Um Shadow DOM zu demonstrieren, verwenden wir eine einfache Komponente namenstuts-tabs. Alle Verweise in diesem Artikel verweisen auf diesen Code. Um Shadow DOM zu erleben, schauen Sie sich die Demo unten an:

Shadow DOM verstehen

Was ist Shadow DOM?

Bevor Sie mit dem Codieren mit Shadow DOM beginnen, müssen Sie das reguläre DOM verstehen.

HTML ist das Rückgrat Ihrer Website. In nur wenigen Minuten können Sie eine Seite erstellen. Wenn Sie die Seite in Ihrem Browser öffnen, kommt das DOM ins Spiel. Sobald der Browser die Seite lädt, beginnt er mit der Analyse des HTML-Codes in ein Datenmodell. Das Datenmodell ist eine Baumstruktur, in der die Knoten Elemente in HTML darstellen. Das Datenmodell lässt sich leicht mit Code ändern und manipulieren.

Der Nachteil besteht darin, dass ganze Webseiten oder sogar komplexe Webanwendungen als eine einzige Datenstruktur behandelt werden. Das ist nicht einfach zu debuggen! Beispielsweise kann sich ein auf eine Komponente angewendeter CSS-Stil letztendlich auf eine andere Komponente an anderer Stelle in der Anwendung auswirken.

Verwenden Sieiframes, wenn Sie einen Teil Ihrer Schnittstelle vom Rest isolieren möchten. Iframes sind jedoch umfangreich und äußerst restriktiv.

Aus diesem Grund wurde Shadow DOM eingeführt. Es handelt sich um eine leistungsstarke Funktion moderner Browser, die es Webentwicklern ermöglicht, Teilbäume verschiedener Elemente in das DOM einzubinden. Diese Unterbäume des DOM haben keinen Einfluss auf den Hauptdokumentbaum. Technisch gesehen werden sie „Schattenbäume“ genannt.Ein Schattenbaum hat eine

, die an ein übergeordnetes Element im DOM angehängt ist. Dieser Elternteil wird „Shadow Host“ genannt.Wenn Siebeispielsweise in einen Browser mit WebKit-Unterstützung einbinden, wird dieser in einen Slider umgewandelt. Warum? Dies ist ein Schieberegler, da eines der Unterbaum-DOM-Elemente „Scope“ versteht, um sein Erscheinungsbild zu ändern und eine Schieberegler-ähnliche Funktionalität einzuführen. Dies ist ein Vorteil, den Shadow DOM für Tabs bietet.

Schritt-für-Schritt-Anleitung zur Verwendung von Shadow DOM

Schritt 1: Schatten-DOM-Element erstellen

Verwenden Sie

sehen Sie den Code, der zum Erstellen eines Shadow-DOM-Elements verwendet wird.element.attachShadow()

let shadowRoot = this.attachShadow({mode: 'open'});

tuts-tabAls nächstes verwenden wir

shadowRoot.innerHTML = ``

Nach dem Login kopieren

.innerHTMLDas Verbinden benutzerdefinierter Elemente mit Shadow DOM ist sehr einfach. Bedenken Sie, dass Sie durch die Kombination benutzerdefinierter Elemente mit Shadow DOM gekapselte Komponenten mit CSS, JavaScript und HTML erstellen können. Daher erstellen Sie eine völlig neue Webkomponente, die in Ihrer Anwendung wiederverwendet werden kann.

In unserem Beispiel verwenden wircustomElements.define(), um ein neues benutzerdefiniertes Element zu erstellen. Wie im vorherigen Tutorial erwähnt, sollten neue Elemente „-“ im Namen enthalten.

当我们扩展HTMLElement时，在构造函数中调用super()非常重要。另外，构造函数是需要创建shadowRoot的地方。

customElements.define('tuts-tabs', class extends HTMLElement { constructor() { super(); // always call super() first in the constructor. // Attach a shadow root to . const shadowRoot = this.attachShadow({mode: 'open'}); ... });

创建shadowRoot后，您可以为其创建 CSS 规则。 CSS 规则可以包含在 `; } ... });