HTML5 WebComponents Primer

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

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
85
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
60
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
69
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
170

Other Decks in Programming

See All in Programming
023b04c98f39cc041293d780352432ff?s=48 koic
4
1.6k
0b8291daeda1cd55e445af644d402bb0?s=48 aoiroaoino
2
290
D225ebf0faa666ac7655cc7e4689283c?s=48 dlew
2
170
26e1ba9a02729b2d6013604135221aae?s=48 yhara
0
150
49833977598de9524fa85cacb93a42ce?s=48 philcalcado
0
110
6dd0483f1353a4a359e92633cfd65c64?s=48 wasabeef
23
5.5k
51f4d2341131b6b9bfa996bdb9b8dfa8?s=48 showmant
3
280
53de6e9d0d7bedce85c7b29256448274?s=48 forrep
12
3.1k
A6ba8150ec3d9e5f2c675ef8bd652ff5?s=48 vailkako
0
170
22387942388a45f3f81ebc394700e296?s=48 trywjs
0
770
89f41026db2c96853402524fca4a2ff8?s=48 brentchang
0
860
F2496b53b4e6d5a589d8dc1781c11978?s=48 tatsumi0000
1
260

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
622
40k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
14k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
266
16k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
282d599b414022eba5096510f675b6e2?s=48 chrislema
170
14k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
101
5.8k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
10
630
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
682
180k

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!