Pro Yearly is on sale from $80 to $50! »

HTML5 WebComponents Primer

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

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
92
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
66
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
76
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
180

Other Decks in Programming

See All in Programming
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
1
130
2028fcf9065b3e34d2732587b6ac7bc5?s=48 megabitsenmzq
0
150
4cd9f68f08d2200de34043e4ce049d03?s=48 yagieng
4
450
0063efb4c7066273b877fdabcdcd15b3?s=48 dora1998
0
130
0227f6274b8a6cce078d7f8a91460c41?s=48 eminetto
4
350
1e72c797afb9bab65655a1eb7d183460?s=48 syobochim
0
130
Fc815be82d09a2e922d4000b65b9f83b?s=48 74th
1
430
56eecc8d10c342264eea5b90f3cb1306?s=48 hokila
1
260
354e3e2cfb772abdf62bd92c92f89547?s=48 tarunpothulapati
0
130
1fab9d01b25e99522f3dfd01e3d4cb51?s=48 soutaro
0
450
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
9
2.6k
Acd2f6f7498ea41881e161e191aa7c02?s=48 yattom
3
440

Featured

See All Featured
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
13
1.7k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
232
810k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
60k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
125
20k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.1k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
228
17k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
9
1.2k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
18
1.6k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k

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!