Wrote: 2019/1/30
ReWrite: 2019/2/1

モチベーション

IE11で動作するWeb Componentsで、HTMLしか読めない人でも簡単にコンポーネントが組み込めればHappy！
さらにStorybookでカタログ化したらさらにHappy！

が、挫折しかかってます。
同じような環境って世の中にいっぱいありそうなんだが、みんなどうしてるんでしょう？教えてほしい。

環境&要件

IE11で、1画面に多くの(300～500個ほど)のコンポーネントを配置する案件がいくつもあり、
かつ、コンポーネントの要件が複雑なので、WebComponent化したい。

ネットワークポリシーで、ChromeもEdge（and FirefoxもOperaもSafari）も、IE11以外は禁止されている環境です。

案件ページを構築する側（WebComponentを使う側）は、素のHTMLで構築、かつ、jQuery等は使えない縛り。
ついでに複数の部署で使いまわししたい。

Ajax？何それ？おいしいの？

複雑な事は、WebComponentに隠ぺいしてしまい、
使う側はテキストエディタ（もしくはHPビルダー）で構築できるようにしたい。

そして、500個のコンポーネントの表示は一瞬で完了しなければならない。

背景

IE11は、2025年10月までは稼働するようです。

一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期：Tech TIPS - ＠IT

2025年10月まで

Internet Explorer の今後について – Japan IE Support Team Blog

特定の Web サイトや Web アプリで Microsoft Edge との互換性の問題が発生する場合 (※) の対応として、エンタープライズモードサイト一覧を利用して Internet Explorer 11 に自動的にリダイレクトさせる機能なども提供してきました。

背景の環境

React、Vue、Angular、コンポーネント志向と言っても、IE11がそこに暗い影を落とします。
Chromeでは動くんだけど・・・

Reactでコンポーネントを作っていた場合、それを流用したい場合には、流用先でもReactである必要があるし、その逆もしかりです。

さらにJSフレームワークを使っていない場合もあるでしょう。（素のPHPや、APS.NET、HTMLのみ）

そういう環境でWeb Componentsに夢を見た物語です。

↓こういう環境を想定

IE11が無くならない背景には、今だ古いHPビルダーしか使えない環境が残っていたり、IE11から脱却できない（以下自粛

とにかく、IE苦難はまだまだ続きます。

実践

という事で、Happyになるために、Web Components化を目指しました。

以下にトライしてみました。

React

Reactは公式では、使う事はできるけど・・・というニュアンスで
Web Components – React

積極的にReactを使って、WebComponentsを作ろうぜって感じじゃなさそうです。（残念

ReactでWebComponentsを作成にトライしているプロジェクトもあるようです。
spring-media/react-web-component: Create Web Components with React
が、なかなか情報がなくて、しばらく様子見でしょうか・・・

ReactベースのプロジェクトにWebcomponentsを組み込むHowToは↓にありました。
How to use Web Components in React

Riot

Riotは軽量なフレームワーク故にWebComponent的に使えます。
という事からRiotでコンポーネントを作ってみましたが、IE11については微妙でした。

StorybookもIE11で動きませんでした。（2019年1月現在）

Riot.js と Storybook （IE11で動作しなかったので、挫折＆頓挫） - Qiita

というわけで、RiotがIE11で問題なく動く日まで棚上げにします。

Polymer

Polymer Project

IE11でも動くWebComponentsといえばPolymer。
Polymer1からIE11が動くという事が利点でした。現在はPolymer3がリリース済みです。（2019年1月現在）

Polymer3を試してみました。

2019年1月現在、HPではLitElementとかlit-htmlが上の方に表示されてます。
色もグレーになってて、Maintenanceと表示されてます。

これは先行きが・・・と思っていた矢先に
Vue-Cli3でWeb Componentsが作成できるようになっていたのでVueに鞍替えしました。

Vue

Build Target: web-component | Vue CLI 3

Vue-Cli3でWeb Componentsが作成できると聞いて意気揚々とトライしました。

結論からいって、IE11には対応していないという以下文言のとおり、IE11で安定運用は厳しそうです。

Note on Compatibility
Web Component mode does not support IE11 and below. More details

Note on Vue Dependency
In web component mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. The bundle will assume Vue is available on the host page as a global variable.

表示するコンポーネント数が少なければ特に問題ないですが、数が増えると表示に時間がかかり運用に耐えれなくなってきました。

苦難のソースは以下に残しておきます。
sugasaki/vue-cli3-webcomponent

Lit-Element

IE11環境に残されたWebComponentsの道は、Polymerだけのようです。
とはいえ、Polymerはメンテナンスゾーンに入ったので、Lit-Elementに入った方がよさそうです。

LitElement

Polymerの上のほうに存在したLit-Elementですが、IE11も対応リストに入っているようです。
Polymerの先行きが微妙っぽいので、かくなるうえは、Lit-Elementです。

LitElement > プロパティメモ - Qiita

結果

パフォーマンスはVueよりは少しましだが、Lit-Elementも表示に時間がかかる
簡単なHelloWorldを500個表示したときには表示完了まで2秒くらい。
ちょっと複雑なイベントを内包するコンポーネントを500個表示したときにはイベントが動き出すまで20秒くらい。

これはもっと別のところに原因があるのかもしれません。

vaadin

vaadinもWebComponentを作れるようです。
コンポーネントも提供しています。
Mobile optimized, themeable web components | Vaadin

DatePickerがすごく魅力的です。
HTML examples | Date Picker | Components | Vaadin

Riactで使うvaadin Web Componentsの説明はかなりおすすめ。
How to use Web Components

そして希望へ

もしかして・・・と思い、IE11 レンダリング遅い - Google 検索で、検索してみました。

その中で見つけた、これ→Windows - IE11 の動作がとても重い(chromeで見ると軽い)｜teratail

例えば、test.html中に<style>・・・</style>が沢山あったりしないですか？
私もハマった経験があるのですが、

WebComponentsはコンポーネントそれぞれに閉じられたShadowDOMとStyleを持ってます。
もしかしてStyleが諸悪の根源か？？

と試しにスタイルを削ってみました。

ビンゴ！！

今まで30秒→1秒に短縮されました。

LitElement、Polymer、Vue、共にスピードが改善されました。
それぞれが劇的なパフォーマンスを出し始めました。

新たな悩みが・・・・

となれば、どれを採用すればいいのか？

それぞれ一長一短ありそうです。
Polymerは熟し始めですが、LitElementが後継のようです。
LitElementはReact寄りの構文ですが、まだPreReleaseです。
Vueもまだ出始めたばかりです。

Vueは、他のコンポーネントを使いまわせるエコシステムが魅力的です。
LitElementは、使ってる人どれくらいいるのだろうか？？？というのが不安です。

今後も調査を続けていきます。

IE11でも動作するWeb Componentsについて夢を紡いだが、挫折しかかってけど、光明が見えた物語