Web Componentsは10年ほど前に提唱されたブラウザのコンポーネント技術の総称です。自分でタグを作ってHTMLを拡張していける技術なのですが、ブラウザの対応や仕様の確定などに時間がかかり、なかなか実用に至りませんでした。

私もずっと忘れていたのですが、React/Vueに疲れたなーと考えていたところ、ふと思い出し調べ直してみると、既に安定してProduction readyなのに情報が少なくすごくもったいなかったので、自分で調べつつ色々書き残すことにしてみました。

Web Componentsの誤解

名前は聞いたことはあっても使ったことがある人はまだ少ないWeb Components。私も認識違いがありました。

UIコンポーネントを作る仕組みだから自分で作ることはない

• CSSをページをまたがって使い回すことがあるなら楽になります

• CSSで!important を書いてたらWebComponentsを検討

対応しているブラウザがまだ少ない

• Chrome/Safariは2019年からEdgeでも2020年頭から使える

• Polyfill使えばIE11とか古いChromeでも使えるけどおすすめはしない

まだ使ってるケースが少ない

•  Youtube /  Salesforceとかで使われています

• ツールやフレームワークも出てる

Web Componentsがもたらすもの

私がWeb Componentsを調べるきっかけになったのは、Web上にCSSを使って部品を作りUIを構築するためだけにReactを導入して色々ビルド環境を維持していくのは嫌だなと思ったことでした。

CSSにスコープを導入できる

CSSにスコープがないことが中規模以上のWebサイト・サービスのUIを作る上での難しさを生んでいます。

<style>
.sign-in .error { border: 1px solid red }
</style>
<form class="sign-in">
  <input class="error" name="username" />
</form>

例えば上のようなHTMLを書くと赤枠の入力フォームが出来上がります。
しかし、誰かがどこかに".error { bordr-color: blue !important}"と書くと青枠が表示されるようになってしまいます。

CSSは名前空間のような考え方がないため、このようなことが起こります。ReactやVueなどではPreprocessorを使うことでCSS moduleやCSS in JSなどの変換を行なって擬似的にこのような問題を起こらないようにしています。 

自分でタグを作ってCSSとHTMLをまとめる

WebComponentsを使えば、自分でタグを定義して、HTML、CSSを一つの範囲(スコープ)に閉じ込めることができます。

フレームワークなどを使わずに上記のコードだけでWeb Componentsは実装することができます。12〜13行目のHTMLが3行目の<show-error/>に展開されますが、その時CSSの空間は別のため、1行目で定義している!importantの影響を受けません。

もちろんattributesを受け取って処理を変えたり、指定のCSS定義をコンポーネントの中に引き継ぐこともできます。

このように一つのクラスの中にHTMLとCSSを纏められるため、複数人でCSSを変更するときに部品間のCSS競合を気にする必要はありません。

Web ComponentsはReactやVueの中でも使える

ここで定義した<show-error/>タグは通常のHTML以外にReactやVueでも使うことができます。UIコンポーネントはWeb Componentsで作っておけば、ReactやVueのバージョンアップや乗り換えのコストを劇的に下げることができます。

またWebアプリ本体はReactで作っていたとしても、ヘルプページやサービス案内のWebページを作るときにHTMLの中でも同じコンポーネントを使うことができます。Web Components化しておけば様々な環境で同じコンポーネントを使えます。

でも全部React/Vueでもできるよ

WebのコンポーネントといえばReact/Vueが多くのサービスで使われており、クラスの中にHTMLやCSSを定義するという意味で同じことを実現できています。

しかし、この手のフレームワークはバージョンアップがよく行われ、特にCSSの扱いについては標準的な方法がなく、使うライブラリによって書き方を変える必要があります。

せっかくブラウザが標準で高度なコンポーネント機能を提供をしているのであればそれを活用しない手はありません。Web Componentsの要素技術はW3Cで標準化されており、もう時間も結構経っているので大きな非互換性が出る可能性は低いでしょう。

少しずつでも始めてみよう

Web Componentsは先ほどのようなJavascriptを<script>タグで読み込むだけで、新しいタグを使えるようにする技術です。そして独立した空間で動くので既存の技術との競合を気にする必要もありません。

ボタン一つでもWeb Componentsにしてみるところから始めてみませんか？

って具体的にどうすればいいの？

GoogleがLit(旧Polymer)というフレームワークを提供しているので、これに乗っかって行くのが一番楽でしょう。

私も自分用に、Lit + Typescript + Tailwindcss3 + Storybookのスターターを作ったので https://github.com/masuidrive/lit-element-starter-ts-tailwind を参考にしてもらえると嬉しいです。

罠はないの？

1Passwordのようなパスワードマネージャがうまく動かないという問題はあります。なのでログインフォームだけはWeb Componentsを使わないなどの対策を行う必要があります。

私も個人プロジェクト向けにWeb Componentsを使い始めたところなので、そこで得たノウハウはこのノートに書いて行く予定です。