前言
在上一篇文章：Lit：介绍、项目搭建 中已经介绍了如何搭建项目，后续内容都在该项目的基础上进行。
创建组件
创建组件：simple-greeting.ts
import {
LitElement, css, html } from 'lit';
import {
customElement, property } from 'lit/decorators.js';
@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
// 定义样式，host表示组件本身
static styles = css`
:host {
color: blue;
}
`;
// 定义组件属性
@property()
name?: string = 'World';
// 渲染组件
render() {
return html`<p>Hello, ${
this.name}!</p>`;
}
}
使用
在index.html中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit App</title>
<script type="module" src="/src/simple-greeting.ts"></script>
</head>
<body>
<simple-greeting></simple-greeting>
<simple-greeting name="自定义属性"></simple-greeting>
</body>
</html>
效果
@customElement
@customElement装饰器是调用的简写，customElements.define它向浏览器注册一个自定义元素类并将其与元素名称（在本例中为simple-greeting）相关联。
描述
当您定义一个 Lit 组件时，您就是在定义一个自定义 HTML 元素。因此，您可以像使用任何内置元素一样使用新元素：
<simple-greeting name="Markup"></simple-greeting>
const greeting = document.createElement('simple-greeting');
提供良好的TypeScript类型
TypeScript 将根据标签名称推断从某些 DOM API 返回的 HTML 元素的类。例如，document.createElement(‘img’)返回一个HTMLImageElement带有src: string属性的实例。
自定义元素可以通过添加以下内容来获得相同的处理HTMLElementTagNameMap：
import {
LitElement, css, html } from 'lit';
import {
customElement, property } from 'lit/decorators.js';
@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
// 定义样式，host表示组件本身
static styles = css`
:host {
color: blue;
}
`;
// 定义组件属性
@property({
type: String })
name?: string = 'World';
// 渲染组件
render() {
return html`<p>Hello, ${
this.name}!</p>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"simple-greeting": SimpleGreeting;
}
}
通过这样做，以下代码会正确地进行类型检查：
const myElement = document.createElement('simple-greeting');
myElement.name= 'a';
render
render函数用来定义模板，模板可以包含表达式，它们是动态内容的占位符。
使用原则：
- 避免更改组件的状态。
- 避免产生任何副作用。
- 仅使用组件的属性作为输入。
- 给定相同的属性值时返回相同的结果。
import {
LitElement, html} from 'lit';
import {
customElement, property} from 'lit/decorators.js';
@customElement('my-page')
class MyPage extends LitElement {
@property({
attribute: false})
article = {
title: 'My Nifty Article',
text: 'Some witty text.',
};
headerTemplate() {
return html`<header>${
this.article.title}</header>`;
}
articleTemplate() {
return html`<article>${
this.article.text}</article>`;
}
footerTemplate() {
return html`<footer>Your footer here.</footer>`;
}
render() {
return html`
${
this.headerTemplate()}
${
this.articleTemplate()}
${
this.footerTemplate()}
`;
}
}
组件的组合
simple-greeting.ts 同上
base-app.ts
import {
LitElement, css, html } from 'lit';
import {
customElement } from 'lit/decorators.js';
import './view/simple-greeting.ts';
@customElement('base-app')
export class BaseApp extends LitElement {
// 定义样式，host表示组件本身
static styles = css`
:host {
margin:0;
padding:0;
}
`;
// 渲染组件
render() {
return html`
<simple-greeting></simple-greeting>
<simple-greeting name="WebComponent"></simple-greeting>
`;
}
}
index.ts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit App</title>
<script type="module" src="/src/base-app.ts"></script>
</head>
<body>
<base-app></base-app>
</body>
</html>
注：不要采用下面的加载方式，错误写法。
import {
SimpleGreeting } from './view/simple-greeting.ts';