HTML DOM customElements upgrade() Method

Last Updated : 24 Aug, 2022

The customElements upgrade() method upgrades all shadow-containing custom elements of the document in a node subtree, even before they are connected to the main document.

Syntax:

customElements.upgrade(root);

Parameters:

root: A node instance with shadow-containing descendant elements that are to be upgraded.

Return value: This method returns void.

Example:

HTML

<!DOCTYPE HTML>
<html>
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
<p>
        HTML | customElements upgrade() method
    </p>
 
    <button onclick="Geeks()">
        Check
    </button>
    <button onclick="upg()">Upgrade</button>
    <p id="a"></p>
 
    <script>
        var a = document.getElementById("a");
        const el = document
            .createElement("gfg-custom-element");
        class CustomEl extends HTMLElement {
            constructor() {
                super()
                this.attachShadow({ mode: 'open' })
                this.shadowRoot.innerHTML = `
                      <h1 style="color:green;">  
                        GeeksforGeeks Custom Element Data
                    </h1>
                    `
            }
        }
        window.customElements.define(
                'gfg-custom-element', CustomEl);
                 
        function Geeks() {
            a.innerHTML = "Upgraded : " 
                + (el instanceof CustomEl);
        }
        function upg() {
            customElements.upgrade(el);
        }
    </script>
</body>
</html>