Lit で Master CSS を設定する

Lit コンポーネントは通常、シャドウルート内にレンダリングします。ドキュメントのスタイルはその中の要素に届かないため、生成した CSS を各コンポーネントのシャドウツリー内へ配信します。

#インストール

1. #Master CSS を追加する

   Vite でビルドする既存の Lit プロジェクトのルートでインストーラーを実行します。Lit の既定は Vite の静的モードです。ソースに完全なクラス名を記述してください。ブラウザーで初めて現れる名前からクラスを生成する必要がある場合は、ランタイムモードを明示的に指定します。

   npm create @master/css@2.0.0 -- --framework lit --yes

2. #CSS のソースエントリーを保持する

   インストーラーは src/index.css を作成し、Vite インテグレーションを登録します。定義はこのソースファイルに置いてください：

   src/index.css

   @import '@master/css';

   以下のコンポーネントは、Vite の ?inline インポートで処理済み CSS をテキストとして取得します。通常のドキュメントレベルのスタイルシートインポートでは、シャドウルートの内部にスタイルを付けられません。

   現在のインライン CSS 配信では、Vite の base を相対パスにしてください。ルート相対のアセット URL は、本番のコンポーネント読み込み時に Invalid base URL を起こす場合があります。以下を既存の Vite 設定に統合し、ほかのプラグインを保持して、Master CSS を一度だけ登録します：

   vite.config.ts

   import { defineConfig } from 'vite'import masterCSS from '@master/css-vite'export default defineConfig({  base: './',  plugins: [masterCSS()]})

3. #シャドウルートにスタイルを含める

   生成したスタイルシートをテキストとしてインポートし、Lit の unsafeCSS で取り込みます。CSS は自分のビルド入力から取得し、信頼できないユーザーのテキストを unsafeCSS に渡さないでください。インストーラーはこのスタイルシートの追加時に、標準コンポーネントの既存のスタイルを保持します。

   src/my-element.ts

   import { LitElement, html, unsafeCSS } from 'lit'import { customElement } from 'lit/decorators.js'import masterCSSStyles from './index.css?inline'@customElement('my-element')export class MyElement extends LitElement {  static styles = [unsafeCSS(masterCSSStyles)]  render() {    return html`<p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">Hello Lit</p>`  }}

4. #Master CSS を使い始める

   アプリのエントリーからコンポーネントモジュールをインポートしたままにし、登録済みの要素をページに置きます：

   src/main.ts

   import './my-element'

   <my-element></my-element>

   既存の index.html は src/main.ts をモジュールとして読み込む必要があります。npm run dev を実行すると、Lit が要素のシャドウルート内に段落を作成します。

プレビューは、段落と同じ実際のシャドウルート内に生成したスタイルシートを読み込みます。

#シャドウツリーのスタイルシートを確認する

Lit テンプレートの p-md を p-lg に変えます。パディングが 1rem から 1.5rem に増えるはずです。元に戻してから、本番ビルドを確認します：

npm run buildnpm run preview

ブラウザーの開発者ツールで <my-element> 内の段落を調べます。1rem のパディング、浮き上がった面、角丸が適用されているはずです。ドキュメントレベルの要素だけにスタイルが付く場合は、コンポーネントの ?inline インポートと static styles を確認してください。

静的モードに Master CSS のブラウザーランタイムは不要です。ただし、このクライアントレンダリングのコンポーネントを作成するために、Lit には引き続き JavaScript が必要です。

npm create @master/css@2.0.0 -- --framework lit --mode runtime --yes

/// <reference types="@master/css/client" />import { LitElement, html } from 'lit'import { customElement } from 'lit/decorators.js'import { withMasterCSSRuntime } from '@master/css-runtime'import program from 'virtual:master-css-program'import emittedGlobals from 'virtual:master-css-emitted-globals'import masterCSSStyles from './index.css?inline'@customElement('my-element')@withMasterCSSRuntime({ program, emittedGlobals })export class MyElement extends LitElement {  protected createRenderRoot() {    const root = super.createRenderRoot()    const styles = document.createElement('style')    styles.textContent = masterCSSStyles    root.append(styles)    return root  }  render() {    return html`<p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">Hello Lit</p>`  }}

document.querySelector('my-element').shadowRoot  .querySelector('#master-check').classList.add('underline')