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
56
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
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
190
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
1.1k
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
280
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
710
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
120
まずはプロンプトガイドを読もう、話はそれからだ
Avatar for Akira TSURUDA kiakiraki
1
170
30年振りにコンパイラの定数整数除算を改善した
Avatar for herumi herumi
3
560
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
Avatar for yasei no otoko yasei_no_otoko
0
120
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
230
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
220
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
5
490

Featured

See All Featured
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.9k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
300
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
770
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Done Done
Avatar for chrislema chrislema
186
16k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
950
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
510
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.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