webcomponents学习

一、新建index.html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div>我是你大哥</div><!-- 传递参数，可以看出来和vue的使用方法差不多 --><wu-jie  url="baidu.com" age="18"></wu-jie><template id="wujie"><style>.box {width: 100px;height: 100px;background-color: red;}</style><div class="box">你好呀</div></template></body><script src="./index.js"></script>
</html>

二、新建index.js文件

"use strict";
window.onload = () => {class Wujie extends HTMLElement {constructor() {super();const dom = this.attachShadow({ mode: "open" });  //开启样式隔绝const template = document.getElementById("wujie");  //获取到index.html中的templatedom.appendChild(template.content.cloneNode(true));  //这里必须要克隆console.log(this.#getAttr("age"));}#getAttr(attr) {return this.getAttribute(attr); //通过getAttribute获取属性值}// 生命周期卸载disconnectedCallback() {console.log("类似于vue的destory");}// 生命周期创建connectedCallback() {console.log("类似于vue的mouted");}// 类似于watchattributeChangedCallback(name, oldValue, newValue) {console.log(name, oldValue, newValue);}}window.customElements.define("wu-jie", Wujie); //全局挂载，相当于vue的组件
};