静的HTML

テンプレートリテラルを、コンテナへの効率的なレンダリングと更新が可能なHTMLテンプレートとして解釈します。

インポート

import { html } from 'lit/static-html.js';

シグネチャ

html(strings, values): TemplateResult<ResultType>

パラメータ

strings

TemplateStringsArray

values

Array<unknown>

詳細

lit-html/static.jsからの静的値サポートが含まれています。

文字列リテラルにタグを付け、動的な値ではなく、静的なテンプレート文字列の一部として動作するようにします。

インポート

import { literal } from 'lit/static-html.js';

シグネチャ

literal(strings, values): StaticValue

パラメータ

strings

TemplateStringsArray

values

Array<unknown>

詳細

テンプレート式で使用できる値は、他のタグ付きliteralの結果またはunsafeStatic値のみです（信頼できないコンテンツをunsafeStaticに渡すべきではないことに注意してください）。ユーザーは、静的な文字列をテンプレートに追加することで、整形式のHTMLになることを確認する必要があります。そうでない場合、テンプレートが予期せず破損する可能性があります。静的な値は変更できますが、新しいテンプレートを事実上作成するため、完全な再レンダリングが発生します。

テンプレートリテラルを、コンテナへの効率的なレンダリングと更新が可能なSVGテンプレートとして解釈します。

インポート

import { svg } from 'lit/static-html.js';

シグネチャ

svg(strings, values): TemplateResult<ResultType>

パラメータ

strings

TemplateStringsArray

values

Array<unknown>

詳細

lit-html/static.jsからの静的値サポートが含まれています。

文字列をラップして、動的な値ではなく、静的なテンプレート文字列の一部として動作するようにします。

インポート

import { unsafeStatic } from 'lit/static-html.js';

シグネチャ

unsafeStatic(value): StaticValue

パラメータ

value

string

詳細

ユーザーは、静的な文字列をテンプレートに追加することで、整形式のHTMLになることを確認する必要があります。そうでない場合、テンプレートが予期せず破損する可能性があります。この関数は、信頼できないコンテンツに対しては安全に使用できません。HTMLに直接解析されるためです。サニタイズせずにユーザー入力をこの関数に渡さないでください。静的な値は変更できますが、新しいテンプレートを事実上作成するため、完全な再レンダリングが発生します。

静的値サポートを追加するために、lit-htmlテンプレートタグ（htmlまたはsvg）をラップします。

インポート

import { withStatic } from 'lit/static-html.js';

シグネチャ

withStatic(coreTag): (strings: TemplateStringsArray, values: Array<unknown>) => TemplateResult<ResultType>

パラメータ

coreTag

(strings: TemplateStringsArray, values: Array<unknown>) => TemplateResult<1> | (strings: TemplateStringsArray, values: Array<unknown>) => TemplateResult<2>

インポート

import { StaticValue } from 'lit/static-html.js';