HTML5 WebComponents Primer

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

Transcript

1. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
   WebComponents Primer
   

   View Slide

2. @mirkosertic | mirko@mirkosertic.de | 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 | mirko@mirkosertic.de | https://www.mirkosertic.de
   2D / 3D Canvas
   Microdata
   Drag & Drop API
   WebComponents
   Cross Document Messaging
   

   View Slide

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

   View Slide

5. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
   WebComponents
   
   
   Tab1
   Tab2
   
   
   

   View Slide

6. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
   WebComponents
   
   
   
   
   
   Tab1
   Tab2
   
   
   

   View Slide

7. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
   WebComponents
   
   Titel meiner tollen Tab Komponente
   
   …
   …
   
   
   

   View Slide

8. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
   WebComponents
   
   …
   Titel meiner tollen Tab Komponente
   
   …
   …
   
   
   

   View Slide

9. @mirkosertic | mirko@mirkosertic.de | 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 | mirko@mirkosertic.de | 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 | mirko@mirkosertic.de | 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 | mirko@mirkosertic.de | 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 | mirko@mirkosertic.de | https://www.mirkosertic.de
    WebComponents
    
    
    
    Tab1
    Tab2
    

    View Slide

14. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
    WebComponents
    
    
    
    Tab1
    Tab2
    Shadow DOM
    Host Shadow DOM
    Root
    

    View Slide

15. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
    Komplexe Anwendung
    

    View Slide

16. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
    Komplexe Anwendung
    

    View Slide

17. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
    Stand der Implementierung
    

    View Slide

18. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de
    Was gibt es noch?
    Google Polymer
    Vue.js
    

    View Slide

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

    View Slide