Angular Elementsで作るCustom Element

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を追加し、利用したいコンポーネントを記述

ソースを修正② AppModule - @angular/elementsからcreateCustomElementをインポート - Injector（@angular/core）をDI - ngDoBootstrapメソッドを作成 - Custom
Elementを生成して登録

ビルド 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で定義したタグ名でカスタムタグを配置する

実行

良い点 - 普通のAngularアプリがほぼそのまま動かせる - 修正の大半はモジュールに対してなので、既存アプリも変換できるかも - Scoped CSSが使える - WebComponentsのみだとShadowDOM
がサポートされていないブラウザでは Scoped CSSできない - React, Vueとの共存も可能

微妙な点 - 容量が（かなり）大きい - サンプルで200KBくらい - 複数個のCustom Elementを読み込んでしまうと致命的かも - Ivyを使って容量削減に期待
- encapsulation: ViewEncapsulation.Nativeが相変わらず Shadow DOM v0っぽい（？） - Safariで動かなかった

Thank you !!

Angular Elementsで作るCustom Element

Angular Elementsで作るCustom Element

ponday

More Decks by ponday

Other Decks in Programming

Featured

Transcript