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