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
130

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
140
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
110
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
120
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
260

Other Decks in Programming

See All in Programming
F172ce6f89fdaae222055bd3625960bd?s=48 croe
0
140
Dd5ce24e9cc88d7a491aec105e558d7e?s=48 bateleurx
10
8.6k
832534770705425fc1f64ad60cb875a2?s=48 show_kanamaru
6
3.5k
0aac627116c6e2a87b9ae179500801df?s=48 stormcat24
0
930
7437b838338581b08ca72340b05475b9?s=48 abt
0
270
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
B05baacb6000fe55fe558ce75aa9bc74?s=48 jdkfx
0
110
0b26590a0a8b0f1da140ed5de9b68379?s=48 usamik26
0
240
9516a84fcc28d6456d4fc87a5c8b130f?s=48 kidel
0
1.2k
38b49a5fa7e0519f2919ac342a463980?s=48 marcobrador
0
250
1bfc6e2ed04a895bb36f36b86828b689?s=48 110y
3
610
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
120

Featured

See All Featured
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
55k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.5k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
104
11k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
121
16k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
48
2.9k
79acae287842acf29084005533a7fb3b?s=48 hursman
111
9.4k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.7k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
15
770
5f83ef806155b403c3393160ce51f955?s=48 jlugia
218
16k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
36k

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!