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
90

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
100
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
75
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
84
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
190

Other Decks in Programming

See All in Programming
Aa97a6ad2c4c8422f5580f4f9d5b5744?s=48 dulltz
0
530
079f41894122acf92719f5558dcaf944?s=48 dictoss
0
170
1d5a7a934b466ede82b89a39b1404c0b?s=48 daiki1020
0
1.1k
D5744e72b6a5e6673f991cab987a31ab?s=48 siketyan
1
120
1c2b62114ede7d8cb897bf19b999d233?s=48 muttsu_623
0
540
832ece085bfe2c7c5b0ed6be62d7e675?s=48 steipete
PRO
2
170
285cc95c4c9fe056b03afca581533266?s=48 fkubota
1
400
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
14
3.9k
1081586739576c17a6c64dfd7e8049a1?s=48 ogidow
0
170
347a1b64f3a6e38981bc99b53919e2b1?s=48 azdaroth
0
140
2b53803e5ee6d34a9cfc6aa4b94e3fea?s=48 maito1201
0
170
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
220

Featured

See All Featured
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.3k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
775
200k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
358
62k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
499
130k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.8k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.4k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.6k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
328
15k

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!