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
140

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

Other Decks in Programming

See All in Programming
D661ba250e003e83b03c25852b27d3f8?s=48 0906koki
2
380
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
0
410
7a4968fbcd56e81f95a4f3c186141b52?s=48 kateinoigakukun
2
210
1a1d418bdf51cbf8fce1317f6c80a907?s=48 satoshi0212
3
280
78d39160a56e4a71b1c4a2d0cbfda223?s=48 jlkiri
0
480
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
150
F6baf93a0833a98bdc8184c214f4c468?s=48 rgoswami
0
120
Ff0453fcbf27a84de92b9cc1f2aed9af?s=48 koike91
1
450
Eae7b6aeee72d3081b01d09a2d675f9a?s=48 akkeylab
5
1k
E505897a79eede1a676f92740261e8f8?s=48 kubode
1
530
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
210
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
240

Featured

See All Featured
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
29k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
688
180k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
17
2.1k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
122
5.1k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
105
11k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
60
7.2k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.1k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
194
8.9k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
55k

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!