$30 off During Our Annual Pro Sale. View Details »

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
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
Avatar for にー兄さん drumath2237
1
190
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
440
AIコーディングエージェント（NotebookLM）
Avatar for kondai kondai24
0
220
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
350
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
120
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
280
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
140
perlをWebAssembly上で動かすと何が嬉しいの？？？ / Where does Perl-on-Wasm actually make sense?
Avatar for mackee mackee
0
120
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
130
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
270
マスタデータ問題、マイクロサービスでどう解くか
Avatar for Kato Keisuke kts
0
120

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
150
16k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
0
94
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
130
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
23
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
73
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
26
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
1.9k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
0
950
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
0
62
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
8
35k

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