Web Components を学ぶべく、昨年の 技術書典5 で販売されていた 1000ch さんの本を買って読んでみました。
2時間程度で読み切れるので、Web Components 全く知らない状態から概要を理解するのにはとても良い本だと思います。
自分は Web Components がどういうものかぐらいは知っている状態で読んだけど、第1章で Web Components を採用するメリットや構成技術について再確認できたし、続く第2章以降で実際のコードを見ながら学べたのはよかったです。
そして、この本を読んだ後に昨年の HTML5 Conference 2018 のこのスライドを見返すとより一層理解が深まりました。
(Conference 当日にセッションを聴いていたが、そのときはほとんど理解できてなかった)
コードを写経したものは↓にあげておきます。
本書で学べること
- Web Components およびそれらを構成する Cutome Elements、Shadow DOM、ES Modules とはどういう技術か
- 実際に生のJavaScriptで Web Components を書くとどんな感じか
- 名前しか知らなかった lit-html がどんな役割を果たしているのか
次に勉強するなら
最近リリースされた Ionic 4 が、Angular 以外の UI ライブラリもサポートするために Web Components で実装したみたいな話を聞いて、そしてそれには Stencil.js という TS + JSX で Web Components 作れるライブラリを使用してるらしいので気になっています。
参考:Introducing Ionic 4: Ionic for Everyone | The Ionic Blog
あとは https://www.webcomponents.org/ でコンポーネントのサンプルを眺めてみるとか。
以下、学習メモ
第1章
- Web Components とは
- 部品の本質的な再利用を、web標準技術で可能にする概念
- メリット
- ブラウザネイティブで動作する
- ツールやライブラリに依存しない
- 既存プロジェクトの技術と競合しにくい(ReactなどのUIライブラリと共存できる)
- Shadow DOMによる本質的なスコープ
- 構成技術
- Custom Elements
- Shadow DOM
- ES Modules
第3章
- 3.2
attachShadow()
できるDOM要素は限定されている- article
- aside
- blockquote
- body
- div
- h1, h2, ... , h6
- header, main, footer
- p, section, span, nav
- ref. https://dom.spec.whatwg.org/#dom-element-attachshadow
- 3.4
<slot>
要素を使うと、ホスト要素の子要素をShadow DOM内に挿入できる
<div> #shadow-root <slot><!-- ここには2つの<p>が入る --></slot> <slot name="foo"><!-- ここには<button>が入る --></slot> <p>Inserted into default slot</p> <p>Also inserted into default slot</p> <button slot="foo">Inserted into slot[name=foo]</button> </div>
第4章
- 4.4
<script nomodule src=...>
とすると、ES Modulesに対応していない環境でのみスクリプトが読み込まれる<script type="module">
と併用できる
第5章
- 5.3 lit-html
- Polymer チームが開発
- 仮想DOMのような仕組みを使って効率よくDOMを更新できる
html`<div>...`
でテンプレートを記述しrender(this.template, this.shadowRoot)
で render する