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
570
0

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

More Decks by Mirko Sertic

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

Other Decks in Programming

See All in Programming
実用！Hono RPC2026
Avatar for yodaka yodaka
2
290
ソフトウェア設計の結合バランス #phperkaigi
Avatar for Takuma Kajikawa kajitack
0
170
GNU Makeの使い方 / How to use GNU Make
Avatar for kaityo256 kaityo256
PRO
16
5.6k
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
2.5k
Back to the roots of date
Avatar for jinroq jinroq
0
620
個人的に嬉しかったpnpmの新機能・3選
Avatar for Atsushi Matsuo matsuo_atsushi
0
120
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
950
PCOVから学ぶコードカバレッジ #phpcon_odawara
Avatar for hideki kinjyo o0h
PRO
0
290
AIと共に生きる技術選定 2026
Avatar for Sugar Sato sgash708
0
120
UIの境界線をデザインする | React Tokyo #15 メイントーク
Avatar for SASAPIYO sasagar
2
410
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
5
520
ついに来た！本格的なマルチクラウド時代の Google Cloud
Avatar for maroon1st maroon1st
0
340

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
1
210
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
220
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
170
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
460
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
360
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
380
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
280
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
270
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
110
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k

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!