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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
29
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
100
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
160
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
310
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
200
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
96
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
効率的な開発手段として VRTを活用する
ishkawa
0
160
What's new in AppKit on macOS 26
1024jp
0
150
Porting a visionOS App to Android XR
akkeylab
0
680
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
型で語るカタ
irof
0
700
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A better future with KSS
kneath
238
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
How to train your dragon (web standard)
notwaldorf
96
6.1k
A designer walks into a library…
pauljervisheath
207
24k
Six Lessons from altMBA
skipperchong
28
3.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
A Tale of Four Properties
chriscoyier
160
23k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
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