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
310
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.3k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
690
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
710
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
830
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
120
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
910
tool ディレクティブを導入してみた感想
sgash708
1
150
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
260
コンテキストエンジニアリング Cursor編
kinopeee
1
720
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
350
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
300
コーディングエージェント時代のNeovim
key60228
1
110
A Gopher's Guide to Vibe Coding
danicat
0
180
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
210
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
650
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Docker and Python
trallard
45
3.5k
GitHub's CSS Performance
jonrohan
1031
460k
A designer walks into a library…
pauljervisheath
207
24k
The Cult of Friendly URLs
andyhume
79
6.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Bash Introduction
62gerente
614
210k
Facilitating Awesome Meetings
lara
55
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
KATA
mclloyd
32
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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 !!