Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Geektastic Connect: Einführung in Web-Components

Geektastic Connect: Einführung in Web-Components

Anstatt AngularJS, React oder Vue.js für die Realisierung von komplexen UI Komponenten im Web zu nutzen bietet es sich an einen Blick auf den neuen Web-Standard Web Components zu richten. In dieser Session wollen wir genau dies tun. Wir schauen uns an was diese Web Components überhaupt sind und wie wir damit UI Komponenten erstellen können ohne ein proprietäres Framework nutzen zu müssen.

Michael Vitz

December 04, 2019
Tweet

More Decks by Michael Vitz

Other Decks in Programming

Transcript

  1. Einführung in Web- Components 4 . D e z e

    m b e r 2 0 1 9 D ü s s e l d o r f / G e e k t a s t i c C o n n e c t
  2. Web-Components •Erlauben das Definieren von eigenen HTML Elementen •Set von

    Web APIs •Custom Elements •Shadow DOM •HTML Template •ES Modules (wird im Vortrag nicht behandelt) https://www.webcomponents.org/introduction
  3. Autonomous Custom Element <my-alert type="warn"> <h4>Achtung</h4> <p>Etwas schlimmes ist passiert!</p>

    </my-alert> class MyAlert extends HTMLElement { … } customElements.define('my-alert', MyAlert);
  4. Customized Built-In Element <a href="/somewhere" is="embeddable-content"> Some Link </a> class

    EmbeddableContent extends HTMLAnchorElement { … } customElements.define(‘embeddable-content', EmbeddableContent, {extends: ‘a'});
  5. Custom Element API •constructor()
 // instance is created •connectedCallback()
 //

    instance is inserted into DOM •disconnectedCallback()
 // instance is removed from DOM •attributeChangedCallback(attrName, oldVal, newVal)
 // one of observed attributes changed -> static get observedAttributes() •adoptedCallback()
 // instance is adopted via document.adoptNode(el)
  6. HTML Template •Ermöglicht User ein Template anzugeben das von der

    Komponente verwendet wird <template id="alert"> <slot name="title"><h1>Achtung</h1></slot> <slot name="text"><p>Es passiert!</p></slot> <p>Ihnen wird nichts passieren.</p> </template>
  7. Krischerstr. 100 40789 Monheim am Rhein Germany +49 2173 3366-0

    Ohlauer Str. 43 10999 Berlin Germany +49 2173 3366-0 Ludwigstr. 180E 63067 Offenbach Germany +49 2173 3366-0 Kreuzstr. 16 80331 München Germany +49 2173 3366-0 Hermannstrasse 13 20095 Hamburg Germany +49 2173 3366-0 Gewerbestr. 11 CH-6330 Cham Switzerland +41 41 743 0116 innoQ Deutschland GmbH innoQ Schweiz GmbH www.innoq.com Danke! Fragen? Michael Vitz [email protected] +49 151 19116015 @michaelvitz https:/ /www.innoq.com/de/talks/2019/12/geektastic-düsseldorf-dezember-2019-web-components/ https:/ /github.com/mvitz/web-components-introduction