认识

一、认识

---

Web Components 标准非常重要的一个特性是，它使开发者能够将 HTML 页面的功能封装为 custom elements（自定义标签），而往常，开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能。

二、语法

---

<custom-element></custom-element>

<script>
    class CustomElement extends HTMLElement{
    constructor(){
        super();

        const shadow = this.attachShadow({ mode: "open" });
        const wrapper = document.createElement('div');
        wrapper.innerHTML = "自定义内置元素"

        console.log(this.getAttribute('id'));
        console.log(this.hasAttribute('url'))

        shadow.appendChild(wrapper);
    }

    connectedCallback(){
        console.log("当 custom element 首次被插入文档 DOM 时，被调用。");
    }

    disconnectedCallback(){
        console.log("当 custom element 从文档 DOM 中删除时，被调用。")
    }

    adoptedCallback(){
        console.log("当 custom element 被移动到新的文档时，被调用。")
    }

    attributeChangedCallback(){
        console.log("当 custom element 增加、删除、修改自身属性时，被调用。");
    }
    }

    customElements.define('custom-element',CustomElement);
</script>