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

-

読者になる

|

シェアする

|

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

関連する記事

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

Webフロントエンドのコードレビューメモ2

また、以下の記事の続きを書こうと思います。 https://silverbirder.github.io/blog/contents/20260312/ ビジネスロジック アプリケーションのビジネスロジックに関することについて書きます。 複

2026年03月18日

フロントエンド

Webフロントエンドのコードレビューメモ

Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります

2026年03月12日

フロントエンド

AIの書いたコードの手直しを減らすお作法

AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht

2026年02月25日

AI

フロントエンド

← ブログ一覧へ