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

Lightweight custom elements

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Mathias Eckert Mathias Eckert
October 24, 2016
Programming
0
56

Lightweight custom elements

You can find the live example here: http://codepen.io/meckert/pen/kkVOWJ?editors=1000#0

Avatar for Mathias Eckert

Mathias Eckert

October 24, 2016
Tweet

Other Decks in Programming

See All in Programming
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
930
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
AI & Enginnering
Avatar for codelynx codelynx
0
110
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
700
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
680
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
190
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.4k

Featured

See All Featured
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
180
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
750
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k

Transcript

  1. @themeckert

  2. None

  3. Custom Elements </>

  4. None

  5. Web Components Templates Shadow DOM HTML imports Custom Elements

  6. <custom-element attribute="value"></custom-element>

  7. <smashing-conf rocks="true"></smashing-conf>

  8. http://giphy.com/gifs/animation-circle-of-life-3o7TKC28zKmmSvfWZq Lifecycle

  9. Lifecycle of Custom Elements Created Attached to DOM Attribute changed

    Removed from DOM

  10. Code example (v1 syntax)

  11. Style custom elements

  12. Properties of custom elements - They have a lifecycle -

    They can have their own scripted behaviour - They can have their own CSS styling

  13. How do custom elements help us at AutoScout24?

  14. We can provide a library of custom elements to other

    developers without them having to write a single line of JavaScript code.

  15. Icons

  16. Icons

  17. Tracking

  18. Ads

  19. Notifications

  20. Ajax

  21. Browser support?

  22. v0

  23. v1

  24. None

  25. document register element https://github.com/WebReflection/document-register-element

  26. document register element - Very small polyfill (~5KB min+gzip) -

    Support for IE8, iOS 5.1, Android 2.2
  27. None

  28. custom elements in action

  29. @themeckert