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