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で作るCustom Element
Search
ponday
May 24, 2018
Programming
0
280
Angular Elementsで作るCustom Element
俺の話を聞け!!LT大会 #9(2018/05/24)発表資料です。
ponday
May 24, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.1k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
400
これまでのReact、これからのReact
honda
0
290
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
650
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Other Decks in Programming
See All in Programming
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
Unity Android XR入門
sakutama_11
0
140
GAEログのコスト削減
mot_techtalk
0
110
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
技術を根付かせる / How to make technology take root
kubode
1
240
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Making Projects Easy
brettharned
116
6k
Building an army of robots
kneath
302
45k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Designing for humans not robots
tammielis
250
25k
RailsConf 2023
tenderlove
29
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
GitHub's CSS Performance
jonrohan
1030
460k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Transcript
Angular Elementsで作るCustom Element 俺の話を聞け!!LT大会 #9 / May 24, 2018 ponday(@ponday_dev)
Profile Honda, Yusuke (@ponday_dev) 株式会社ベガコーポレーション エンジニア ng-fukuoka Like : TypeScript,
RxJS, Angular, Python, Kotlin 元々サーバサイド 趣味フロントエンドエンジニア 最近の仕事では画像処理とか機械学習とか お仕事あればお声掛けください!
Custom Elements ?
Custom Elements - WebComponentsの仕様の一つ - 自分で独自にHTMLタグが作れる - 以前発表した資料があるので説明はそちらに
(ご参考) WebComponentsの現在地 https://speakerdeck.com/honda/web-componentsfalsexian-zai-di
@angular/elements - Angularを利用してCustom Elementが作れる - コンポーネントではなく、AngularアプリをそのままCustom Element化
準備 ここまで通常のAngularプロジェクトと同じ
準備
ここからソースに手が入る
ソースを修正① AppModuleのデコレータ - 利用しないコンポーネントを削除 - bootstrap: [ … ]の表記を削除 -
entryComponentsを追加し、利用したいコンポーネントを記述
None
ソースを修正② AppModule - @angular/elementsからcreateCustomElementをインポート - Injector(@angular/core)をDI - ngDoBootstrapメソッドを作成 - Custom
Elementを生成して登録
None
None
None
ビルド ng build --prod --output-hashing=none 通常のビルドとコマンドは同じ ※ --output-hashingは必須ではない
ファイルを統合 - このままでも以下のファイルがあれば動く - main.js - polyfills.js - scripts.js -
runtime.js - 複数ファイルに分かれていると面倒なのでまとめる cat dist/elements-demo/{runtime,polyfills,scripts,main}.js > element.js
使ってみる - 生成したelement.jsを読み込み - customElement.defineで定義したタグ名でカスタムタグを配置 する
None
実行
良い点 - 普通のAngularアプリがほぼそのまま動かせる - 修正の大半はモジュールに対してなので、既存アプリも変換できるかも - Scoped CSSが使える - WebComponentsのみだとShadowDOM
がサポートされていないブラウザでは Scoped CSSできない - React, Vueとの共存も可能
微妙な点 - 容量が(かなり)大きい - サンプルで200KBくらい - 複数個のCustom Elementを読み込んでしまうと致命的かも - Ivyを使って容量削減に期待
- encapsulation: ViewEncapsulation.Nativeが相変わらず Shadow DOM v0っぽい(?) - Safariで動かなかった
Thank you !!