生命周期

2023年08月15日

柏拉文

越努力，越幸运

一、connectedCallback

---

connectedCallback 当 custom element 首次被插入文档 DOM 时，被调用。

1.1 语法

connectedCallback() {}

1.2 用法

<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>

二、disconnectedCallback

---

disconnectedCallback 当 custom element 从文档 DOM 中删除时，被调用。

2.1 语法

disconnectedCallback(){}

2.2 用法

<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>

三、adoptedCallback

---

adoptedCallback 当 custom element 被移动到新的文档时，被调用。

3.1 语法

adoptedCallback(){}

3.2 用法

<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>

四、attributeChangedCallback

---

attributeChangedCallback 当 custom element 增加、删除、修改自身属性时，被调用。

4.1 语法

attributeChangedCallback(){}

4.2 用法

<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>