スタイル

指定されたスタイルをshadowRootに適用します。Shadow DOMが利用可能だがadoptedStyleSheetsが利用できない場合、スタイルはshadowRootに追加され、仕様の動作を模倣します。注意点として、シムが使用されている場合、後でshadowRootに配置されるスタイルは、シムされた採用済みスタイルの前に配置する必要があります。これは、採用済みシートにshadowRoot内のスタイルよりも優先順位を与える仕様の動作と一致します。

インポート

import { adoptStyles } from 'lit';

署名

adoptStyles(renderRoot, styles): void

パラメータ

renderRoot

ShadowRoot

styles

Array<CSSResultOrNative>

LitElementのstylesプロパティで要素のスタイルを設定するために使用できるテンプレートリテラルタグ。

インポート

import { css } from 'lit';

署名

css(strings, values): CSSResult

パラメータ

strings

TemplateStringsArray

values

Array<number | CSSResultGroup>

詳細

セキュリティ上の理由から、埋め込み式ではリテラル文字列値と数値のみを使用できます。非リテラル値を取り込むには、式の中でunsafeCSSを使用できます。

CSSStyleSheetを作成するために使用できるCSSテキストの文字列のコンテナ。

インポート

import { CSSResult } from 'lit';

詳細

CSSResultは、cssタグ付きテンプレートリテラルとunsafeCSS()の戻り値です。CSSResultがcssタグとunsafeCSS()でのみ作成されるようにするために、CSSResultを直接構築することはできません。

インポート

import { getCompatibleStyle } from 'lit';

署名

getCompatibleStyle(s): CSSResultOrNative

パラメータ

s

CSSResultOrNative

現在のブラウザがadoptedStyleSheetsをサポートしているかどうか。

インポート

import { supportsAdoptingStyleSheets } from 'lit';

型

cssタグ付きテンプレートリテラルで補完するための値をラップします。

インポート

import { unsafeCSS } from 'lit';

署名

unsafeCSS(value): CSSResult

パラメータ

value

unknown

詳細

信頼できないCSSテキストを使用して、攻撃者が制御するサイトにデータを送ったり、データを盗み出したりする可能性があるため、これは安全ではありません。信頼できる入力でのみ使用するように注意してください。

インポート

import { CSSResultArray } from 'lit';

型

単一のCSSResult、CSSStyleSheet、またはそれらの配列またはネストされた配列。

インポート

import { CSSResultGroup } from 'lit';

型

CSSResultまたはネイティブのCSSStyleSheet。

インポート

import { CSSResultOrNative } from 'lit';

型

詳細

構築可能なCSSスタイルシートをサポートするブラウザでは、cssテンプレートタグからのCSSResultと並んで、スタイリングにCSSStyleSheetオブジェクトを使用できます。