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
Angular elements - łączymy się z innymi
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Tomasz Chomicz
March 31, 2021
Programming
0
21
Angular elements - łączymy się z innymi
Tomasz Chomicz
March 31, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
ぼくの開発環境2026
yuzneri
0
240
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
130
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
310
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
310
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
200
Architectural Extensions
denyspoltorak
0
290
Patterns of Patterns
denyspoltorak
0
1.4k
CSC307 Lecture 03
javiergs
PRO
1
490
dchart: charts from deck markup
ajstarks
3
990
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
Best-Practices-for-Cortex-Analyst-and-AI-Agent
ryotaroikeda
1
110
CSC307 Lecture 07
javiergs
PRO
1
550
Featured
See All Featured
Claude Code のすすめ
schroneko
67
210k
The Pragmatic Product Professional
lauravandoore
37
7.1k
Are puppies a ranking factor?
jonoalderson
1
2.7k
The SEO Collaboration Effect
kristinabergwall1
0
350
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Color Theory Basics | Prateek | Gurzu
gurzu
0
200
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
AI: The stuff that nobody shows you
jnunemaker
PRO
2
260
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
37k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Producing Creativity
orderedlist
PRO
348
40k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
170
Transcript
None
Angular Elements Tomasz Chomicz FrontEnd Developer
Wstęp
Nie ma rzeczy uniwersalnych ?
Co to jest WebComponent ?
WebComponent ELEMENT DRZEWA DOM O ZESTAWIE CECH I ZDEFINIOWANYM ZACHOWANIU
Jakiś przykład ?
– Custom elements – Shadow DOM – HTML Templates Co
to jest WebComponents ?
Angular Elements
Przepis – Tworzymy projekt – Dodajemy @angular/elements – Tworzymy nowy
komponent
Przepis cd... – Nie zpapomnij o ... Polifil –ach (polyfills.ts)
– Tworzymy niestandardowy element – Definiujemy tag – Wmawiamy angularowi
że aplikacja wystartowała Przepis cd... Osadzamy element na stronie
Czy o czymś nie zapomniałeś?
Komponent - HTML
Komponent – TS
Komunikacja – @Input() – parsujemy wartość – @Output()– małe liter
– @HostBinding() – dbamy o zmiany atrybutów
A co ze stylami ?
Shadow DOM
Jak poradzić sobie z Shadow DOM?
Zmienne CSS
To już prawie koniec
Build
None
Thank you pgs-soft.com
[email protected]