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
300
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
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
PicoRuby on Rails
makicamel
2
130
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
ニーリーにおけるプロダクトエンジニア
nealle
0
840
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.2k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Featured
See All Featured
Done Done
chrislema
184
16k
Rails Girls Zürich Keynote
gr2m
95
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Automating Front-end Workflow
addyosmani
1370
200k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Embracing the Ebb and Flow
colly
86
4.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Writing Fast Ruby
sferik
628
62k
Being A Developer After 40
akosma
90
590k
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 !!