web components

基本介绍

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

web components用法（原生）

index.html

    <jth-btn></jth-btn>
	<div>jth2</div>

btn.js

class Btn extends HTMLElement{
    constructor() {
        super();
        const shaDom = this.attachShadow({
            mode:'open'
        })
        //原生用法
        // this.p = this.h('p')
        //
        // this.p.innerText = 'jth'
        //
        // this.p.setAttribute('style','width:200px;height:200px;border:1px solid black')

        //template 用法

        this.template = this.h('template')

        this.template.innerHTML = `<div>jth + template</div>
        <style>
        div{
          color: red;
        }
</style>`

        // shaDom.appendChild(this.p)
        //template只能通过clone方法添加
        shaDom.appendChild(this.template.content.cloneNode(true))
    }

    h(el) {
        return document.createElement(el)
    }
}

window.customElements.define('jth-btn',Btn)

代码中包含了两种web-components的用法

从控制台的elements中我们可以清晰地看到web-components中的dom被隔离了，和外部的元素互不影响，这就是微前端的基本原理

webComponents 的生命周期

    /**
     * 生命周期
     */
    //当自定义元素被第一次与文档dom链接时调用
    connectedCallback(){
        console.log('i was connected')
    }
    //当自定义元素被第一次与文档dom断开时调用
    disconnectedCallback(){
        console.log('i was cutted')
    }
    //当自定义元素被移动到新文档调用
    adoptedCallback(){
        console.log('i was moved')
    }
    //当自定义元素属性被增加，移除，修改时调用
    attributeChangedCallback(){
        console.log('attr has changed')
    }

vue3 使用web-components

vite.config.ts

  plugins: [vue(
        {
          template:{
            compilerOptions:{
              //匹配前缀，识别为customElement
              isCustomElement : (tag) => tag.includes('jth-')
            }
          }
        }
    ),

App.vue调用

 <jth-btn :obj="JSON.stringify(obj)"></jth-btn>

  import customVueCeVue from './components/web-components/custom-vue.ce.vue'
 // webcomponents 注册
  const Btn = defineCustomElement(customVueCeVue)

  window.customElements.define('jth-btn',Btn)
    const obj = {
    name:1
  }