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 は実現できません。

-

シェアする

フォローする

関連する記事

タグ「フロントエンド」の記事

ヒューマンインターフェース ガイドライン という言葉を知りました。

最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい

2026-01-24

フロントエンド

AIの利用上限に達した時にすることを残しておく

主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル

2026-01-22

フロントエンド

AI

CSSで頑張らなくても、SVGで楽にできるときもある

個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの

2026-01-20

フロントエンド

← ブログ一覧へ