$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lightweight custom elements
Search
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
Mathias Eckert
October 24, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
190
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
170
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
440
AIコーディングエージェント(NotebookLM)
kondai24
0
220
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
cloverrose
2
350
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
wisemuji
0
120
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
280
Go コードベースの構成と AI コンテキスト定義
andpad
0
140
perlをWebAssembly上で動かすと何が嬉しいの??? / Where does Perl-on-Wasm actually make sense?
mackee
0
120
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
130
tparseでgo testの出力を見やすくする
utgwkk
2
270
マスタデータ問題、マイクロサービスでどう解くか
kts
0
120
Featured
See All Featured
Visualization
eitanlees
150
16k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
0
94
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
130
Accessibility Awareness
sabderemane
0
23
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
73
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
26
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Code Review Best Practice
trishagee
74
19k
Paper Plane (Part 1)
katiecoart
PRO
0
1.9k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
0
950
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
0
62
WENDY [Excerpt]
tessaabrams
8
35k
Transcript
@themeckert
None
Custom Elements </>
None
Web Components Templates Shadow DOM HTML imports Custom Elements
<custom-element attribute="value"></custom-element>
<smashing-conf rocks="true"></smashing-conf>
http://giphy.com/gifs/animation-circle-of-life-3o7TKC28zKmmSvfWZq Lifecycle
Lifecycle of Custom Elements Created Attached to DOM Attribute changed
Removed from DOM
Code example (v1 syntax)
Style custom elements
Properties of custom elements - They have a lifecycle -
They can have their own scripted behaviour - They can have their own CSS styling
How do custom elements help us at AutoScout24?
We can provide a library of custom elements to other
developers without them having to write a single line of JavaScript code.
Icons
Icons
Tracking
Ads
Notifications
Ajax
Browser support?
v0
v1
None
document register element https://github.com/WebReflection/document-register-element
document register element - Very small polyfill (~5KB min+gzip) -
Support for IE8, iOS 5.1, Android 2.2
None
custom elements in action
@themeckert