提炼一个BaseWebComponent的class，提供了一些常用的方法基于class快速的生成新的webcomponent组件
npm install @simon_he/base-webcomponent
- 通过html返回原生的dom节点渲染
export class UserCard extends BaseWebComponent {
css() {
return `:host {
display: flex;
align-items: center;
}
`
}
html(): string {
const image = document.createElement('img')
image.src = 'https://semantic-ui.com/images/avatar2/large/kristy.png'
return image
}
}
// 注册
export function registerComponent(name: string) {
window.customElements.define(name, UserCard)
}- 通过template返回原生html的字符串渲染
export class UserCard extends BaseWebComponent {
css() {
return `:host {
display: flex;
align-items: center;
}
`
}
template(): string {
return `
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png" class="image">
`
}
}
// 注册
export function registerComponent(name: string) {
window.customElements.define(name, UserCard)
}- 支持slot
- 支持props
