Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 WebComponents Primer

Mirko Sertic
May 06, 2017
Programming
0
230

HTML5 WebComponents Primer

An older Talk I gave some time ago, refreshed for an upcoming Team event.

Mirko Sertic

May 06, 2017
Tweet

More Decks by Mirko Sertic

See All by Mirko Sertic
Hinter den Kulissen von SCS Architekturen
mirkosertic
2
260
WebAssembly - ein Jahr danach
mirkosertic
0
210
From Legacy to modern Web
mirkosertic
0
220
Objektorientierung, Domain-Driven Design und Architectur
mirkosertic
0
430

Other Decks in Programming

See All in Programming
自作したプログラムを Packagist に登録して 世界中の PHPer にインストールしてもらおう
masaku_e
0
380
etrobo2022 Shiokara-z Model
azurata09
0
120
正規化理論ことはじめ -数学的背景から理解する正規化の初手-
boro1234
0
220
使用Helm搭配CI/CD供多 團隊使用的DevSecOps
demoyuw
0
510
話を聞き出す技術
murabayashi
30
26k
V8 as a container on CDN Edge worker
mizchi
5
1k
依存関係のコントロール / Dependency Control
nrslib
2
1.2k
可觀測性(Observability)的實踐
marcustung
0
1.6k
Comparing Native Java REST API Frameworks - Seattle JUG 2022
mraible
PRO
1
200
マルチテナントSaaSにおけるAmazon QuickSightの活用例
shogo452
1
150
比較演算を壊してみる / php-break-comparison
yammerjp
1
180
react-reconcilerでオレオレReact Nativeを作ろう！
kwzr
0
510

Featured

See All Featured
A designer walks into a library…
pauljervisheath
197
16k
GraphQLとの向き合い方2022年版
quramy
18
8.9k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Art, The Web, and Tiny UX
lynnandtonic
281
18k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.4k
A better future with KSS
kneath
226
16k
Making the Leap to Tech Lead
cromwellryan
113
7.5k
Done Done
chrislema
175
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
41k

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!