为什么选Lit来做Webcompoents组件开发
有谷歌大厂背书，框架处于持续迭代维护中，下载量高（社区活跃度高，网上也有很多相关文章可以参考），容易上手（写法类似于React的函数式组件）。如果愿意的话，也可以用它来做微前端项目，根据Lit的路由机制来展示不同的子应用。
开发框架搭建
推荐使用Vite来搭建Lit的开发框架，因为Vite本身支持Lit
使用Lit来创建一个最简单的组件demo
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends LitElement {
render() {
return html`
<div class='main'></div>
`;
}
static styles = [css`
.main{
width:100%;
height: calc(100% - 6rem);
}
`]
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}
在原生页面、Vue或React项目中使用时，先执行yarn build，将开发好的模块打包成一个js文件，之后可通过发npm或部署CDN的形式在项目中使用
这就是打包后的源文件
在原生页面中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit + TS</title>
<script type="module" crossorigin src="./assets/index-C0k3p14F.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BwL3dWu4.css">
</head>
<body>
<my-element
id="myEle"
docsHint="哈哈哈哈哈"
count="1"
dataObj='{"name":"woshi"}'
>
<h1>Vite + Lit</h1>
</my-element>
</body>
<script>
window.onload = function() {
// 定义一个外部函数
function externalFunction(message) {
console.log('indexHtml externalFunction',message); // 弹出传入的消息
}
// 获取组件并传入外部函数
const myComp = document.getElementById("myEle");
myComp.externalFunction = externalFunction; // 传递外部函数
}
</script>
</html>
在Vue项目中使用
<template>
<my-element id="myEle" docsHint="哈哈哈哈哈" count="1" dataObj='{"name":"woshi"}'> </my-element>
</template>
<script lang="ts" setup>
import '../../study/Lit/dist/assets/index-C0k3p14F.js'
import { onMounted } from 'vue';
const externalFunction = (event) => {
console.log('Vue Custom event received:', event);
};
onMounted(() => {
// 获取组件并传入外部函数
const myComp = document.getElementById("myEle");
// @ts-ignore
myComp.externalFunction = externalFunction; // 传递外部函数
});
</script>
在React项目中使用
import React, { useEffect,useRef } from 'react'
import '../../../../../study/Lit/dist/assets/index-C0k3p14F.js'
export default function Test() {
const myElementRef = useRef<any>(null);
useEffect(() => {
const externalFunction = (val:any) => {
console.log('React externalFunction received:', val);
};
const myElement = myElementRef.current;
if(myElement) {
myElement.externalFunction = externalFunction
}
}, []);
return (
<div style={{ margin: '100px 100px ' }}>
{/* @ts-ignore */}
<my-element ref={myElementRef} docsHint="哈哈哈哈哈" count="1" dataObj='{"name":"我是从React来的"}'> </my-element>
</div>
)
}
Lit的具体使用方法
- 常用的生命周期
- 路由
- 组件间通信、传值、父子组件事件响应回调传值
- 使用Less开发样式
- 由于Lit还没有类似于antd这种成熟的UI组件库，使用React结合antd来开发比较复杂的Webcomponents组件（比如表格，表单等用原生写起来比较麻烦组件）
