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

HTML5 WebComponents Primer

HTML5 WebComponents Primer

An older Talk I gave some time ago, refreshed for an upcoming Team event.

Mirko Sertic

May 06, 2017
Tweet

More Decks by Mirko Sertic

Other Decks in Programming

Transcript

  1. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents Primer

    View Slide

  2. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Als Primer (Pl.: die Primer; IPA:
    [ˊpʁaɪ̯mɐ]) wird in der Molekularbiologie
    ein Oligonukleotid bezeichnet, das als
    Startpunkt für DNA-replizierende
    Enzyme wie die DNA-Polymerase dient.

    View Slide

  3. @mirkosertic | [email protected] | https://www.mirkosertic.de
    2D / 3D Canvas
    Microdata
    Drag & Drop API
    WebComponents
    Cross Document Messaging

    View Slide

  4. @mirkosertic | [email protected] | https://www.mirkosertic.de
    2D / 3D Canvas
    Microdata
    Drag & Drop API
    WebComponents
    Cross Document Messaging

    View Slide

  5. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents


    Tab1
    Tab2


    View Slide

  6. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents





    Tab1
    Tab2


    View Slide

  7. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents

    Titel meiner tollen Tab Komponente





    View Slide

  8. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents


    Titel meiner tollen Tab Komponente





    View Slide

  9. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents
    <br/>var importDoc = document.currentScript.ownerDocument;<br/>var myTabViewPrototype = Object.create(HTMLElement.prototype);<br/>myTabPrototype.createdCallback = function() {<br/>var shadow = this.createShadowRoot();<br/>var template = importDoc.querySelector('#mytemplate');<br/>shadow.appendChild(template.content.cloneNode(true));<br/>};<br/>document.registerElement(‘my-tabview‘, {<br/>prototype: myTabViewPrototype<br/>});<br/>

    View Slide

  10. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents
    <br/>var importDoc = document.currentScript.ownerDocument;<br/>var myTabViewPrototype = Object.create(HTMLElement.prototype);<br/>myTabPrototype.createdCallback = function() {<br/>var shadow = this.createShadowRoot();<br/>var template = importDoc.querySelector('#mytemplate');<br/>shadow.appendChild(template.content.cloneNode(true));<br/>};<br/>document.registerElement(‘my-tabview‘, {<br/>prototype: myTabViewPrototype<br/>});<br/>
    1

    View Slide

  11. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents
    <br/>var importDoc = document.currentScript.ownerDocument;<br/>var myTabViewPrototype = Object.create(HTMLElement.prototype);<br/>myTabPrototype.createdCallback = function() {<br/>var shadow = this.createShadowRoot();<br/>var template = importDoc.querySelector('#mytemplate');<br/>shadow.appendChild(template.content.cloneNode(true));<br/>};<br/>document.registerElement(‘my-tabview‘, {<br/>prototype: myTabViewPrototype<br/>});<br/>
    1
    2

    View Slide

  12. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents
    <br/>var importDoc = document.currentScript.ownerDocument;<br/>var myTabViewPrototype = Object.create(HTMLElement.prototype);<br/>myTabPrototype.createdCallback = function() {<br/>var shadow = this.createShadowRoot();<br/>var template = importDoc.querySelector('#mytemplate');<br/>shadow.appendChild(template.content.cloneNode(true));<br/>};<br/>document.registerElement(‘my-tabview‘, {<br/>prototype: myTabViewPrototype<br/>});<br/>
    1
    2
    3

    View Slide

  13. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents



    Tab1
    Tab2

    View Slide

  14. @mirkosertic | [email protected] | https://www.mirkosertic.de
    WebComponents



    Tab1
    Tab2
    Shadow DOM
    Host Shadow DOM
    Root

    View Slide

  15. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Komplexe Anwendung

    View Slide

  16. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Komplexe Anwendung

    View Slide

  17. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Stand der Implementierung

    View Slide

  18. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Was gibt es noch?
    Google Polymer
    Vue.js

    View Slide

  19. @mirkosertic | [email protected] | https://www.mirkosertic.de
    Fragen?
    falls nicht, besten Dank für die
    Aufmerksamkeit!

    View Slide