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
290
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.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
410
これまでのReact、これからのReact
honda
0
300
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
660
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
670
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
780
Other Decks in Programming
See All in Programming
JavaOne 2025: Advancing Java Profiling
jbachorik
1
320
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
160
WordPress Playground for Developers
iambherulal
0
120
エンジニア未経験が最短で戦力になるためのTips
gokana
0
210
Return of the Full-Stack Developer
simas
PRO
1
320
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
420
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
360
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1.1k
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
750
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
ミリしらMCP勉強会
watany
2
400
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Agile that works and the tools we love
rasmusluckow
328
21k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Being A Developer After 40
akosma
90
590k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
For a Future-Friendly Web
brad_frost
176
9.6k
How GitHub (no longer) Works
holman
314
140k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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 !!