Webkomponenten: Eine Einführung

In der modernen Webentwicklung liegen Frameworks voll im Trend. Fast alle modernen Frameworks verfügen über das Konzept von Komponenten. Die Idee hinter Komponenten besteht darin, Ihre Frontend-Logik in kleinere wiederverwendbare Teile zu zerlegen, die Sie seiten- oder projektübergreifend teilen können. Im Allgemeinen sind diese Komponenten nicht in anderen Frameworks wiederverwendbar und erfordern einen Build-Prozess, um sie in JavaScript zu kompilieren, das im Browser ausgeführt werden kann.

Was wäre, wenn ich Ihnen sagen würde, dass es eine Möglichkeit gibt, Komponenten mit Vanilla-JavaScript und allgemein verfügbaren Browser-APIs zu erstellen, die Sie über Frameworks hinweg teilen könnten? Mit Web Components ist dies nun Realität. Hier werfen wir einen kurzen Blick auf die verschiedenen Arten von Webkomponenten und einige der Möglichkeiten, die wir mit ihnen nutzen können.

Die Grundlagen von Webkomponenten

Webkomponenten werden mithilfe der Custom Element Registry definiert. Dies ist eine API, die die meisten modernen Browser bereitstellen. Um eine Webkomponente zu erstellen, definieren Sie sie einfach im Code und registrieren sie dann in der Custom Element Registry. Sobald sie registriert und mit den richtigen Namenskonventionen definiert ist, steht die Komponente zur Verwendung auf der Seite zur Verfügung.

customElements.define("my-component", MyComponentClass);

Arten von Webkomponenten

Webkomponenten können in zwei verschiedene Kategorien unterteilt werden. Dies sind Autonome Webkomponenten und Benutzerdefinierte integrierte Elemente.

Autonome Webkomponenten sind eine Erweiterung der generischen HTMLElement-Klasse. Diese Komponenten sind im Allgemeinen flexibler, da Sie im Wesentlichen Ihr eigenes HTML-Element erstellen und das gesamte Verhalten von Grund auf anpassen können. Dazu gehört das Stammelement, das zum Rendern der Komponente verwendet wird. Einmal definiert, verwenden Sie Autonomous Web Components wie jedes andere HTML-Element.

<my-button>



<p><strong>Custom Built-In Elements</strong> extend specific HTML elements.  For example, you may extend the HTMLButtonElement class or the HTMLAnchorElement.  These are meant to augment the functionality of existing HTML elements. To use a Custom Built-In element, you use the "is" attribute on the HTML element you are augmenting to tell it that it is an instance of the Web Component.<br>
</p>

<pre class="brush:php;toolbar:false"><button is="my-button">



<h3>
  
  
  Naming Web Components
</h3>

<p>When defining a Web Component, there are certain conventions that must be followed.  </p>

<p>Generally you will name your components similar to HTML elements with your own prefix attached to keep things simple (i.e. <my-button>).  The basic rules require that the element name start with a lowercase letter, and it must include a hyphen.  These guidelines will get you by for most cases, but I would recommend looking at the HTML spec if you're curious about all rules.<br>
</my-button></p>

<pre class="brush:php;toolbar:false"><!--Valid-->
<my-button></my-button>
<your-button></your-button>

<!--Invalid-->
<my-button></my-button>

<mybutton></mybutton>

Lebenszyklus-Hooks

Webkomponenten verfügen über spezifische Lebenszyklus-Hooks, die zum Reagieren auf verschiedene Phasen verwendet werden, die die Komponente durchläuft. Die Haken sind die folgenden:

• connectedCallback -> Wird ausgeführt, wenn die Komponente an das DOM angehängt ist.
• disconnectedCallback -> Wird ausgeführt, wenn die Komponente vom DOM getrennt wird.
• adoptedCallback -> Wird jedes Mal ausgeführt, wenn die Komponente an ein neues DOM angehängt wird.
• attributeChangedCallback -> Wird ausgeführt, wenn ein Attribut aus der Liste der „observedAttributes“ aktualisiert wird.

class MyComponent extends HTMLElement {
    static observedAttributes = ["btntype"]
    connectedCallback() {
        // Handle when the component is attached to the DOM
    }
    disconnectedCallback() {
        // Handle when the component is removed from the DOM
    }
    adoptedCallback() {
        // Handle when the component is attached to a new DOM
    }
    attributeChangedCallback(name, oldValue, newValue) {
        // Trigged when the "btntype" attribute is changed since it is in the list of observedAttributes.
        // "name" will be the name of the attribute that changed.
        // "oldValue" is the value before the change.
        // "newValue" is the new value after the change.
    }
}

Diese Lebenszyklus-Hooks werden für alle Initialisierungs- oder Bereinigungsarbeiten verwendet, die beim Erstellen/Zerstören von Komponenteninstanzen erforderlich sind. Der attributeChangedCallback ist besonders nützlich, da er ermöglicht, auf Aktualisierungen von Attributwerten zu reagieren. Webkomponenten verfügen über ein spezielles statisches Attribut namens „observedAttributes“, das ein Array von Attributnamen (Strings) sein soll, die den attributeChangedCallback auslösen.

Zugänglichkeit

Barrierefreiheit ist heute ein wichtiger Aspekt bei jeder Webentwicklung. Wenn es um Webkomponenten geht, verwenden Sie ARIA-Attribute genau wie in normalem HTML oder in einem Framework, aber im Allgemeinen erben Sie die integrierten Rollen und Barrierefreiheitsfunktionen der von Ihnen verwendeten HTML-Elemente.

Hier gelten die gleichen Richtlinien wie anderswo auch. Stellen Sie beispielsweise sicher, dass Sie beim Erstellen Ihrer Komponenten semantisches HTML verwenden, fügen Sie alle erforderlichen Tastaturfunktionen hinzu, die möglicherweise erforderlich sind, und stellen Sie sicher, dass Dinge wie Fokus und Farbkontrast ordnungsgemäß verwaltet werden.

Das Schatten-DOM

Das Shadow DOM ist wahrscheinlich der verwirrendste und umstrittenste Teil von Web Components. Das Shadow-DOM ist im Wesentlichen ein separater Teil des DOM, der sich in einer Webkomponente befindet

Das Shadow DOM ist hauptsächlich ein Problem für autonome Webkomponenten, da benutzerdefinierte integrierte Elemente nur zu vorhandenen HTML-Elementen hinzugefügt werden. Bei autonomen Webkomponenten gilt das benutzerdefinierte Tag, das das Element darstellt (d. h. ), als „Host“-Element. Innerhalb des Host-Elements befindet sich die „Schattenwurzel“. Im Schattenstamm wird das Markup für die Komponente gerendert.

Hier ist ein Beispiel, in dem Sie das „my-button“-Element als Host sehen, mit dem Shadow DOM darin.

Beim Erstellen von Webkomponenten gibt es zwei Modi, auf die Sie das Shadow DOM einstellen können. Diese Modi sind „offen“ und „geschlossen“. Auf offene Shadow-DOMs kann mit JavaScript außerhalb des Shadow-Roots im Light-DOM zugegriffen werden, geschlossene Shadow-DOMs dagegen nicht.

customElements.define("my-component", MyComponentClass);

Alle Stile, die Sie im Shadow-DOM definieren, sind im Shadow-DOM gültig und beeinträchtigen nicht den Rest des Dokuments. Alle im „Light DOM“ (dem Rest des Dokuments) definierten Stile dringen nicht in das Shadow DOM ein (CSS-Variablen sind eine Ausnahme, aber darauf gehen wir hier nicht näher ein). Moderne Browser bieten Möglichkeiten, das Shadow-DOM mithilfe von CSS mithilfe von Teilen direkt vom Light-DOM aus anzusprechen. Sie können Teile zum Schatten-DOM Ihrer Komponente hinzufügen, indem Sie Teilattribute zu Ihrem Markup hinzufügen. Diese Teile können dann in CSS mithilfe des ::part-Pseudoselektors als Ziel ausgewählt werden. Das ist äußerst praktisch, aber von Natur aus ziemlich begrenzt. Sie können untergeordnete Selektoren nicht mit dem ::part-Selektor verketten. Sie können nur auf das spezifische Element abzielen, das ein „Teil“-Attribut innerhalb des Shadow-DOM hat.

Zugänglichkeit ist auch ein wichtiger Gesichtspunkt bei der Arbeit mit dem Shadow DOM. Wenn Sie jemals mit ARIA-Attributen gearbeitet haben, sind Sie mit „aria-describedby“ und „aria-labelledby“ vertraut, denen im Allgemeinen eine ID zugewiesen wird, die auf ein anderes Element verweist, das eine Beschriftung oder Beschreibung des Inhalts für Bildschirmleseprogramme enthält. Das Shadow-DOM verwaltet IDs ähnlich wie Stile separat, sodass Sie nicht vom Light-DOM auf eine ID verweisen können, die sich im Shadow-DOM befindet, und umgekehrt. Dies kann eine Herausforderung darstellen, wenn Sie versuchen, detaillierte Beschreibungen bereitzustellen, die Sie dynamisch bereitstellen müssen. Es gibt jedoch Problemumgehungen, auf die wir in dieser Einführung nicht näher eingehen.

Vorlagen und Slots

Vorlagen und Slots sind Tools, die in Kombination mit dem Shadow DOM verwendet werden können, um Webkomponenten zu verbessern. Vorlagen werden zum Erstellen wiederverwendbarer Snippets innerhalb von Webkomponenten verwendet, während Slots zum Aufdecken von „Lücken“ verwendet werden, in die Inhalte aus dem Light DOM übergeben werden können.

Vorlagen sind praktisch, wenn es einen HTML-Ausschnitt gibt, den Sie in einer Webkomponente immer wieder rendern müssen. Sie können auch außerhalb von Webkomponenten verwendet werden, haben jedoch eingeschränktere Anwendungsfälle. Sie werden mit dem Tag „template“ implementiert.

Slots werden zum Übergeben von Inhalten aus dem Light DOM an eine Webkomponente verwendet und mithilfe des „slot“-Tags implementiert. Dies ist praktisch, wenn Sie über eine generische Komponente verfügen, für deren Weitergabe möglicherweise dynamischer Inhalt erforderlich ist. Ein gutes Beispiel könnte eine generische Kartenkomponente sein, bei der Sie einen freigelegten Steckplatz für die Weitergabe von Markup in den Kartenkörper haben könnten. Slots verfügen über ein „Name“-Attribut, das Sie zur eindeutigen Identifizierung des Slots bereitstellen können. Dies ist praktisch, wenn Sie mehrere Slots in eine Webkomponente einfügen müssen. Wenn Sie Inhalte übergeben, können Sie einfach ein Attribut mit dem Wert „slot="your-slot-name" übergeben und der Inhalt wird an den Slot mit dem passenden Namen übergeben.

Slots und das Shadow DOM haben eine einzigartige Interaktion, die es wert ist, erwähnt zu werden. Slots können Standardinhalte haben, die gerendert werden, falls nichts übergeben wird. An Slots übergebene Inhalte befinden sich im Light-DOM und werden „flach kopiert“ in das Shadow-DOM. Sie können dies visuell im Browser-Inspektor sehen. Der Slot-Inhalt wird innerhalb der Webkomponente gerendert, aber im DOM befindet sich der Inhalt technisch gesehen außerhalb der Webkomponente und stellt einen Link zum Slot bereit.

Davon abgesehen bedeutet das, dass alle Slot-Inhalte wie alle anderen Inhalte im Light DOM gestaltet und referenziert werden. Stile im Light DOM wirken sich auf den Slot-Inhalt aus, Shadow DOM-Stile hingegen nicht. Es stehen APIs für die Interaktion mit Slot-Inhalten innerhalb der Webkomponente zur Verfügung.

Unterstützung von Webkomponenten

Webkomponenten werden in modernen Browsern ziemlich gut unterstützt. Die Hauptausnahme ist Safari, das keine benutzerdefinierten integrierten Elemente unterstützt. Wenn Sie ältere Browser wie Internet Explorer 11 unterstützen müssen, müssen Sie einige Dinge mehrfach ausfüllen.

Grundlegende Beispiele

Nachdem wir nun eine kurze Einführung in alle Grundkonzepte erhalten haben, werfen wir einen Blick auf einige Beispiele.

Autonome benutzerdefinierte Elemente

Hier ist ein Beispiel für ein autonomes benutzerdefiniertes Element namens „my-button“:

customElements.define("my-component", MyComponentClass);

Das erste, was auffällt, ist, dass der Code größtenteils derselbe ist. Der größte Unterschied besteht darin, dass wir das HTMLButtonElement direkt erweitern und dann auch deklarieren, dass wir die Schaltfläche erweitern, wenn wir das benutzerdefinierte Element definieren.

Wir verbringen auch viel weniger Zeit damit, Code für die Darstellung des Elements zu schreiben. Da wir das HTMLButtonElement erweitern, ist die Komponente lediglich eine HTML-Schaltfläche mit zusätzlicher Leistung. Wir werden einer HTML-Schaltfläche mitteilen, dass es sich um eine „Mein-Schaltfläche“ handelt, indem wir das HTML-Attribut „is“ verwenden.

Hier ist das Beispiel live:

Auch hier werden Sie feststellen, dass wir das „is“-Attribut verwenden, um das vorhandene HTML-Schaltflächenelement zu erweitern. Sie werden auch feststellen, dass wir, genau wie bei den benutzerdefinierten Elementen von Autonomous, Ereignis-Listener anhängen und mit der Schaltfläche arbeiten können, wie wir es mit jedem anderen HTML-Element tun würden, was hier ohnehin sinnvoller ist, da es sich im wahrsten Sinne des Wortes nur um eine erweiterte HTML-Schaltfläche handelt.

Zusammenfassung

Webkomponenten sind eine einfache Möglichkeit, das Problem der Erstellung gemeinsam nutzbarer Komponenten zu lösen, die auf verschiedenen Seiten und Projekten wiederverwendet werden können. Sie funktionieren eher wie normale HTML-Elemente, was zu Verwirrung führen kann, aber letztendlich können sie äußerst nützlich sein und dabei helfen, viele der gleichen Probleme zu lösen, auf die moderne Frameworks abzielen.

Hier haben wir einen sehr einführenden Blick auf Webkomponenten, die verschiedenen Konzepte rund um sie und einige kurze Beispiele geworfen, die ihre grundlegende Funktion veranschaulichen. Von hier aus können wir damit beginnen, uns eingehender mit der Frage zu befassen, wie wir den Bau und die Nutzung dieser Geräte vereinfachen können, und untersuchen, wie wir mit einigen ihrer Schwachstellen umgehen können.

Wenn Sie interessiert sind, schauen Sie sich die Beispiele gerne auf GitHub an oder spielen Sie mit ihnen in Code Pen.

• Beispiel für ein autonomes benutzerdefiniertes Element
• Beispiel für ein benutzerdefiniertes integriertes Element
• Beispiel für Bonus-Basisvorlagen!

Im nächsten Artikel werfen wir einen Blick darauf, wie wir die Verwendung von Vorlagen und Slots erweitern und das Rendern vereinfachen können. Bleiben Sie dran!

Das obige ist der detaillierte Inhalt vonWebkomponenten: Eine Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!