Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Workshop: Angular Elements @AngularInDepth 2019...
Search
Manfred Steyer
PRO
June 15, 2019
Programming
0
270
Workshop: Angular Elements @AngularInDepth 2019, Kiev
Manfred Steyer
PRO
June 15, 2019
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
98
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
2.4k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Porting a visionOS App to Android XR
akkeylab
0
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
XP, Testing and ninja testing
m_seki
3
220
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
490
PicoRuby on Rails
makicamel
2
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
360
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
730
エンジニア向け採用ピッチ資料
inusan
0
180
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Faster Mobile Websites
deanohume
307
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Bash Introduction
62gerente
614
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Agile that works and the tools we love
rasmusluckow
329
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Transcript
@ManfredSteyer Workshop: A Deep Look into Angular Elements Manfred Steyer
SOFTWAREarchitekt.at ManfredSteyer
@ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz
✓ 64 KB RAM ✓ Disks with 170 KB
@ManfredSteyer Version with two cores ;-) Challenge: Resources!
@ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10
+/- yrs
@ManfredSteyer There are milk products lasting longer than some JavaScript
frameworks
@ManfredSteyer Web Components
@ManfredSteyer Contents • Web Components 101 • Web Components with
Angular Elements • Polyfills • Dynamically Adding Web Components • Loading External Web Components
@ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular
Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 8 Manfred Steyer Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at
@ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements
Omnipresent in Angular Baked-in: @Component(encapsulation: …) Angular Elements
@ManfredSteyer DEMO
@ManfredSteyer All this can be polyfilled down to IE11 (more
or less)
@ManfredSteyer Polyfill
@ManfredSteyer Selected Polyfills loader • Custom Elemens • Shadow DOM
es5-adapter • For browsers that DO support custom elements • Alternative: Differential Loading
@ManfredSteyer DEMO
@ManfredSteyer Labs https://www.softwarearchitekt.at/labs/AngularInDepth/
@ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to
V • Web Components with Angular Ivy in 6 Steps
@ManfredSteyer Summary Polyfills Custom_Element_Schema Angular Elements Shadow DOM Dynamically Adding
Dynamically Loading
@ManfredSteyer Contact and Downloads [mail]
[email protected]
[web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d Blog about this stuff Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at