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
200
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
300
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
92
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
100
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
75
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
Porting a visionOS App to Android XR
akkeylab
0
340
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
6k
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
CursorはMCPを使った方が良いぞ
taigakono
1
240
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
Team operations that are not burdened by SRE
kazatohiei
1
310
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
680
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
500
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Become a Pro
speakerdeck
PRO
28
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Six Lessons from altMBA
skipperchong
28
3.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Statistics for Hackers
jakevdp
799
220k
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