「Web Componentsって独自のHTMLタグをつくれるんだよねー」くらいの認識で、これまで使ったことはありませんでした。この記事では、サンプルデータをつくって分かった事や、今後の課題について書きます。
Web Componentsは多くのブラウザがデフォルトで備えてる仕組みです。技術の概要を知りたい場合はMDNをお読みください。構成する３つの技術（カスタム要素、Shadow DOM、HTMLテンプレート）や作り方の流れが分かります。
Litを使用します。Polymer、lit-elementに連なるライブラリで、Web Componentsが扱いやすくなります。2021年9月にLit2.0がリリースされました。
基本
このような独自タグを使うことができます。名称にはハイフンが必要です。
<my-comoponents></my-components>
中身の実装には、TypeScript（JavaScript）のClassを使用します。
TypeScriptを使用すると Decorators を使うことができ、より簡潔に記述できます。
import {LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('my-components')
export class MyComponents extends LitElement {
static styles = css`
:host {
color: red;
}
`;
@property()
name?: string = 'World';
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
LitのPlaygroundを触れば、より理解できると思います。
開発環境を用意する
LitのスターターはModern Web の Web Dev Serverを使用してます。
Web Dev Serverは簡単にbuildlessな開発環境がつくれるのですが、プロダクションbuildは自分で書かなくてはいけません。面倒だなぁーっと思ってたら、ViteのサイトにWeb Dev Serverとの比較を見つけました。Viteにはビルドが用意されてます。
今回はViteのLit TypeScriptスターターを使用することにしました。Viteもbundleしないビルドツールです。Web Dev Serverと同じくesbuild、Rollupを使用しています。
サンプルデータ「playing-cards」の環境を作ります。
npm init vite@latest playing-cards --template lit-ts
npm cd playing-cards
npm install
npm run dev
build設定を少し書き換えます。デフォルト設定はライブラリモードになっているので、不要な記述を削除、outDirとbaseを指定します。baseの設定はGitHub Pagesで公開するためのものです。
export default defineConfig({
base: '/playing_cards/',
build: {
outDir: '../docs',
// lib: {
// entry: 'src/my-element.ts',
// formats: ['es']
// },
// rollupOptions: {
// external: /^lit/
// }
},
});
buildしたファイルの確認用にpackage.jsonのscriptsにpreviewを追加します。
"scripts": {
"preview": "vite preview --port 8080"
},
npm run build
...
npm run preview
サンプルデータの紹介
いくつか機能を使ったサンプルをつくりました。トランプのカードを絞り込むメニューです。
最後に
今後の課題と感想です。
- 新しいCSS設計を考える必要がある。
- ShadowDOMでスコープが閉じる事や、カスタムプロパティの管理、構造と装飾の分離などを考慮する。
- 食べログのCSS規約が参考になる。ルール厳しい…
- Sassの今後を考える。Viteのお勧めが良さそう。PostCSSでCSSの先取りする。
- 11tyでページ生成を管理してみたら良い感じだった。積極的に取り入れたい。
- Web Componentsを使ってるサイト（任天堂の英語サイト等）を見て学ぶ。
- コンポーネントを綺麗に再利用できるのは、すごく便利。
以上です。