Web Components
主に以下の3つの組み合わせたものの総称
説明上、ES Modulesも含まれることもあるっぽい ref
参考
例もあって概要がわかりやすい
>#WIP
Web ComponentsはいくつかのWeb標準の総称
HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群
ReactなどのComponent設計と同じことをLibraryを使わずにできる
sample
やたら絵文字が降ってくるサイト
<emoji-rain>というタグを定義している
ReactユーザーのためのWeb Componentsみたいな文章で、サッと説明してほしい
Reactを知っている人向けのWeb Componentsの説明を誰かしてくれ
何がどう優れていて、
お互いがコンフリクトする感じでもなくて、
みたいな話をしてほしい
誰がどういうモチベで使うの?
Reactなどを使わずに、これを利用する理由は？
Reactに比べて何が嬉しい？
仮想DOM?
JSは関係ある？
JSには依存しない？
めちゃめちゃ関係ある
動かすにはbundlerとかが必要？それともbrowserのみで観血する？
webpackとか？
既にどんなブラウザでも使える？
例を見たい
例えば、twigと組み合わせる、といったことはできるの？
流れ
ウェブコンポーネントの機能を明示したクラスもしくは関数を作成する
classも使える
新しく作成したカスタム要素を登録する
CustomElementRegistry.define() メソッドに、要素の名前、機能が明示されているクラスもしくは関数、またオプションでどの要素を継承するかを渡す
必要なら Element.attachShadow() メソッドを使って、シャドウ DOM をカスタム要素に紐付ける
通常の DOM メソッドを使って、子要素やイベントリスナーなどをシャドウ DOM に追加する
必要なら <template> と <slot> を使って、HTML テンプレートを定義します。通常の DOM メソッドを再度使って、テンプレートをクローンし、シャドウ DOM に紐付ける
ページ内のお好きな場所で、通常の HTML 要素のように、カスタム要素を使う
Web Componentsによって、Reactなどが不要になるか？
>前提として、Web ComponentsとAngularやReactは、異なる問題を解決するために作られたものであることを理解する必要があります。Reactなどのモダンなフレームワークは、DOMとデータの同期する豊富なライブラリを提供します。Web Componentsを使用する場合、データバインディングやステートマネジメントなど、一般的なアプリ開発フレームワークで使用できる機能がない点に注意が必要です。一方でWeb Componentsはカプセル化を可能にし、異なるプロジェクトやプラットフォームで使用できる相互運用可能なモジュールを提供します。また前述の通り、学習コストが高いモダンフレームワークに比べて、Web Componentsは気軽に利用を始めることができます。ref
これって言うほど「一方で」って感じなのか？
Reactもカプセル化されてない？
Reactとの役割の違いをあまり理解していない
Reactとは異なるもの
併用は可能
何が嬉しい？
特定のフレームワークReact, Vue、Angularとかにこだわらずに使える
UIのパーツのためのライブラリを
Ionicとか？
@uhyo氏の