1000ch
再利用可能なコンポーネントを Web 標準技術で実現する Web Components について、構成する技術要素、実際の使い方、導入戦略などの観点から解説しています。 内容については、不備の修正はもちろんのこと、関連する技術やノウハウの変化に合わせてアップデートをしていきます（これが電子版最大のメリットだと思っています）。 Kindle 版は https://www.amazon.co.jp/dp/B07J5R83PY からどうぞ。
目次
第1章 Web Components 1.1 Webにおけるコンポーネント 1.2 Web Componentsとは 1.3 Web Componentsを構成する技術 第2章 Custom Elements 2.1 カスタム要素の登録 2.2 ライフサイクル 2.3 プロパティの定義 2.4 JavaScriptクラスの参照 2.5 定義されるタイミングの取得 第3章 Shadow DOM 3.1 DOMのカプセル化 3.2 Shadow DOMの生成 3.3 openモードとclosedモード 3.4 <slot>要素による挿入ポイントの作成 3.5 Shadow DOMのスタイリング 第4章 ES Modules 4.1 ES2015のモジュール構文 4.2 defaultキーワードによるデフォルトエクスポート 4.3 名前付きインポートとワイルドカードキーワード 4.4 <script>要素を使ったJavaScriptモジュールのロード 第5章 実際の使い方 5.1 Custom ElementsとShadow DOMの連携 5.2 ライフサイクルを利用した振る舞いの定義 5.3 lit-htmlを使ったShadow Root配下の更新 第6章 導入戦略 6.1 既存のUIライブラリとの組み合わせ 6.2 ブラウザのサポート状況 6.3 webcomponents.jsを使ったポリフィル 6.4 ES Modulesのフォールバック
読んだ人の感想
よくわかる Web Components読み終わった。ページ数が多くないから2時間かからずサクッと読みきれた。Custom ElementsとShadow DOMについてさくっと知りたい人にとてもおすすめ！ https://twitter.com/toshi__toma/status/1059424493750300673 「よくわかるWeb Components」、控えめに言って良書だ… https://twitter.com/40balmung/status/1056438838422204416 「よくわかるWeb Components」読了。めっちゃわかりやすかった。ReactやVueとか使わずにComponentを作って再利用できるの素敵。しかもReactなどと共存することもできる。ちょっと組み込んでみたい https://twitter.com/40balmung/status/1056438739780612097 「Shogo Sensui」(@1000ch)さんの「よくわかるWebComponents」読んだー WebComponentsを勉強しようと思ったら少し物足りないかもしれない けど何がわからないかもわからない自分としては助かった 一度読んだだけじゃ身につかないから何度か読み返そうと思います https://twitter.com/knyock/status/1058668656349995009 技術書典5で購入した「よくわかるWeb Components」という本を読みながら作りました まとまっている + 実際にどうやってWeb Componentsを使うかまで書いてあったのでとても良い本でした https://twitter.com/henteko07/status/1049667722034835456 よくわかるWeb Components、よくわかった https://twitter.com/_rendoh/status/1049544754025750528 @1000ch さんの「よくわかるWeb Components」読んだ。丁寧に書かれててすごい読みやすかった！あとは本とかでまとまってるとやっぱり理解しやすいんだなと思いました #技術書典5 https://twitter.com/remylii/status/1049210012839497730