WebComponents 元年 v4

WebComponents 元年 v4 2023/03/03 #tokyo_study

Prior Art

元年 v1 2016~19 ● Custom Elements v1 ● Shadow DOM v1 ● Template Instantiation ● HTML Imports

元年 v2 2019~20 ● Custom Elements v1 ● Shadow DOM v1 ○ Declarative Shadow DOM ○ Imperative Slot Element ● Template Instantiation ● HTML Imports

元年 v3 2019~20 ● Custom Elements v1 ○ Scoped Custom Element Registration ● Shadow DOM v1 ○ Declarative Shadow DOM ○ Imperative Slot Element ● Template Instantiation ○ DOM Parts ● HTML Imports ○ Import Assertions

元年 v4 (new) 2023 ??

DSD(Declarative Shadow DOM)

Declarative Shadow DOM 長い議論の末 Safari がついに DSD を実装。 その間少し仕様が変わった。 Mozilla の Standard Position も Positive に。 long history: https://github.com/whatwg/dom/issues/831

• https://github.com/whatwg/dom/issues/831

Form Associated Custom Elements Form の中の Input とかを CE にしても Submit できなかった それを Form と紐づけられるように。 Chrome, Mozilla が Ship 済み, Safari が TP

WC が Interop 2023 の Focus Area に

元年 v4 ● WebComponents の SSR がやっとできそう ● Form の中の部品も CE にできそう ● ブラウザ間の細かい差(CSS 周り、イベント周り etc)が埋まりそう ● ... ● 他は？

WC ってなんで欲しかったんだっけ？

WC の夢 自分だけのオリジナルな Element を作ろう！？ ● Import で持ってきて ● Template で複製し ● CE で登録し ● SD 内で実装する ● それを使い回す ● etc etc 本当に体現してたのって AMP くらい ??

現実 Web の最小単位をコンポーネントで実装し、それを使い回し、積み上げで実 装したい ● React, Veu etc etc で実装 ● (コード上)宣言的だとなお良い ● CSS は、まあなんかうん適当なあれでいい感じに ● それを CSR したり SSR したり ● Compile したり Build したり Bundle して動けば OK

現実の延長の理想 @scope と ShadowRealm あたりがあるとなんか色々便利そうだぞ？ ● Style が閉じるので BEM とか SMACSS が不要?? ● Ream に閉じるので window を拡張し放題?? ● それを Reac, Vue etc のコンポーネントで ● (ry

わざわざ DSD いる？ CE に登録して嬉しいんだっけ? Template タグ使いにくくね?

WebComponent が足踏みしてる間に エコシステム側に独自なコンポーネント文化 が根付いた

問題解決 vs 課題解決 問題 = プラットフォームでないと解決できないもの 問題: Web の持つ機能が API 側に Export されてない 解決: 内部の API をもっと Export しよう = 本来の WebComponent 課題 = ユーザーランドで解決できるもの 課題: (宣言的とか再利用とか色々な意味で)コンポーネントで開発したい 解決: コンポーネントベースな開発手法を確立しよう = 様々なFramework

Frontend の課題解決が早すぎ上手すぎて 問題だったものがよくわからなくなってる

Frontend が今取り組んでいる課題が WebPlatform が取り組んでる問題と だいぶ離れてしまってる

(D)SD vs Scope/Realm (D)SD は Style/Script をカプセル化するが、それだけが目的ではない。 ● Event Bubbling のカプセル化 ● Query Selector のカプセル化 ● <slot> によるテレポート(別の DOM に差し込む唯一の方法)

CE vs React / Vue / etc Components CE は、 Frontend の求めてるコンポーネントと少し違う ● 新しい要素としてブラウザに認識させられる ○ この一言に全てが集約される ○ そのメリットがわかりにくいところはある

それにしてもまだちょっと足らない ● Template タグ、使いにくすぎね？ ● CE の登録は Declarative じゃないの？ ● 今のフレームワークから移行するメリットあるの？

控えている議論と実装 ● DOM Parts ○ これがくると Template Instantiation ができる ● Template Instantiation ○ これがくるとプログラムから扱いやすくなる ● CSS / HTML Module ○ Import assertion の応用 ○ 外から取り込む手段ができる ● etc ● etc

Interop と RNiwa さんの作業を 皮切りに議論が再燃実装が進んだら それが本当の元年？？

それらが揃って フレームワークと合流したら そこが本当の元年？？

「元年 v4」はリブートの年

WebComponent 元年 Rebooted