Lit + Typescript + tailwindcss + Storybook の開発環境

設定と実行

npm install
npm run dev

storybook が自動で開きます。

下記のバージョンが正式にサポート。これ以下や IE11 でも Polyfill を使い、気も使って書けば動かないことはないらしいがあまりいいことはないだろう。なのでこのバージョンが最低ラインと見るのが良い

最低でも 2020 年以降にリリースされたブラウザは対応しているので、PC やスマホのブラウザでは問題なく動くと言ってもいいと思う。

そのままでは全ての CSS が全コンポーネントに入ってしまうため、Lit で Tailwind CSS を使うを参考に対応

プラグインに足りない部分があったのでrollup-plugin-lit-tailwindcss3を自分で作ってみた。

rollup.config.jsに設定を追加し、ソースにも placeholder を追加

Storybook をnpx sb initで導入して、Web Componentsを選択

.storybook/preview.jsの一行目で rollup で生成した bundled の js ファイルを読み込む

そのままドキュメント通りに stories の中で template を書くと、変数展開のところで余計なコメント(SSR 用?)が生成されるので、これを行わないようにする処理をsrc/helpers/stories-helper.jsに書いた

stories の例は、src/my-error.stories.jsを参照

chromaticの利用をお勧め

.github/workflows/chromatic.ymlで CI を回してアップデートされます。