Webkomponenten in der realen Welt (Teil 2)

Mehr als ein Jahr ist seit meiner Veröffentlichung "Web Components in the Real World" vergangen und ich habe neue Beobachtungen darüber gesammelt, was mit dieser Technologie immer noch nicht stimmt. Vielleicht erlauben diese Punkte jemandem, eine Sackgasse für seine Projekte zu vermeiden.

_{Foto von Brandon Molitwenik auf Unsplash}

Gebrochenes HTML

HTML verfügt über viele nützliche Funktionen, mit denen Sie Funktionen ohne Verwendung von JavaScript implementieren können. Eine dieser Funktionen ist die Möglichkeit, ein Formular durch Drücken der Eingabetaste in einem Eingabefeld zu senden. Hier ist ein Beispiel:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <button>Send!</button>
</form>

Wir geben den Text ein, drücken die Eingabetaste, die Daten werden an den Server gesendet, kein JavaScript. Falls gewünscht, können Sie das Neuladen der Seite und das Senden von Daten über AJAX vermeiden. In diesem Fall ist die Menge an JS jedoch minimal.

Versuchen wir nun, eine normale Schaltfläche durch eine Webkomponente zu ersetzen:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <my-button>Send!</my-button>
</form>

Die Webkomponente my-buttonenthält dieselbe Schaltfläche in sich selbst, es gibt keine visuellen Unterschiede. Aber das Absenden des Formulars durch Drücken der Eingabetaste ist kaputt! Hier ist eine Demo , die Sie selbst sehen können.

? -, . , . , : Javascript, , -. , - 8 , production-ready.

, -. HTML , label. , , . -! :

<label>First name: <input type="text"></label>
<label>Last name: <my-input></label>

, input "First name", "Last name" - . ! 2 , . – label input . , ? , - -, - ( , ShadowDOM).

CSP

" , ". CSP – , . CSP <style></style> , <link rel="stylesheet"> (, style- , 'unsafe-inline', , ).

-? , ShadowDOM , , ShadowDOM style-, CSP. - : Stencil () LitElement ().

– Constructable Stylesheets API, ShadowDOM unsafe-inline. – CSP, -.

Lifecycle-

, . , ( material-web-components):

<my-menu>
    <my-menu-item />
    <my-menu-item />
</my-menu>

- . connectedCallback. - DOM . , . :

class MyMenu extends HTMLElement {
    connectedCallback() {
        console.log('my menu')
    }
}

class MyMenuItem extends HTMLElement {
    connectedCallback() {
        console.log('my menu item')
    }
}

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

, :

"my menu"
"my menu item"
"my menu item"

connectedCallback , . , . , :

"my menu item"
"my menu item"
"my menu"

? my-menu ? HTML ,

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

// 
customElements.define('my-menu-item', MyMenuItem)
customElements.define('my-menu', MyMenu)

, connectedCallback. , , . " " , window.setTimeout . " " , . -

Die Webkomponente kann das Rendern der Spoiler-Interna nicht stoppen. Wenn die Komponente aktiviert ist, werden interne Bilder bereits geladen und verbrauchen Ihren Datenverkehr, auch wenn Sie diesen Spoiler nicht öffnen wollten.

Schlussfolgerungen

Überall auf den Webkomponenten sind Rechen verteilt, die mit Google Marketing bestreut sind. Es gibt immer noch viele ungelöste Probleme im Standard, die sich als unüberwindbares Hindernis für Ihre Projekte erweisen können. Es wäre nützlich, potenzielle Rakes im Voraus zu kennen, um eine fundiertere Entscheidung zu treffen, ob Webkomponenten und darauf basierende Frameworks verwendet werden sollen oder ob der einfache alte Ansatz in HTML / JS / CSS beibehalten werden soll. Hoffe dieser Artikel war hilfreich, danke fürs Lesen!