Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Lightweight custom elements

Avatar for Mathias Eckert Mathias Eckert
October 24, 2016
Programming
60
0

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

Other Decks in Programming

See All in Programming
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
2
630
IBM Bob でAI駆動開発『QC-Playbook』
Avatar for 1kano ichirokano2
0
110
AI主導のプログラミング学習アプリを作ってみた
Avatar for econanringo econanringo
0
180
3回つくってわかった、
定期実行ジョブ基盤の本質情報
Avatar for Naoto Takai takai
0
450
パスワード再設定メールのURLについて知っておこう
Avatar for uyuki uyuki234
0
160
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
190
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
190
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
750
ChromeでローカルLLM
Avatar for ryu ryu1013
0
140
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
530
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
180
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
110

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
516
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
970
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
570
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.2k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Design in an AI World
Avatar for tapps tapps
1
350
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
520
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k

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