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

Lightweight custom elements

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.5k
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.5k
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
150
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
260
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
150
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
340

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
220
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
53
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
130
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
580
Building an army of robots
Avatar for Kyle Neath kneath
306
46k

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