Lit 元件默认不将 data- 前缀属性自动映射到属性，需显式通过 @property({ attribute: 'data-xxx' }) 配置实现双向绑定。
lit 元件默认不将 `data-` 前缀属性自动映射到组件属性，需显式通过 `@property({ attribute: 'data-xxx' })` 配置实现双向绑定。
在 Lit 中，@property 装饰器默认将属性名（如 language）映射为同名 HTML 属性（即 language），但 不会自动识别或处理 data- 前缀。若希望组件能响应 <my-element data-language="json"></my-element> 这类写法，并同步更新内部 language 属性，必须手动指定 attribute 选项：
import { LitElement, property } from 'lit';
class MyElement extends LitElement {
/**
* 语言标识符，支持通过 data-language 属性设置
*/
@property({ type: String, attribute: 'data-language' })
language: string = 'xml';
render() {
return this.language
? html`<code>Language: ${this.language}</code>`
: html`<em>No language specified</em>`;
}
}
customElements.define('my-element', MyElement);✅ 此时以下用法均可正确触发 language 属性更新：
-
<my-element data-language="json"></my-element>→language = "json" -
<my-element .language="${'typescript'}"></my-element>→ 同样生效（属性绑定优先级更高） - 动态修改：
el.setAttribute('data-language', 'html')→ 触发willUpdate/updated生命周期
⚠️ 注意事项：
-
attribute: 'data-language'仅控制从属性到 attribute 的反射（即this.language = 'js'会自动设置data-language="js"），以及从 attribute 到属性的初始化/变更同步； - 若同时存在
language属性和data-languageattribute，Lit 以 attribute 值为初始值（首次渲染前），后续以属性赋值为准； - 不要混用
attribute: 'data-language'和attribute: true（后者会回退为默认属性名），二者互斥； - 所有
data-*属性均为字符串类型，即使type: Number或type: Boolean，Lit 仍按字符串解析 —— 如需布尔语义，建议使用原生布尔属性（如disabled）或自定义解析逻辑。
总之，data-* 属性在 Lit 中并非“开箱即用”，而是需主动声明映射关系。合理利用 @property({ attribute: 'data-xxx' }) 可兼顾语义化 HTML 标记与组件状态管理，尤其适用于与第三方库、分析脚本或 CSS 选择器（如 [data-theme="dark"]）协同的场景。
