前端识记
Web components
class UserCard extends HTMLElement { connectedCallback() { this.innerHTML Hi,{this.getAttribute('nam…
最后更新 2026年8月23日
快速使用
<user-card name="zongxi"></user-card>
<script>
class UserCard extends HTMLElement {
connectedCallback() {
this.innerHTML = `<div> Hi,${this.getAttribute('name')} </div>`
}
}
customElements.define('user-card',UserCard)
</script>- 在HTML中创建自定义组件，注意需要带
- - 创建一个类，并继承
HTML element - 补充
connected callback函数，挂载后执行的内容，this指向该dom节点 customElements.define(html组件，类)
常用api
class MyElement extends HTMLElement {
constructor() {
super()
// JS 对象刚创建
}
connectedCallback() {
// 插入 DOM
console.log('mounted')
}
disconnectedCallback() {
// 从 DOM 移除
console.log('unmounted')
}
}它还有属性监听功能
class UserCard extends HTMLElement {
static observedAttributes = ['name'];
connectedCallback() {
this.innerHTML = `<div> Hi,${this.getAttribute('name')} </div>`
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'name') {
this.innerHTML = `<div> Hi,${newValue} </div>`
}
}
}
customElements.define('user-card',UserCard)
setTimeout(() => {
document.querySelector('user-card').setAttribute('name', 'zongxi2')
}, 2000);可以写到html中看看效果
当然我们并不建议用innerHTML，建议使用shadow root来创建组件内容，因为它不会污染其他样式，而且外部样式也污染不到内部。
class UserCard extends HTMLElement {
static observedAttributes = ['name'];
constructor() {
super();
this.attachShadow({ mode: 'open' }); // 让外部js可以访问shadowRoot中的元素
}
connectedCallback() {
this.shadowRoot.innerHTML = `<div> Hi,${this.getAttribute('name')} </div>`
// this.innerHTML = `<div> Hi,${this.getAttribute('name')} </div>`
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'name') {
this.shadowRoot.innerHTML = `<div> Hi,${newValue} </div>`
}
}
}前端渲染内容：
<user-card name="zongxi2"><template shadowrootmode="open"><div> Hi,zongxi2 </div></template></user-card>插槽
<user-card >
<span style="color: red;">123</span>
</user-card>
<script>
class UserCard extends HTMLElement {
static observedAttributes = ['name'];
constructor() {
super();
this.attachShadow({ mode: 'open' }); // 让外部js可以访问shadowRoot中的元素
}
connectedCallback() {
this.shadowRoot.innerHTML = `<div> Hi<slot></slot> </div>`
// this.innerHTML = `<div> Hi,${this.getAttribute('name')} </div>`
}
attributeChangedCallback(name, oldValue, newValue) {
// if (name === 'name') {
// this.shadowRoot.innerHTML = `<div> Hi,${newValue} </div>`
// }
}
}和Vue React一样，可以在组件里面任意中内容加上slot="xxx"，然后在shadowRoot中的html写上<slot
开发一些小tips
建议在比较简单的场景下使用。复杂场景下尽量还是用框架来写，它的最大优势主要还是跨框架
因为这一个Web Components的新特性，衍生出了新框架Lit
反向链接（0）
还没有笔记链接到这里。在 Obsidian 里用 [[笔记名]] 引用它，这里就会出现，关系图谱上也会多出一条连线。