Libx Awesomeリスト

    このページの内容

    Awesome Web Components

    Web Componentsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    概要

    標準

    Custom Elements

    Custom Elementsは、独自の完全な機能を持つDOM要素を作成する手段を提供します。

    Shadow DOM

    Shadow DOMは、複数のDOMツリーを一つの階層へ組み合わせ、文書内で相互作用させる方法を定め、DOMの構成を改善します。

    HTML Templates

    <template>要素は、スクリプトで複製して文書へ挿入できるHTML断片を宣言するために使います。

    CSS Shadow Parts

    CSS Shadow Partsは、スタイル設定のためにShadow DOM内部の特定要素を公開できるようにします。

    ガイド

    アクセシビリティ

    ベストプラクティス

    コードラボ

    例

    • generic-components - アクセシビリティと使いやすさに焦点を当てた、一般的なウェブコンポーネントのコレクション。
    • howto-components - 一般的なウェブUIパターンを実装したウェブコンポーネントのコレクション。
    • Nude UI - アクセシブルでカスタマイズ可能かつ極めて軽量なウェブコンポーネントのコレク及。
    • open-wc code examples - ウェブコンポーネントを開発するためのベストプラクティスとデザインパターンのコレクション。
    • vanilla-retro-js - HTMLの非推奨タグを対象とした、純粋なJavaScriptによるUIコンポーネントライブラリ。
    • web-components-examples - MDNウェブコンポーネントドキュメンテーションに関連するウェブコンポーネントの例のシリーズ。

    記事

    アーキテクチャ

    相互運用性

    制約

    スタイル設定

    実利用

    事例

    コンポーネント

    • <active-table> - 編集可能なテーブルウェブコンポーネント。
    • <api-viewer> - Web ComponentsのAPIドキュメンテーションとライブプレイヤー。
    • <chess-board> - 独立したチェスボードウェブコンポーネント。
    • <css-doodle> - CSSでパターンを描画するためのウェブコンポーネント。
    • <dark-mode-toggle> - ダークモードのスイッチやトグルを作成できるカスタム要素。
    • <deep-chat> - AI機能を備えたチャットウェブコンポーネント。
    • <emoji-picker> - 軽量なエモジピッカー（ウェブコンポーネントとして配布）。
    • <fg-modal> - アクセシブルなモーダルダイアログウェブコンポーネント。
    • <file-viewer> - Svelteで構築されたファイルを表示するウェブコンポーネント。
    • <json-viewer> - JSONデータをツリー表示するためのウェブコンポーネント。
    • <lite-youtube> - 視覚的なパフォーマンスに注目した軽量YouTube埋め込み。
    • <midi-player> - MIDIファイルプレイヤーおよびビジュアライザウェブコンポーネント。
    • <model-viewer> - インタラクティブな3Dモデルをレンダリングするためのウェブコンポーネント。
    • <notectl-editor> - プラグインアーキテクチャ、不変状態、ゼロ設定フレームワーク対応の現代的な豊富なテキストエディタ。
    • <pdfjs-viewer-element> - PDF.js のデフォルトビューを埋め込むカスタム要素
    • <phantom-ui> - 実際の DOM のサイズを測定して、それに合わせたシャイマープレースホルダーをレンダリングするスケルトンローダー
    • <player-x> - メディアプレイヤーのウェブコンポーネント
    • <progressive-image> - 画像プレースホルダーを段階的に強化するカスタム要素
    • <qr-code> - カスタマイズ可能でアニメーション可能な SVG 基盤の QR コードをレンダリングするウェブコンポーネント
    • <range-slider> - キーボード対応のアクセシブルな範囲スライダーのカスタム要素
    • <rapi-doc> - OpenAPI スペックからドキュメンテーションを作成するウェブコンポーネント
    • <shader-doodle> - シェーダーを書く・レンダリングするウェブコンポーネート
    • <theme-switch> - ライト、ダーク、システムテーマの切り替えを可能にするアニメーション付きトグルボタン
    • <trix-editor> - 日常的な文章作成に使える豊かなテキストエディタのカスタム要素
    • <vime-player> - カスタマイズ可能で拡張可能でフレームワークに依存しないメディアプレイヤー
    • <web-vitals> - 自作要素で web vitals をページに迅速に導入してください。

    コンポーネントライブラリ

    • AgnosticUI - CLIベースのUIコンポーネントライブラリ。Litウェブコンポーネントをプロジェクトに直接コピー。ReactおよびVue用のネイティブフレームワーク体験を提供する完全なラッパー。
    • AMP - ユーザー中心のウェブサイト、ストーリー、広告、メールなどを作成しやすいウェブコンポーネントフレームワーク
    • AnywhereUI - フレームワークバインディングを含む豊かなウェブコンポーネントのコレクション。StencilJSで作成。
    • Apollo Elements - Apollo GraphQL とさまざまなウェブコンポーネントライブラリを組み合わせるカスタム要素
    • AXA Pattern Library - AXA CH がWeb Componentsで構築したUIコンポーネントライブラリ
    • Blackstone UI - Blackstone Publishingが開発したインターフェースを作成するウェブコンポーネント
    • Blaze UI Atoms - Blaze CSS で駆動されたウェブコンポーネントのセット
    • Brightspace UI core - Brightspaceアプリケーションを作成するためのウェブコンポーネントのコレクション
    • Burnish Components - MCPツール呼び出し出力のUIをレンダリングするウェブコンポーネント
    • Clever components - Clever Cloud が開発したウェブコンポーネントのコレクション
    • Curvenote - インタラクティブな科学記事を作成するためのウェブコンポーネント
    • DataFormsJS - SPAルーティング、ウェブサービスからのデータ表示など、独立したコンポーネント
    • Dile Components - ウェブサイトおよびアプリケーション向けの一般用途ウェブコンポーネント
    • elements-sk - 「a la carte」ウェブ開発に用いるカスタムエレメントのコレクション
    • github-elements - GitHubのウェブコンポーネントコレクション
    • Elix - 一般的なユーザーインターフェースパターンに最適な、高品質かつカスタマイズ可能なウェブコンポーネント
    • Furo Webcomponents - Eclipse Furo と最適に連携する企業向けウェブコンポーネントセット
    • Fusion Web Components - Equinor Fusion が使用するウェブコンポーネントシリーズ
    • Ignite UI Web Components - Infragistics から提供されるUIコンポーネントの完全なライブラリ
    • Immersive Custom Elements - 浸透型（VR＆AR）コンテンツを埋め込むためのウェブコンポーネントセット
    • Joomla UI custom elements - Joomla 4 カスタムエレメントのコンパイル
    • Ketch.UP - Sme.UP 用のウェブコンポーネントライブラリ
    • LDRS - 軽量かつカスタマイズ可能なロードアニメーション／スピナー
    • Lion Web Components - 非常にパフォーマンスが高く、アクセシブルで柔軟なウェブコンポーネントのセット
    • LRNWebComponents - ELMS:LN が生成したプロジェクト用のウェブコンのセット
    • Lume - 3Dグラフィックス向けカスタムエレメント。Three.js でWebGL/WebGPUレンダリング、Solid.js で反応性とテンプレートを実現
    • Medblocks UI - openEHRおよびFHIRシステムの迅速開発に用いるウェブコンポーネント
    • Microsoft Graph Toolkit - Microsoft Graph向けのウェブコンポーネのコレクション
    • Mutation testing elements - ウェブコンポーネントで可視化するための変更テスト結果のスキーマ
    • Nightingale - 生命科学分野向けのデータ可視化ウェブコンポーネント
    • Nuxeo Elements - Nuxeoでウェブアプリケーションを構築する際に使用するウェブコンポーネント
    • One Platform Components - Red Hat One Platform向けのウェブコンポーネントセット
    • Open Business Application Platform Web Components - ビジネスアプリケーション向けのウェブコンポーネントコレクション
    • Pixano Elements - データアノテーションタスクに特化した再利用可能なウェブコンポーネント
    • PlayCanvas Web Components - PlayCanvasエンジンで構築する3Dインタラクティブウェブアプリ向けのカスタムエレメント
    • Playground Elements - サーバレスコード体験用のウェブコンポーネント
    • Shoelace - 未来志向のウェブコンポーネントライブラリ
    • Smart Web Components - ビジネスアプリケーション向けのウェブコンポーネント
    • Stripe Elements - Stripe.js v3 Elements向けのカスタムエレメントワッパー
    • TEI Publisher Components - TEI Publisherおよびその生成アプリケーションで使用されるウェブコンポーネントコレクション
    • Titanium Elements - Leavitt Group Enterprisesが使用する軽量ウェブコンポーネのコレクション
    • Tradeshift Elements - Tradeshift UIコンポーネントをウェブコンポーネントとして再利用
    • TrendChart Elements - シンプルで軽量かつレスポンシブなチャートを生成するコンポーネント
    • Umbraco UI Components - Umbraco CMS向けのユーザーインターフェースウェブコンポーネントコレクション
    • Vaadin components - ビジネスウェブアプリケーション構築向けの高品質ウェブコンポーネントの進化セット
    • VSCode Webview Elements - Webview APIを使用するVSCode拡張機能を構築するためのコンポーネント
    • Warp View - Warp 10向けのチャートウェブコンポーネントコレクション
    • Webmarkets web components - Webmarketsの公開ウェブコンポーネントセット
    • Wired Elements - 手描き風のスケッチスタイルを持つ共通UI要素のセット
    • Wokwi Elements - アーロンドと各種電子部品向けのウェブコンポーネント
    • XWeather - OpenWeatherMap APIの一部を実装したウェブコンポーネントのコレクション

    デザインシステム

    • Astro Space UX Design System - 確立されたインタラクションパターンを活用した、豊かな宇宙アプリ体験を構築するためのコンポーネントセット
    • Auro Design System - アルスカエアラインズのデザインシステムでアイデアを革新し、未来を共同で創出
    • Blueprint UI - 柔軟で軽量なウェブコンポーネントを備えたウェブコンポーネントベースのデザインシステム
    • Bolt Design System - Twigとウェブコンポーネドを活用したUIコンポーネント、再利用可能な視覚スタイルおよびツールセット
    • Calcite Components - EsriのCalciteデザインフレームワークに共通するウェブコンポーネント
    • Carbon Web Components - Web Componentsに基づくCarbonデザインシステムのバリエーション
    • Clarity Core Web Components - Clarityデザインシステムからなるウェブコンポーネントのセット
    • Crayons - Freshworksデザインシステムに準拠したウェブコンポーネントのコレクション
    • FAST Components - FASTデザイン言語に基づくウェブコンポーネントのライブラリ
    • Fluent UI Web Components - MicrosoftのFluentデザイン言語をサポートするウェブコンポーネントのライブラリ
    • Forge Components - Forgeデザインシステムに準拠するウェブコンポーネントのライブラリ
    • GOV.UK Web Components - GOV.UKデザインシステムを消費する、エンカプセルされたウェブコンポーネントのセット
    • Helix UI - Helixデザインシステム向けのウェブコンポーネントライブラリ
    • Liquid - Liquidデザインシステムに基づくUIコンポーネントライブラリ
    • Lyne Components - Lyneデザインシステムの構成要素はウェブコンポーネントに基づいている
    • Material Web Components - Material Designをウェブコンポーネントとして実装
    • Momentum UI Web Components - Momentumデザインに基づくUIコンポーネントのセット
    • Nord - Nordhealthの製品・デジタル体験・ブランド向けデザインシステム
    • NuML | NUDE Elements - Web Components と実行時 CSS 生成をベースとした HTML フレームワークおよびデザインシステム
    • NVIDIA Elements - AI/ML ファクトリー、ロボティクス、自律自動車向けのデザイン言語および UI アグリーティング
    • OutlineJS - Web Components をベースとしたデザインシステムのスタートキット
    • PatternFly Elements - 統一デザインキットをベースにした柔軟かつ軽量な Web Components のコレクション
    • Pharos Design System - JSTOR のデザインシステムによる統一的でサポート的で美しい体験の実現
    • Red Hat Design System - Red Hat ブランドによる一貫した体験を構築するための Web Components
    • Siemens iX Web Components - Siemens iX デザインシステムを実装した Web Components
    • Spectrum Web Components - Adobe Spectrum デザイン言語を Web Components で実装
    • UI5 Web Components - SAP Fiori デザインガイドラインを実装した再利用可能な UI 要素のセット
    • U-M Library Design System - ミシガン大学図書館デザインシステム
    • Zooplus web components - Z+ ショップスタイルガイドを実装したウェブコンポーネントのセット

    ユースケース

    ライブラリ

    クラスベース

    • DNA - プログレッシブウェブコンポーネントライブラリ
    • element-js - シンプルで軽量なWebコンポーネントベースクラスと美しいAPI
    • FAST Element - パフォーマンスが高く、メモリ効率が良く、標準に適合したWebコンポーネのための軽量ライブラリ
    • Forge Core - Forge Web Components を構築する際に使用される構成要素とユーティリティ
    • Joist - 最小限の機能を追加するための小さなライブラリのセットで、開発者の生産性を高める
    • Lit - 高速かつ軽量なWebコンポーネントを構築するためのシンプルなライブラリ
    • Lightning Web Components - 極めて高速で企業レベルのWebコンポーネント基盤
    • Lume Element - Solid.js のシグナルとエフェクトによって反応性とテンプレートを備えたカスタムエレメントの作成
    • Omi - 4kb JavaScriptによる次世代ウェブフレームワーク（Web Components + JSX + Proxy + Store + Path Updating）
    • Panel - ウェブコンポーネント＋バーチャルDOM：強力なUI用のウェブ標準
    • ReadyMade - デコレーターを使ってカスタムエレメントクラスを書く。依存関係なし
    • slim.js - 現代の標準に基づく高速かつ堅牢なフロントエンドマイクロフレームワーク
    • Stencil - ウェブコンポーネントを生成するコンパイラ
    • Tonic - 極めてシンプルで安定し、審査に適したコンポーネントフレームワーク
    • WebCell - VDOM、JSX、MobXおよびTypeScriptに基づくウェブコンポーネントエンジン

    関数型

    • atomico - 関数とハックを使ってウェブコンポーネントベースのインターフェースを作成するための小さなライブラリ
    • Elemento - シグナルとLitを使って機能的なウェブコンポーネントを作成するための軽量ライブラリ
    • haunted - ReactのHooks APIをウェブコンポーネントに実装
    • hybrids - シンプルかつ機能的なAPIでウェブコンドメインを作成するためのUIライブラリ
    • Solid Element - Solidにカスタムウェブコンポーネントと拡張を追加するライブラリ

    統合

    • ember-custom-elements - カスタムエレメントを使ってEmberおよびGlimmerのコンポーネントをレンダリング
    • preact-custom-element - Preactコンポーネントからカスタムエレメントを生成／登録
    • @adobe/react-webcomponent - Reactコンポーネントをカスタムエレメントに自動的にラップ
    • nuxt-custom-elements - プロジェクトのコンポーネントをカスタムエレメントとして外部ページに統合できるようにエクスポート
    • react-shadow - ReactでシャドウDOMを使用し、スタイルの封じ込めのすべてのメリットを享受
    • reactify-wc - Reactのプロパティと関数を使ってウェブコンポーネントを使用
    • remount - カスタムエレメントを使ってReactコンポーネントをDOMにマウント
    • @riotjs/custom-elements - Riot.jsを使ってシンプルなAPIでオリジナルのカスタムエレメントを作成

    ベンチマーク

    フレームワーク

    Angular

    React

    Vue

    Svelte

    エコシステム

    メタフレームワーク

    • AMP - Webコンポーネントフレームワークで、ユーザー中心のウェブ体験を簡単に作成できる。
    • Enhance - Web標準に基づくHTMLフレームワークで、軽量なウェブアプリケーションを構築できる。
    • luna-js - WebComponents標準との対話がスムーズになるSSRフレームワーク。
    • Rocket - 静的サイト向けの現代的なウェブセットアップにJavaScriptを少し加えたもの。
    • Web Components Compiler - ネイティブWebコンポーネのサーバー側レンダリングを簡単にするコンパイラ。
    • WebC - フレームワークに依存しないスタンドアローンHTMLシリアライザで、Webコンポーネントのマーカップを生成できる。

    スターターキット

    • Create Open Web Components - Webコンポーネントプロジェクトのスケルトンを作成するツール。
    • custom-element-boilerplate - カスタムエレメントを作成するためのボイラープレート。
    • hello-web-components - TypeScriptで書かれたシンプルなスタートアップ「hello world」Webコンポーネント。
    • nutmeg - vanilla Webコンポーネントのビルド、テスト、公開を、少しのスパイスで行う。

    テストソリューション

    ツール

    • Backlight - 開発者とデザイナーの協働を意識したBacklightは、チームがデザインシステムを構築・ドキュメント化・公開・拡張・維持できる非常に包括的なコーディングプラットフォームです
    • Custom Elements Locator - ページ上のカスタム要素を検索するChrome拡張機能
    • @storybook/web-components - シンプルなウェブコンポーネントスニペット向けのUI開発環境
    • webcomponents.dev - ウェブプラットフォーム開発者向けのコンポーネントIDE
    • web-component-analyzer - ウェブコンポーネントを分析し、ドキュメントや診断情報を出力するCLI
    • Web Components Codemods - ウェブコンポーネのCodemods

    書籍

    チュートリアル

    知見

    ポッドキャスト

    プレゼンテーション

    講演

    利用統計

    提案仕様

    フォーム関連Custom Elements

    構築可能なStylesheetオブジェクト

    カスタム状態疑似クラス

    その他

    • bruck - ウェブコンポーネントとハウディニーパインAPIを用いて構築されたプロトタイピングシステム
    • Vaadin Directory - ウェブコンポーネントを公開・議論・評価
    • webcomponents.org - ウェブコンポーネントを議論・共有

    アーカイブ

    polyfill

    現代のブラウザーは、以下のpolyfillなしでWeb Components標準をサポートします。 主な例外は、WebKit（Safari）がカスタマイズされた組み込み要素を受け入れないことです。

    Custom Elements polyfill

    カスタマイズされた組み込み要素のpolyfill

    Shadow DOM shim

    HTML Templates polyfill

    歴史

    以下の記事は、Web Components仕様が標準化へ至る長い経緯を示します。 一部は初期の「v0」Shadow DOM／Custom Elements仕様や、廃止されたHTML Imports仕様を扱います。 これらは歴史的資料としてのみ残され、年別に時系列で掲載されています。

    2019

    2018

    2017

    2016

    2015

    2014

    2013

    2012

    2011

    フォロー推奨

    Polymer
    Stencil
    open-wc.org
    webcomponents.dev
    Justin Fagnani
    Viljami Salminen
    Jan Miksovsky
    Serhii Kulykov

    メンテナー