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
580
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
740
WebAssembly - ein Jahr danach
Avatar for Mirko Sertic mirkosertic
0
530
From Legacy to modern Web
Avatar for Mirko Sertic mirkosertic
0
510
Objektorientierung, Domain-Driven Design und Architectur
Avatar for Mirko Sertic mirkosertic
1
820

Other Decks in Programming

See All in Programming
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
260
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
Avatar for kotetu (kotetuco) kotetuco
0
140
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
4
370
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
8.7k
OSもどきOS
Avatar for Sora Arakawa arkw
0
600
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.8k
Go1.27で導入されるジェネリクスメソッドでできること
Avatar for mackee mackee
0
190
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
Avatar for ニフティ株式会社 niftycorp
PRO
0
230
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
310
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
22
7.6k
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
220
ランチタイムLT会3周年！ランチタイムLT会を3年間続けられたお話
Avatar for y-ohgi y0hgi
1
110

Featured

See All Featured
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
260
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
980
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
330
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
490
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
740
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
350
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
500
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
400
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k

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!