Web Componentsの良さ

Web Components を人にお勧めしたいんです。メリット・デメリットをかんたんにまとめたいと思います。

Web Components is 何

https://www.webcomponents.org/specs より引用します。

Web components is a meta-specification made possible by four other specifications:
The Custom Elements specification
The shadow DOM specification
The HTML Template specification
The ES Module specification

WebComponents は、ブラウザの 4 つの API で実現可能となるメタ仕様です。

These four specifications can be used on their own but combined allow developers to define their own tags (custom element), whose styles are encapsulated and isolated (shadow dom), that can be restamped many times (template), and have a consistent way of being integrated into applications (es module).

div や span といった HTML タグがブラウザ標準にありますが、WebComponents は、独自のタグを定義することができます。

メリット

• 環境適合性
  • フレームワークに依存しないので、Rails など Web フレームワークへの適用が容易です。
• 軽量
  • ブラウザ API のみ使用するので、ロードするアセットはありません。
• シンプル
  • HTML タグを使う要領で、WebComponents を使います。
• サンドボックス
  • Shadow DOM のおかげで、CSS のスタイルが独自のタグの外に漏れません。

デメリット

• パフォーマンス
  • React のような描画最適化は、ありません。
• 機能性
  • ブラウザ API の影響を、受けます。
• SEO
  • Web Components は Javascript 実行が必須です。そのため、SSR は実現できません。