Lit Web Components 实战解析 lit-starter-js 中my-element的 name 属性配置示例【免费下载链接】litLit is a simple library for building fast, lightweight web components.项目地址: https://gitcode.com/GitHub_Trending/li/lit本篇文章围绕 lit-starter-js 示例站点中的 Name Property 示例页展开讲解如何通过 HTML 属性为 Lit 自定义元素配置name属性并深入其组件源码、反应式属性机制与测试验证。读完本文你将掌握 Lit 组件声明式属性配置的完整链路——从属性声明、默认值、渲染到测试与示例站点的生成方式。示例概览这个示例页面演示了什么在 lit-starter-js 项目的示例站点中有一个名为 Name Property 的示例页源文件位于 docs-src/examples/name-property.md。它只做了一件事通过 HTML 属性向my-element传入一个name值展示 Lit 组件像普通 HTML 元素一样配置的用法。该页面的核心内容非常简洁即一段可以直接在浏览器中运行的组件标记my-element nameEarth/my-element在示例页面中这行标记会直接渲染成真实的组件实例页面下方再展示等价的 HTML 代码片段让读者同时看到代码长什么样和运行结果是什么。从组件的渲染逻辑见下文源码可知my-element nameEarth/my-element最终会在页面上渲染出h1Hello, Earth!/h1而如果不传name属性则渲染出默认的h1Hello, World!/h1。组件源码剖析name 属性是如何定义的要理解这个示例需要回到组件本身的定义 my-element.js。这是一个基于lit包而非旧版lit-element包编写的基础组件示例import {LitElement, html, css} from lit; export class MyElement extends LitElement { static get properties() { return { /** * The name to say Hello to. * type {string} */ name: {type: String}, /** * The number of times the button has been clicked. * type {number} */ count: {type: Number}, }; } constructor() { super(); this.name World; this.count 0; } render() { return html h1${this.sayHello(this.name)}!/h1 button click${this._onClick} partbutton Click Count: ${this.count} /button slot/slot ; } sayHello(name) { return Hello, ${name}; } } window.customElements.define(my-element, MyElement);这里与name属性相关的关键点有三处反应式属性声明static get properties()中声明了name: {type: String}。这是 Lit 反应式属性的标准写法type: String告诉 Lit 如何把 HTML 属性字符串转换成 JavaScript 属性值。默认值构造函数中this.name World给name设置了默认值因此不传属性时组件也能正常渲染而不是显示 undefined。渲染消费render()中通过this.sayHello(this.name)生成问候语sayHello(name)返回Hello, ${name}。属性值的变化会触发重新渲染。属性与属性的反应式绑定nameEarth 是如何生效的Lit 组件同时暴露两种接口HTML 属性attribute与JavaScript 属性property。示例中my-element nameEarth/my-element写的是 HTML 属性形式而组件内部读取的是this.name属性形式两者通过 Lit 的反应式属性系统自动打通当浏览器解析到nameEarth这个 attribute 时Lit 会根据properties声明中的type: String将字符串Earth转换为对应的属性值并写入this.name属性的写入会触发render()重新执行页面随之更新为Hello, Earth!属性与 attribute 之间是双向同步的组件源码中name: {type: String}没有显式设置attribute: false因此this.name的变化也会反映回 DOM attribute 上string 类型默认开启 attribute 反射。这种HTML 属性即配置入口的设计使 Lit 组件能像原生元素一样在任意 HTML 场景中使用无需编写任何初始化脚本。这也是本示例页想要传达的核心思想声明式配置开箱即用。行为验证测试用例如何印证默认值与传值两种路径示例所展示的行为并非孤例仓库中的测试文件 test/my-element_test.js 用两组测试用例完整覆盖了不传 name与传 name两种情形test(renders with default values, async () { const el await fixture(htmlmy-element/my-element); assert.shadowDom.equal( el, h1Hello, World!/h1 button partbuttonClick Count: 0/button slot/slot ); }); test(renders with a set name, async () { const el await fixture(htmlmy-element nameTest/my-element); assert.shadowDom.equal( el, h1Hello, Test!/h1 button partbuttonClick Count: 0/button slot/slot ); });测试结果清晰地验证了两条事实不传name时组件渲染出默认问候Hello, World!对应构造函数中的this.name World传入nameTest时渲染结果为Hello, Test!说明 attribute 已被正确转换为属性并参与渲染。这与 Name Property 示例页的行为完全一致——把Test换成Earth就是示例页展示的效果。需要说明的是示例页与上述测试位于同一仓库但各自独立示例页通过文档模板加载打包后的组件见下文测试则通过open-wc/testing的fixture在测试运行器中执行。示例页面的生成机制从 Markdown 到可运行页面Name Property 示例页不是静态写死的 HTML 文件而是通过 Eleventy11ty静态站点生成器渲染出来的。其文档头部frontmatter声明了页面元信息--- layout: example.11ty.cjs title: my-element ⌲ Examples ⌲ Name Property tags: example name: Name Property description: Setting the name property ---各字段的作用如下layout指定使用 docs-src/_includes/example.11ty.cjs 作为页面模板。该模板继承自page.11ty.cjs并在此基础上为每个示例页渲染一个Example: name标题和示例导航列表导航项来自collections.example即所有tags: example的页面title/name/description分别用于浏览器标题、示例标题栏和导航列表中的描述文字tags: example把该页归入示例集合供导航模板遍历生成示例列表。底层的基础模板 docs-src/_includes/page.11ty.cjs 负责组装完整 HTML 文档其中关键的一行是script typemodule src${relative(page.url, /my-element.bundled.js)}/script也就是说示例页运行时会加载经 Rollup 打包压缩后的组件脚本 my-element.bundled.js由rollup.config.js以my-element.js为入口、输出为 ESM 格式生成组件因此能在页面中正常定义与渲染。本地运行与验证方式你可以在本地复现并验证这个示例具体命令均可在 README.md 中找到安装依赖在packages/lit-starter-js目录执行npm i预览组件执行npm run serve启动 Web Dev Server然后访问http://localhost:8000/dev/index.html对应 dev/index.html它直接以模块方式加载my-element.js是最快速的验证路径如需以生产模式压缩、更精简的错误信息运行可改用npm run serve:prod构建并预览示例站点执行npm run docs生成docs目录再用npm run docs:serve在本地启动站点默认地址http://localhost:8000即可在 Examples 导航中打开 Name Property 页面看到my-element nameEarth/my-element的真实渲染效果开发期间可用npm run docs:gen:watch监听文件变更并自动重新构建运行测试执行npm test测试会分别针对 Lit 的开发模式与生产模式运行 test/my-element_test.js 中的全部用例其中renders with a set name用nameTest验证了与示例一致的传值行为开发时可使用npm run test:watch做监听式测试。小结从示例到 Lit 属性配置的通用范式Name Property 示例页虽然只有短短几行却浓缩了 Lit 组件配置的一条核心链路HTML 属性 → 反应式属性带类型转换→ 默认值兜底 → 渲染消费 → 测试验证。理解这条链路后你可以将同样的模式推广到任意 Lit 组件——只需在properties中声明属性与类型、在构造函数中设置默认值、在render()中消费属性组件便能通过普通 HTML 标签在任何页面中声明式配置这也是 Lit 构建轻量 Web Components 的基础能力之一。进一步探索可以参考仓库中与本主题相关的其他资料示例索引页展示了插槽与子内容的用法、组件源码、测试用例以及 lit-starter-js 的 README包含完整的安装、测试、文档生成与发布建议。【免费下载链接】litLit is a simple library for building fast, lightweight web components.项目地址: https://gitcode.com/GitHub_Trending/li/lit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Lit Web Components 实战：解析 lit-starter-js 中 `＜my-element＞` 的 name 属性配置示例
Lit Web Components 实战解析 lit-starter-js 中my-element的 name 属性配置示例【免费下载链接】litLit is a simple library for building fast, lightweight web components.项目地址: https://gitcode.com/GitHub_Trending/li/lit本篇文章围绕 lit-starter-js 示例站点中的 Name Property 示例页展开讲解如何通过 HTML 属性为 Lit 自定义元素配置name属性并深入其组件源码、反应式属性机制与测试验证。读完本文你将掌握 Lit 组件声明式属性配置的完整链路——从属性声明、默认值、渲染到测试与示例站点的生成方式。示例概览这个示例页面演示了什么在 lit-starter-js 项目的示例站点中有一个名为 Name Property 的示例页源文件位于 docs-src/examples/name-property.md。它只做了一件事通过 HTML 属性向my-element传入一个name值展示 Lit 组件像普通 HTML 元素一样配置的用法。该页面的核心内容非常简洁即一段可以直接在浏览器中运行的组件标记my-element nameEarth/my-element在示例页面中这行标记会直接渲染成真实的组件实例页面下方再展示等价的 HTML 代码片段让读者同时看到代码长什么样和运行结果是什么。从组件的渲染逻辑见下文源码可知my-element nameEarth/my-element最终会在页面上渲染出h1Hello, Earth!/h1而如果不传name属性则渲染出默认的h1Hello, World!/h1。组件源码剖析name 属性是如何定义的要理解这个示例需要回到组件本身的定义 my-element.js。这是一个基于lit包而非旧版lit-element包编写的基础组件示例import {LitElement, html, css} from lit; export class MyElement extends LitElement { static get properties() { return { /** * The name to say Hello to. * type {string} */ name: {type: String}, /** * The number of times the button has been clicked. * type {number} */ count: {type: Number}, }; } constructor() { super(); this.name World; this.count 0; } render() { return html h1${this.sayHello(this.name)}!/h1 button click${this._onClick} partbutton Click Count: ${this.count} /button slot/slot ; } sayHello(name) { return Hello, ${name}; } } window.customElements.define(my-element, MyElement);这里与name属性相关的关键点有三处反应式属性声明static get properties()中声明了name: {type: String}。这是 Lit 反应式属性的标准写法type: String告诉 Lit 如何把 HTML 属性字符串转换成 JavaScript 属性值。默认值构造函数中this.name World给name设置了默认值因此不传属性时组件也能正常渲染而不是显示 undefined。渲染消费render()中通过this.sayHello(this.name)生成问候语sayHello(name)返回Hello, ${name}。属性值的变化会触发重新渲染。属性与属性的反应式绑定nameEarth 是如何生效的Lit 组件同时暴露两种接口HTML 属性attribute与JavaScript 属性property。示例中my-element nameEarth/my-element写的是 HTML 属性形式而组件内部读取的是this.name属性形式两者通过 Lit 的反应式属性系统自动打通当浏览器解析到nameEarth这个 attribute 时Lit 会根据properties声明中的type: String将字符串Earth转换为对应的属性值并写入this.name属性的写入会触发render()重新执行页面随之更新为Hello, Earth!属性与 attribute 之间是双向同步的组件源码中name: {type: String}没有显式设置attribute: false因此this.name的变化也会反映回 DOM attribute 上string 类型默认开启 attribute 反射。这种HTML 属性即配置入口的设计使 Lit 组件能像原生元素一样在任意 HTML 场景中使用无需编写任何初始化脚本。这也是本示例页想要传达的核心思想声明式配置开箱即用。行为验证测试用例如何印证默认值与传值两种路径示例所展示的行为并非孤例仓库中的测试文件 test/my-element_test.js 用两组测试用例完整覆盖了不传 name与传 name两种情形test(renders with default values, async () { const el await fixture(htmlmy-element/my-element); assert.shadowDom.equal( el, h1Hello, World!/h1 button partbuttonClick Count: 0/button slot/slot ); }); test(renders with a set name, async () { const el await fixture(htmlmy-element nameTest/my-element); assert.shadowDom.equal( el, h1Hello, Test!/h1 button partbuttonClick Count: 0/button slot/slot ); });测试结果清晰地验证了两条事实不传name时组件渲染出默认问候Hello, World!对应构造函数中的this.name World传入nameTest时渲染结果为Hello, Test!说明 attribute 已被正确转换为属性并参与渲染。这与 Name Property 示例页的行为完全一致——把Test换成Earth就是示例页展示的效果。需要说明的是示例页与上述测试位于同一仓库但各自独立示例页通过文档模板加载打包后的组件见下文测试则通过open-wc/testing的fixture在测试运行器中执行。示例页面的生成机制从 Markdown 到可运行页面Name Property 示例页不是静态写死的 HTML 文件而是通过 Eleventy11ty静态站点生成器渲染出来的。其文档头部frontmatter声明了页面元信息--- layout: example.11ty.cjs title: my-element ⌲ Examples ⌲ Name Property tags: example name: Name Property description: Setting the name property ---各字段的作用如下layout指定使用 docs-src/_includes/example.11ty.cjs 作为页面模板。该模板继承自page.11ty.cjs并在此基础上为每个示例页渲染一个Example: name标题和示例导航列表导航项来自collections.example即所有tags: example的页面title/name/description分别用于浏览器标题、示例标题栏和导航列表中的描述文字tags: example把该页归入示例集合供导航模板遍历生成示例列表。底层的基础模板 docs-src/_includes/page.11ty.cjs 负责组装完整 HTML 文档其中关键的一行是script typemodule src${relative(page.url, /my-element.bundled.js)}/script也就是说示例页运行时会加载经 Rollup 打包压缩后的组件脚本 my-element.bundled.js由rollup.config.js以my-element.js为入口、输出为 ESM 格式生成组件因此能在页面中正常定义与渲染。本地运行与验证方式你可以在本地复现并验证这个示例具体命令均可在 README.md 中找到安装依赖在packages/lit-starter-js目录执行npm i预览组件执行npm run serve启动 Web Dev Server然后访问http://localhost:8000/dev/index.html对应 dev/index.html它直接以模块方式加载my-element.js是最快速的验证路径如需以生产模式压缩、更精简的错误信息运行可改用npm run serve:prod构建并预览示例站点执行npm run docs生成docs目录再用npm run docs:serve在本地启动站点默认地址http://localhost:8000即可在 Examples 导航中打开 Name Property 页面看到my-element nameEarth/my-element的真实渲染效果开发期间可用npm run docs:gen:watch监听文件变更并自动重新构建运行测试执行npm test测试会分别针对 Lit 的开发模式与生产模式运行 test/my-element_test.js 中的全部用例其中renders with a set name用nameTest验证了与示例一致的传值行为开发时可使用npm run test:watch做监听式测试。小结从示例到 Lit 属性配置的通用范式Name Property 示例页虽然只有短短几行却浓缩了 Lit 组件配置的一条核心链路HTML 属性 → 反应式属性带类型转换→ 默认值兜底 → 渲染消费 → 测试验证。理解这条链路后你可以将同样的模式推广到任意 Lit 组件——只需在properties中声明属性与类型、在构造函数中设置默认值、在render()中消费属性组件便能通过普通 HTML 标签在任何页面中声明式配置这也是 Lit 构建轻量 Web Components 的基础能力之一。进一步探索可以参考仓库中与本主题相关的其他资料示例索引页展示了插槽与子内容的用法、组件源码、测试用例以及 lit-starter-js 的 README包含完整的安装、测试、文档生成与发布建议。【免费下载链接】litLit is a simple library for building fast, lightweight web components.项目地址: https://gitcode.com/GitHub_Trending/li/lit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考