テンプレート

テンプレートリテラルを、コンテナに対して効率的にレンダリングおよび更新できるHTMLテンプレートとして解釈します。

インポート

import { html } from 'lit';

シグネチャ

html(strings, values): TemplateResult<1>

パラメーター

strings

TemplateStringsArray

values

Array<unknown>

詳細

const header = (title: string) => html`<h1>${title}</h1>`;

htmlタグは、レンダリングするDOMの記述を値として返します。これは遅延評価であり、テンプレートがレンダリングされるまで何も行われません。レンダリング時、テンプレートが以前にレンダリングされた結果と同じ式から来ている場合、置換ではなく効率的に更新されます。

ChildPartがそのコンテンツを完全にクリアするように指示するセンチネル値。

インポート

import { nothing } from 'lit';

型

詳細

const button = html`${
 user.isAdmin
   ? html`<button>DELETE</button>`
   : nothing
}`;

さまざまな式バインディングコンテキスト間で一貫した動作を提供するため、他の偽の値よりもnothingを使用することをお勧めします。子式では、undefined、null、''、およびnothingはすべて同じように動作し、ノードをレンダリングしません。属性式では、nothingは属性を削除しますが、undefinedとnullは空の文字列をレンダリングします。プロパティ式では、nothingはundefinedになります。

通常はlit-html TemplateResultである値を、コンテナにレンダリングします。

インポート

import { render } from 'lit';

シグネチャ

render(value, container, options?): RootPart

パラメーター

value

unknown

レンダリング可能な値、通常は{@linkcode html}や{@linkcode svg}などのテンプレートタグを評価して作成された{@linkcode TemplateResult}です。

container

HTMLElement | DocumentFragment

レンダリング先のDOMコンテナ。最初のレンダリングでは、レンダリングされた値がコンテナに追加され、後続のレンダリングでは、以前に同じ結果タイプがレンダリングされていた場合、レンダリングされた値が効率的に更新されます。

options?

RenderOptions

オプションのドキュメントについては、{@linkcode RenderOptions}を参照してください。

詳細

この例では、段落タグの中に「Hello, Zoe!」というテキストをレンダリングし、それをコンテナdocument.bodyに追加します。

import {html, render} from 'lit';
const name = "Zoe";
render(html`<p>Hello, ${name}!</p>`, document.body);

テンプレートリテラルを、コンテナに対して効率的にレンダリングおよび更新できるSVGフラグメントとして解釈します。

インポート

import { svg } from 'lit';

シグネチャ

svg(strings, values): TemplateResult<2>

パラメーター

strings

TemplateStringsArray

values

Array<unknown>

詳細

const rect = svg`<rect width="10" height="10"></rect>`;
const myImage = html`
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    ${rect}
  </svg>`;

svgタグ関数は、SVGフラグメント、または<svg> HTML要素の内側に含まれる要素にのみ使用する必要があります。よくある間違いは、svgタグ関数でタグ付けされたテンプレートに<svg>要素を配置することです。<svg>要素はHTML要素であり、htmlタグ関数でタグ付けされたテンプレート内で使用する必要があります。LitElementの使用では、SVGフラグメントは要素のシャドウルート内に含まれるため、render()メソッドからSVGフラグメントを返すことは無効であり、したがって<svg>HTML要素内で使用することはできません。

DOMに書き込まれる前に値をサニタイズするために使用されます。これは、XSS攻撃を防ぐために、許可および禁止された値のセキュリティポリシーを実装するために使用できます。

インポート

import { SanitizerFactory } from 'lit';

型

詳細

このコールバックを使用する1つの方法は、属性とプロパティを高リスクフィールドのリストと照合し、そのようなフィールドに書き込まれる値が、構築上安全なクラスのインスタンスであることを要求することです。ClosureのSafe HTML Typesは、この手法の実装の1つです（ https://github.com/google/safe-html-types/blob/master/doc/safehtml-types.md）。API専用モードのTrustedTypesポリフィルも、この手法の基礎として使用できます（https://github.com/WICG/trusted-types）。

インポート

import { SVGTemplateResult } from 'lit';

型

テンプレートタグ関数、htmlおよびsvgの戻り値の型。

インポート

import { TemplateResult } from 'lit';

型

詳細

TemplateResultオブジェクトは、テンプレートをレンダリングするために必要なテンプレート文字列、式値、テンプレートの型（htmlまたはsvg）に関するすべての情報を保持します。TemplateResultオブジェクトは、単独ではDOMを作成しません。DOMを作成または更新するには、TemplateResultをレンダリングする必要があります。詳細については、レンダリングを参照してください。