Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents
Titel meiner tollen Tab Komponente
… …

Slide 8

Slide 8 text

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents …
Titel meiner tollen Tab Komponente
… …

Slide 9

Slide 9 text

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents 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 });

Slide 10

Slide 10 text

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents 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 }); 1

Slide 11

Slide 11 text

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents 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 }); 1 2

Slide 12

Slide 12 text

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents 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 }); 1 2 3

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

@mirkosertic | [email protected] | https://www.mirkosertic.de WebComponents
Tab1
Tab2
Shadow DOM Host Shadow DOM Root

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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