Save 37% off PRO during our Black Friday Sale! »

HTML5 WebComponents Primer

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

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
190
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
150
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
160
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
310

Other Decks in Programming

See All in Programming
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
130
B00d69471ef4903e0353aa5476614b7f?s=48 yongtae723
0
870
Ddecbf99faa27ea6257856734fa6f9b8?s=48 whitegreen
0
180
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
1
1.4k
795a1c8d5e46f6b9067202655ea5dfae?s=48 ringa_hyj
3
250
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
0
200
2e43817e39d87da5d9d4efd6310c0d44?s=48 kafumi
1
390
C400a6dc29b681f0284fd33c468e396e?s=48 shimotaroo
0
330
Aafd6fce3e7b34b8a41efb0d4d609cc1?s=48 tsmiyamoto
1
140
9eed44f137609e6ce3b6f1e14f80b9e1?s=48 izumin5210
9
3.9k
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
190
D14332b39b012820d44d362a3e2a8d98?s=48 shibe23
4
1.9k

Featured

See All Featured
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.7k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.1k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
55
3.5k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
280k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
634
50k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
3.9k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9.1k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
295
110k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k

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!