EsModules は HTMLImports の代わりになるのか

WebComponents を作るときに当たり前のように

ShadowDOM
CustomElement
TemplateTag
HTMLImports

を使っていたのですが、今日偶然 HTMLImports は廃止予定というのを見つけて衝撃を受けました。
Chrome はすでに実装しているのに Mozilla が嫌がったそうですね。

JavaScript ではなく HTML をインポートできるという発想はとても良い発明だと思います。

html
1<template id="template">
2    <div>
3        <div id="name"></div>
4        <div id="address"></div>
5    </div>
6</template>
7
8<script>
9    customElements.deifne("user-info", class Extends HTMLElement {
10        constructor(){
11            super()
12            this.attachShadow({mode:"open"}).append(
13                document.getElementById("template").content.cloneNode(true)
14            )
15        }
16    })
17</script>

という風に、コンポーネントの HTML 部分となる template タグと動きを定義するスクリプトを 1 つのファイルに書けて、これをインポートするだけでコンポーネントが使えるというのがメリットです。

これを EsModules にするとしても、 EsModules は JavaScript しかインポートできません。
そうなると template タグも使えなくなり、文字列で書くしかなくなります。

js
1const template = `
2    <div>
3        <div id="name"></div>
4        <div id="address"></div>
5    </div>
6`
7
8    customElements.define("user-info", class extends HTMLElement {
9        constructor(){
10            super()
11            this.attachShadow({mode:"open"}).innerHTML = template
12        }
13    })

JavaScript 中に文字列で HTML を書くとか昔の JavaScript のようで時代ハズレ感をすごく感じます。
これまでにも文字列で書くのが嫌で、 WebComponents とはいかなくとも、 template タグや script タグのデータブロックを使ってる人は多いと思います。
これでは HTMLImports だけでなく、 template タグのメリットまで捨てているように思います。
tempalte タグでは描画はされませんが解析され DocumentFragement が作られました。
それに対してこの方法では毎回文字列から作ることになるのでパフォーマンスも劣るはずです。
自分で DocumentFragment を作って、クローンするような作りにはできなくはないのですが、わざわざそんなことを自分でしないといけないということです。
あと、 template タグならつかえた script タグを書くことができません。

これまでの Web の新機能をみていると、別にブラウザベンダが作るの面倒だからとかで使いづらい仕様にしたり、すでにある程度あるものを劣化させようとしているとは考えづらいです。

上に書いたような単純に JavaScript で書くのではなく HTMLImports が廃止となるなら相応の別機能が用意されているもしくは策定中なのかと思うのです。
しかし、探してみてもこれといったものは見当たらないです。

HTMLImports なしでもデメリットを感じないような書き方や新機能をご存知でしたら教えてください。

defghi1977

2018/04/12 22:14

HTMLImportsはアイディアとしては画期的な機能でしたが, リソースの読み込み順序の判定（インポートがインポートを呼ぶ構成）において不透明な部分も多く, 将来的なWEB仕様の拡張に際して禍根を残す恐れが有ったため, 仕様としてリジェクトされたのも致し方なしとは感じています. （初期のShadow DOMも酷い内容でしたから, その実装に手こずったMozillaが”切れた”のかもしれません）