Styles

adoptStyles

function 永久链接到 adoptStyles 查看源码

Applies the given styles to a shadowRoot. When Shadow DOM is available but adoptedStyleSheets is not, styles are appended to the shadowRoot to mimic spec behavior. Note, when shimming is used, any styles that are subsequently placed into the shadowRoot should be placed before any shimmed adopted styles. This will match spec behavior that gives adopted sheets precedence over styles in shadowRoot.

导入

import { adoptStyles } from 'lit';

签名

adoptStyles(renderRoot, styles): void

参数

renderRoot
MDN ShadowRoot
styles
Array<CSSResultOrNative>

css

function 永久链接到 css 查看源码

A template literal tag which can be used with LitElement's styles property to set element styles.

导入

import { css } from 'lit';

签名

css(strings, values): CSSResult

参数

strings
TemplateStringsArray
values
Array<number | CSSResultGroup>

详情

For security reasons, only literal string values and number may be used in embedded expressions. To incorporate non-literal values unsafeCSS may be used inside an expression.

CSSResult

class 永久链接到 CSSResult 查看源码

A container for a string of CSS text, that may be used to create a CSSStyleSheet.

导入

import { CSSResult } from 'lit';

详情

CSSResult is the return value of css-tagged template literals and unsafeCSS(). In order to ensure that CSSResults are only created via the css tag and unsafeCSS(), CSSResult cannot be constructed directly.

方法和属性

readonly cssText: string

永久链接到 cssText 查看源码

styleSheet: undefined | MDN CSSStyleSheet

永久链接到 styleSheet 查看源码

toString(): string

永久链接到 toString 查看源码

getCompatibleStyle

function 永久链接到 getCompatibleStyle 查看源码

导入

import { getCompatibleStyle } from 'lit';

签名

getCompatibleStyle(s): CSSResultOrNative

参数

s
CSSResultOrNative

supportsAdoptingStyleSheets

value 永久链接到 supportsAdoptingStyleSheets 查看源码

Whether the current browser supports adoptedStyleSheets.

导入

import { supportsAdoptingStyleSheets } from 'lit';

类型

boolean

unsafeCSS

function 永久链接到 unsafeCSS 查看源码

Wrap a value for interpolation in a css tagged template literal.

导入

import { unsafeCSS } from 'lit';

签名

unsafeCSS(value): CSSResult

参数

value
unknown

详情

This is unsafe because untrusted CSS text can be used to phone home or exfiltrate data to an attacker controlled site. Take care to only use this with trusted input.

CSSResultArray

type 永久链接到 CSSResultArray 查看源码

导入

import { CSSResultArray } from 'lit';

类型

Array<CSSResultOrNative | CSSResultArray>

CSSResultGroup

type 永久链接到 CSSResultGroup 查看源码

A single CSSResult, CSSStyleSheet, or an array or nested arrays of those.

导入

import { CSSResultGroup } from 'lit';

类型

CSSResultOrNative | CSSResultArray

CSSResultOrNative

type 永久链接到 CSSResultOrNative 查看源码

A CSSResult or native CSSStyleSheet.

导入

import { CSSResultOrNative } from 'lit';

类型

CSSResult | MDN CSSStyleSheet

详情

In browsers that support constructible CSS style sheets, CSSStyleSheet object can be used for styling along side CSSResult from the css template tag.