ホーム自己紹介ブログ
NO.73
DATE2022. 03. 01

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 は実現できません。
フロントエンド

-

コメント

0

読み込み中...

シェアする

フォローする

購読する

次のページ

Reactを学ぶ前に歴史を知る

前のページ

オミクロン株に感染したので、分かったことを書く

関連する記事

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

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

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

2026年02月25日

AI
フロントエンド
iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド
ブラウザ
SVGを書くと数学の知識が必要だった

紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま

2026年02月17日

フロントエンド
← ブログ一覧へ