HTML5 WebComponents Primer

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

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
84
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
57
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
69
219cd340806b9ddcaee60427c2d07d26?s=48 mirkosertic
0
160

Other Decks in Programming

See All in Programming
3295d80faee461db1093982361256fe4?s=48 panini
0
160
Cb4d62dd7c1d325863696c45e9b6484d?s=48 yaminoma
2
800
2ee9db3a5b6c492acf66ec14c8a5d8dc?s=48 slsops
0
330
87137598c23e3e90755e5d7476d21405?s=48 bastnic
1
610
0b40b09ee30366ddfe68070d94d7ee3f?s=48 a_suenami
0
230
249b3122eee454c0a818bfe7851418e4?s=48 fromkk
7
500
376e4eb9dc6c2e33d1330262edc4f109?s=48 janko_m
0
340
433ce798352c6d5ad363b3b585cb015d?s=48 rizumi
5
730
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
2
200
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
2
200
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
2
340
30682a28206e455a1bc57d7d85cd1e14?s=48 shomasegi
3
330

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
340
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
9
600
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
13
750
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
653
54k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
391
60k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
682
180k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
118
15k
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
60k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.4k

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!