HTML5 WebComponents Primer

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents Primer

@mirkosertic | [email protected] | 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.

@mirkosertic | [email protected] | https://www.mirkosertic.de 2D / 3D Canvas Microdata
Drag & Drop API WebComponents Cross Document Messaging

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> <div>Tab1</div> <div>Tab2</div>
</my-tabview> </body>

@mirkosertic | [email protected] | 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>

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <div>Titel meiner
tollen Tab Komponente</div> <div> … … </div> </template>

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <style>…</style> <div>Titel
meiner tollen Tab Komponente</div> <div> … … </div> </template>

@mirkosertic | [email protected] | 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>

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

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

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

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>
<div>Tab1</div> <div>Tab2</div>

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>
<div>Tab1</div> <div>Tab2</div> Shadow DOM Host Shadow DOM Root

@mirkosertic | [email protected] | https://www.mirkosertic.de Komplexe Anwendung

@mirkosertic | [email protected] | https://www.mirkosertic.de Stand der Implementierung

@mirkosertic | [email protected] | https://www.mirkosertic.de Was gibt es noch? Google
Polymer Vue.js

@mirkosertic | [email protected] | https://www.mirkosertic.de Fragen? falls nicht, besten Dank
für die Aufmerksamkeit!

HTML5 WebComponents Primer

HTML5 WebComponents Primer

Mirko Sertic

More Decks by Mirko Sertic

Other Decks in Programming

Featured

Transcript

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents Primer

@mirkosertic | [email protected] | https://www.mirkosertic.de Als Primer (Pl.: die Primer;

@mirkosertic | [email protected] | https://www.mirkosertic.de 2D / 3D Canvas Microdata

@mirkosertic | [email protected] | https://www.mirkosertic.de 2D / 3D Canvas Microdata

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> <div>Tab1</div> <div>Tab2</div>

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <head> <link rel="import" href="my-tabview.html">

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <div>Titel meiner

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <template id="mytemplate"> <style>…</style> <div>Titel

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <script> var importDoc =

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <script> var importDoc =

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <script> var importDoc =

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <script> var importDoc =

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents <body> <my-tabview> </my-tabview> </body>

@mirkosertic | [email protected] | https://www.mirkosertic.de Komplexe Anwendung

@mirkosertic | [email protected] | https://www.mirkosertic.de Komplexe Anwendung

@mirkosertic | [email protected] | https://www.mirkosertic.de Stand der Implementierung

@mirkosertic | [email protected] | https://www.mirkosertic.de Was gibt es noch? Google

@mirkosertic | [email protected] | https://www.mirkosertic.de Fragen? falls nicht, besten Dank