“This is the 27th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

What is “life cycle”? As the name implies, a life cycle is the entire process of an object from its birth to its death, although the specific stages of the life cycle of different objects may differ.

When we use the front-end component framework, we know that each component has its own life cycle. Once the component life cycle is defined, the developer can execute different code logic in the different life cycle of the component, thus achieving the role of managing the component.

To make Custom Elements more flexible to use, it also has “lifecycle” callbacks that allow developers to define methods that can be executed at different lifetimes of a component.

Custom Elements lifecycle partitioning

In the constructor of Custom Elements, you can specify several different callback functions that will be called at different lifetimes of the element:

  • connectedCallbackCustom Elements is called when it is first inserted into the document DOM.
  • disconnectedCallback: is called when Custom Elements are removed from the document DOM.
  • adoptedCallback: Called when Custom Elements are moved to a new document.
  • attributeChangedCallbackCustom Elements is called when Custom Elements add, delete, or modify their attributes.

Note: The custom element’s lifecycle callback is used in its constructor.

Use of lifecycle callback functions

First look at the effect:

Note here that the adoptedCallback callback is only triggered when the custom element is moved to a new document (typically an IFrame).

The code is as follows:

<! --index.html-->
<head>
    <style>
        body {
            padding: 50px;
        }

        custom-square {
            margin: 15px;
        }

        iframe {
            width: 100%;
            height: 250px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <h1>Custom Elements life cycle</h1>
    <div>
        <button class="add">Append Square to DOM</button>
        <button class="update">Change the properties of Square</button>
        <button class="remove">Remove the Square element</button>
        <button class="move">Move Square to Iframe</button>
    </div>
    <iframe src="./other.html"></iframe>
    <script src="./square.js"></script>
    <script src="./index.js"></script>
</body>

<! --other.html-->
<body>
    <h1>This is an other. HTML</h1>
</body>
Copy the code
// square.js
function updateStyle(elem) {
    const shadow = elem.shadowRoot;
    shadow.querySelector("style").textContent = `
      div {
        width: ${elem.getAttribute("l")}px;
        height: ${elem.getAttribute("l")}px;
        background-color: ${elem.getAttribute("c")};
      }
    `;
}

class Square extends HTMLElement {
    static get observedAttributes() {
        return ["c"."l"];
    }

    constructor() {
        super(a);const shadow = this.attachShadow({ mode: "open" });

        const div = document.createElement("div");
        const style = document.createElement("style");
        shadow.appendChild(style);
        shadow.appendChild(div);
    }

    connectedCallback() {
        console.log("Custom-square is mounted to the page");
        updateStyle(this);
    }

    disconnectedCallback() {
        console.log("Custom - Square removed from page");
    }

    adoptedCallback() {
        console.log("Custom-square moved to new page");
    }

    attributeChangedCallback(name, oldValue, newValue) {
        console.log("Custom -square property value changed");
        updateStyle(this);
    }
}

customElements.define("custom-square", Square);
Copy the code
// index.js
const add = document.querySelector(".add");
const update = document.querySelector(".update");
const remove = document.querySelector(".remove");
const move = document.querySelector(".move");
let square;

update.disabled = true;
remove.disabled = true;

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

add.onclick = function () {
    // Create a custom square element
    square = document.createElement("custom-square");
    square.setAttribute("l"."100");
    square.setAttribute("c"."red");
    document.body.appendChild(square);

    update.disabled = false;
    remove.disabled = false;
    add.disabled = true;
};

update.onclick = function () {
    // Randomly update square's attributes
    square.setAttribute("l", random(50.200));
    square.setAttribute("c".`rgb(${random(0.255)}.${random(0.255)}.${random(0.255)}) `);
};

remove.onclick = function () {
    // Remove the square
    document.body.removeChild(square);

    update.disabled = true;
    remove.disabled = true;
    add.disabled = false;
};

update.onclick = function () {
    // Randomly update square's attributes
    square.setAttribute("l", random(50.200));
    square.setAttribute("c".`rgb(${random(0.255)}.${random(0.255)}.${random(0.255)}) `);
};

move.onclick = function () {
    window.frames[0].document.body.appendChild(square);
}
Copy the code

conclusion

This is a simple example of how to use the Custom Elements lifecycle callback function.

The Custom Elements callback has fewer adoptedCallback scenarios.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!