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

HTML5 WebComponents Primer

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

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
120
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
82
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
92
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
210

Other Decks in Programming

See All in Programming
4ab3fec3e82ddb19bcadd93ef909a443?s=48 syucream
4
1.4k
394576121c6b861048493988254160dd?s=48 tarappo
4
440
828bebe205894e1aa5f75a1fc6935a9c?s=48 ganchan11
0
170
7b606c5039f083d13e2d2320ce6ddcfa?s=48 dqneo
0
140
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
1
340
8834a79ab8e0412b2130131817be73d9?s=48 gtongy
0
470
75baf8a56acce7086013da05fd125af5?s=48 dhmegane
0
240
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
5
5.6k
8a43d544df4886ea5ef714e78f3420a7?s=48 chimerast
0
340
744a38d972036c3bd0bcdaddafdd5f26?s=48 mathetake
7
2.2k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
160
Bbb17eeeecd3d9d06f4db310ab630a12?s=48 borkdude
1
180

Featured

See All Featured
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
58
6.4k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
40
4.7k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
107
14k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.8k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
440
28k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
779
240k

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!