无界微前端 - 前置知识1（dom与template绑定、生命周期、传递参数）

最新推荐文章于 2024-05-13 19:13:30 发布

小小亮01

最新推荐文章于 2024-05-13 19:13:30 发布

阅读量192

点赞数

分类专栏：微前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_43845137/article/details/129894127

版权

微前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

无界微前端 - 前置知识1（dom与template绑定、生命周期、传递参数）

web-components

tsc -w 时时编译te为js
tes --init 初始化tesconfig.json

index.ts

window.onload = () => {
  class Wujie extends HTMLElement {
    constructor() {
      super();
      // attachShadow 样式隔离
      let dom =  this.attachShadow({mode:'open'})
      let template = document.querySelector("#wujie") as HTMLTemplateElement
      dom.appendChild(template.content.cloneNode(true)) // 把template的id 与 dom节点进行绑定
      console.log('getAttr',this.getAttr('url'));
      
    }
    private getAttr(atrr:string){
      return this.getAttribute(atrr)
    }
    // 类似vue的 mounted
    connectedCallback(){
      console.log('111');
    }
    // 类似vue的 destory
    disconnectedCallback(){
      console.log('2');
    }
    // 类似vue的 watch
    attributeChangeCallback(name:any,oldVal:any,newVal:any){
      console.log('name',name,'oldVal',oldVal,'newVal',newVal);
      
    }

  }
  // 类似vue组件 原生js写的一个组件 
  window.customElements.define("wu-jie", Wujie); // 挂载完成
};

index,html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <wu-jie url="testURL"></wu-jie>
    <div>我是外div</div>
    <!-- 把当前id 渲染到 wujie组件里面 -->
    <template id="wujie">
      <div>111</div>
      <style>
        div {
          color: red;
        }
      </style>
    </template>

  </body>
  <script src="./index.js"></script>
</html>