HTML DOM customElements upgrade() Method

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.