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
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
『品質』という言葉が嫌いな理由
korimu
0
160
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Unity Android XR入門
sakutama_11
0
140
WebDriver BiDiとは何なのか
yotahada3
1
140
Grafana Cloudとソラカメ
devoc
0
140
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Featured
See All Featured
Designing for Performance
lara
604
68k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
The Language of Interfaces
destraynor
156
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
YesSQL, Process and Tooling at Scale
rocio
171
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Code Review Best Practice
trishagee
66
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Facilitating Awesome Meetings
lara
51
6.2k
Building an army of robots
kneath
302
45k
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 !!