R.I.P. Web Components v0

Published at 2018-07-30

blink から Web Components v0 を deprecate and remove する intent が作成された。

Intent to Deprecate and Remove: Shadow DOM V0, Custom Elements V0, HTML Imports

オチはないがツラツラと振り返ってみる。

Web Components v0 の変遷

Shadow DOM v0、Custom Elements v0、HTML Imports が初めて Chromium に実装されたのが 2014 年なので、そこから早 4 年が経つ（アイデアに至っては 2011 年まで遡り、Alex Russell 先生が Fronteers Conference 2011 で最初のコンセプトを発表している）。この v0 に分類される API は、<template> 要素を除き、他のブラウザベンダーの合意を得られず、安定 API としてリリースされることなく終わった。

Shadow DOM と Custom Elements は API のデザイン変更のステップと捉えることもできるが、HTML Imports は Firefox が ES Modules の存在を理由に反対の姿勢を示していた。2014 年に実装を見送り、2015 年に改めて ES Modules を待つ姿勢を示している。

そして、この ES Modules のブラウザ実装がモジュール化された Web Components を取り扱う方法としてそのまま採用されている。HTML Imports は外部の HTML ドキュメントをロードできるので、その中で HTML・CSS・JavaScript を扱うことができた。ES Modules は外部の JavaScript をロードするので、Web Components なコンポーネントを構成する HTML や CSS を JavaScript に文字列として記述することになる。これは Vue.js の Single File Component と、React の Component の関係によく似ている。

HTML Imports の凋落にしても Shadow DOM + Custom Elements にしても、当初のアイデアにあった「宣言的 (declarative) にやる」という点を達成できていない。Vue.js の Single File Component にしてもビルドが前提なので、コンパイルなどの中間処理を挟めば ES Modules を使ってエミュレートできると思うが、それでは Web 標準技術で達成したとは恐らく言い難い。

Web 開発者の誰かがきっと望んでいる世界観をわかりやすくいうと <element id="foo-button"> で要素を宣言し、内包する要素が Shadow DOM に挿入されて <foo-button> を構成し、記述された foo-button.html をロードすればそれが使える。というモノだろう。ちなみにこれらのアイデアはどれも既に議論済のもので、様々な経緯で見送られている。そして再び、近いアイデアが色んな所で生まれているのを見かける。

Web Components v1 の変遷

一方で、ブラウザベンダーの合意を経てデザインされた Shadow DOM v1、Custom Elements v1 といった v1 に分類される API も、Chromium の実装が先行した。それぞれの intent が 2015/09/15 と 2016/03/15 なので、2016 年の中期には安定版 Chrome に実装されていたと推測できる。

他のブラウザはと言うと、2016 年に Safari (WebKit) が続いている。iOS 10 に同梱された Safari 10 からフラグなしで使えるようになっており、そこから iOS のメジャーアップデートを含む約2年を経て、シェアも充分になりつつある。Dev Fest 2016 の Web Components 2016 & Polymer v2 でも言及しているが、モバイルブラウザのシェアを Chrome を分かつ Safari が実装した意義は大きく、今やモバイル Web で Web Components をポリフィルなしで投入することも難しくない（Web Components そのものの使い勝手という意味では別の課題があり、言いたいことは色々と　ある）。

Firefox については長らく開発が続いていたものの ship に至らずという状態だったが、2018 年にようやく安定版で有効化される目処が立ち、何事もなければ 2018/09/05 にリリースされる Firefox 62 で使えるようになるはずである（Custom Elements v1 は Firefox 59 で既に有効化されている）。

残念ながら、まだ Edge には実装されてない。Developer Feedback の他の機能と比べても高得票数だが、まだ投票していない人は念の為(?)投票して欲しい。モバイルでのシェアを獲得していくことは今の所考えにくいが、Internet Explorer 11 を代替するモダンブラウザとしては実装が進んでいて欲しいところ。

Web Components v0 より R.I.P. して欲しい IE 11 は、どうやら 2025 年あたりまでサポートされてしまうようだが、StatCounter での IE11 のシェア減少を見ている限りはシェア的に無視できる日の方が近そうに思える。Microsoft 的にも Edge に移行して欲しいのは山々だろうし、東京オリンピックが開催される 2020 年あたりを目処に何とかなって欲しいものである。