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

Lightweight custom elements

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
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
450
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
280
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
260
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
830

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
88
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
99
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
98
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
310
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
680
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k

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