スタイリング

lit-htmlはHTMLをレンダリングすることにのみ焦点を当てています。lit-htmlがどのようにスタイルを適用するかは、あなたがそれをどのように使用しているかによって異なります。LitElementのようなコンポーネントシステム内でlit-htmlを使用している場合は、そのコンポーネントシステムで使用されているパターンに従うことができます。

一般的にどのようにHTMLのスタイリングするかは、shadow DOMを使用しているかどうかによって異なります:

動的なスタイリングをするのに、lit-htmlはclassstyle属性を操作するための二つのディレクティブを提供します:

shadow DOMでのレンダリング

shadow rootにレンダリングするときは、通常shadow rootの内側にスタイルシートを追加して、shadow rootの内容をスタイルすることができます。

html`
  <style>
    :host { ... } 
    .test { ... }
  </style> 
  <div class="test">...</div> 
`;

同じスタイルシートが要素の各インスタンスで再現されるので、このパターンは非効率的に見えるかもしれません。ただし、ブラウザは同じスタイルシートの複数のインスタンスを重複排除できるため、スタイルシートを解析するためのコストは1回しか支払われません。

いくつかのブラウザで利用可能な新機能はConstructable Stylesheets Objectsです。この標準提案では、複数のshadow rootがスタイルシートを明示的に共有することを許可しています。LitElementではこの機能を静的stylesプロパティで使用しています。

スタイルシート内のバインディング

スタイルシート内で値をバインドすることは、ブラウザのスタイルシートの最適化が無効になるため、アンチパターンとなります。ShadyCSSのポリフィルでもサポートされていません。

// こうしてはいけません!
html`
  <style>
    :host {
      background-color: ${themeColor};
    }
  </style>
  ... 

スタイルシートでバインディングする別の方法:

styleclass属性へのバインディングの例としてstyleMapによるインラインスタイルclassMapによるクラス設定を参照してください。

shadow DOMのポリフィル: ShadyDOMとShadyCSS

shadow DOMを使用している場合、shadow DOMをネイティブに実装していない古いブラウザをサポートするにはポリフィルを使用する必要があるでしょう。ShadyDOMShadyCSSはポリフィルもしくは補助的なshimとして、shadow DOMとスタイルのスコーピングをエミュレートします。

lit-htmlのshady-renderモジュールはshady CSS shimを使用するのに必要な機能を提供します。lit-htmlとshadow DOMを使うカスタム要素の基本クラスを書いているなら、shady-renderを使うのにいくつかのステップを踏む必要があるでしょう。

ShadyCSS READMEはshady CSSを使うのに参考になるでしょう。もしlit-htmlで使用するには:

styleMapによるインラインスタイル

styleMapディレクティブを使ってテンプレートの要素にインラインスタイルを設定することができます。

const normalStyles = {};
const highlightStyles = { color: 'white', backgroundColor: 'red'};
let highlight = true;

const myTemplate = () => {
  html`
    <div style=${styleMap(highlight ? highlightStyles : normalStyles)}>
      Hi there!
    </div>
  `;
};

詳細については、テンプレート・リファレンスのstyleMapを参照してください。

classMapによるクラス設定

styleMapディレクティブと同様に、classMapディレクティブはオブジェクトに基づいてクラスのグループを設定できます:

// すべてのメニュー項目に対してクラスの基本セットを定義する
const baseClasses = { 
  'menu-item': true,
  // ...
};

const itemTemplate = (item) => {
  // 動的に生成されたクラスにマージする
  const mergedClasses = Object.assign({active: item.active}, baseClasses);
  return html`<div class=${classMap(mergedClasses)}>クラス装飾されたテキスト</div>`
}

詳細については、テンプレート・リファレンスのclassMapを参照してください。