HTML5 WebComponents Primer

219cd340806b9ddcaee60427c2d07d26?s=47 Mirko Sertic
May 06, 2017
Programming
0
69

HTML5 WebComponents Primer

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

219cd340806b9ddcaee60427c2d07d26?s=128

Mirko Sertic

May 06, 2017
Tweet

More Decks by Mirko Sertic

See All by Mirko Sertic
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
2
77
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
57
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
66
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
160

Other Decks in Programming

See All in Programming
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
2
190
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
1.1k
5fc8ab822e946a8ddfa46ba15a848392?s=48 fuqda
1
150
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
110
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
240
70b07e6b7fe7d921d7ac542d0ccb3b2c?s=48 kdmsnr
6
2.9k
4131d2f57a0db2a2b4d9a62bd389fd44?s=48 tarcieri
0
260
E24ebbedcae292dc8e4b56186e082220?s=48 iganari
1
290
Db2247a5b4226e1f6f74a9bd87810090?s=48 hiroakis
3
490
B3a78cfbf06ca9ee860536c6d1de5e7f?s=48 ykanoh
0
210
Aae878e0b108379a60ca627ee262befa?s=48 susanpotter
0
170
1d1580fb0945b0ffadff18e28bead3c5?s=48 adarapata
0
270

Featured

See All Featured
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
581
190k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k
282d599b414022eba5096510f675b6e2?s=48 chrislema
169
14k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
606
53k
78b475797a14c84799063c7cd073962f?s=48 holman
446
130k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
78
3.1k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.2k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
256
24k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
6
370
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.7k

Transcript

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

  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.

  3. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de 2D / 3D Canvas Microdata

    Drag & Drop API WebComponents Cross Document Messaging

  4. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de 2D / 3D Canvas Microdata

    Drag & Drop API WebComponents Cross Document Messaging

  5. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> <div>Tab1</div> <div>Tab2</div>

    </my-tabview> </body>

  6. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <head> <link rel="import" href="my-tabview.html">

    </head> <body> <my-tabview> <div>Tab1</div> <div>Tab2</div> </my-tabview> </body>

  7. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <div>Titel meiner

    tollen Tab Komponente</div> <div> … … </div> </template>

  8. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <style>…</style> <div>Titel

    meiner tollen Tab Komponente</div> <div> … … </div> </template>

  9. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =

    document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script>

  10. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =

    document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script> 1

  11. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =

    document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script> 1 2

  12. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <script> var importDoc =

    document.currentScript.ownerDocument; var myTabViewPrototype = Object.create(HTMLElement.prototype); myTabPrototype.createdCallback = function() { var shadow = this.createShadowRoot(); var template = importDoc.querySelector('#mytemplate'); shadow.appendChild(template.content.cloneNode(true)); }; document.registerElement(‘my-tabview‘, { prototype: myTabViewPrototype }); </script> 1 2 3

  13. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>

    <div>Tab1</div> <div>Tab2</div>

  14. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>

    <div>Tab1</div> <div>Tab2</div> Shadow DOM Host Shadow DOM Root

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

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

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

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

    Polymer Vue.js

  19. @mirkosertic | mirko@mirkosertic.de | https://www.mirkosertic.de Fragen? falls nicht, besten Dank

    für die Aufmerksamkeit!