Google Chrome70の新機能 感想

New in Chrome 70  |  Web  |  Google Developers https://developers.google.com/web/updates/2018/10/nic70

Deprecated HTML Imports！がーんだな。

https://www.chromestatus.com/features/5144752345317376 より。

html importは以下のような構文。Web components V0で使われていた。

<link rel="import" href="myfile.html">

この書き方のメリットとして、カスタムエレメントを作る時にhtmlとjsを分離する事が出来た。

上記のmyfile.htmlの中身を以下のように書けて、IDEでもhtmlをhtmlとして認識してくれた。

<template>
ほげほげ
</template>
<script>
//ここでカスタムエレメントを定義
</script>

今のES Modulesを使った方法では、呼び出し側は以下の通り

<script type="module" src="/myfile.js"></script>

myfile.jsの中身はこんな感じで、文字列としてhtml(と、style)を書かないといけない。

class HogeElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'close' });
    shadowRoot.innerHTML = `
<style>hoge</style>
<div>
kage
</div>
`
  }
}
customElements.define('hoge-elem', HogeElement );

エレメントが2つ3つ程度のカスタムエレメントであれば問題ないが、それなりにエレメントをがっつり使うカスタムエレメントを書くのが非常につらい。フォーマッタも文字列としか認識してくれないし。 大規模に使うならVueとかを使えって事なの？くり返し言うけど、html importの頃はちゃんとhtmlが分離されてたんだよ。 カスタムエレメント的には、結局これでGoなの？文字列としてhtmlをinnerHTMLに突っ込む事を前提にするの？

2019年4月頃のchromeでhtml importsは削除されます。今までありがとう、ありがとう・・・かえして。