Source Code:
(back to article)
Submit
Result:
Report an issue
<body> <lifecycle-element></lifecycle-element> <script> class LifecycleElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> #status { color: blue; font-weight: bold; } </style> <p>Lifecycle Element</p> <p id="status">Element not connected</p> `; } connectedCallback() { this.shadowRoot.getElementById('status').textContent = 'Element connected to the page.'; } disconnectedCallback() { this.shadowRoot.getElementById('status').textContent = 'Element disconnected from the page.'; } } customElements.define('lifecycle-element', LifecycleElement); </script> </body>