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
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
The Cult of Friendly URLs
andyhume
79
6.5k
Fireside Chat
paigeccino
37
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Faster Mobile Websites
deanohume
307
31k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Designing for Performance
lara
610
69k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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 !!