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

HTML5 WebComponents Primer

Avatar for Mirko Sertic Mirko Sertic
May 06, 2017
Programming
0
520

HTML5 WebComponents Primer

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

Avatar for Mirko Sertic

Mirko Sertic

May 06, 2017
Tweet

More Decks by Mirko Sertic

See All by Mirko Sertic
Hinter den Kulissen von SCS Architekturen
Avatar for Mirko Sertic mirkosertic
2
650
WebAssembly - ein Jahr danach
Avatar for Mirko Sertic mirkosertic
0
470
From Legacy to modern Web
Avatar for Mirko Sertic mirkosertic
0
470
Objektorientierung, Domain-Driven Design und Architectur
Avatar for Mirko Sertic mirkosertic
1
780

Other Decks in Programming

See All in Programming
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
340
ててべんす独演会〜Flowの全てを語ります〜
Avatar for てべすてん tbsten
1
220
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
Avatar for Samuel Williams ioquatix
1
150
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
200
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
200
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
Avatar for Shia riseshia
0
150
(Extension DC 2025) Actor境界を越える技術
Avatar for Himeshi teamhimeh
1
230
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
Avatar for ukitaka ukitaka
0
410
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
240
CSC509 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
Avatar for uutan1108 ohmori_yusuke
0
170

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
56
6.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
580
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k

Transcript

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

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

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

    Drag & Drop API WebComponents Cross Document Messaging

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

    Drag & Drop API WebComponents Cross Document Messaging

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

    </my-tabview> </body>

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

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

    tollen Tab Komponente</div> <div> … … </div> </template>

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

    meiner tollen Tab Komponente</div> <div> … … </div> </template>

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

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

  11. @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> 1 2

  12. @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> 1 2 3

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

    <div>Tab1</div> <div>Tab2</div>

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

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

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

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

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

    Polymer Vue.js

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

    für die Aufmerksamkeit!