<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
// Case 3: Visual component
class PageCaption extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.clicked = false;
}
connectedCallback() {
const html = `<h1>Marcus</h1><button type="button">Ave Marcus!</button>`;
this.shadowRoot.innerHTML = html;
this.shadowRoot
.querySelector("button")
.addEventListener("click", () => {
if (!this.clicked) {
this.clicked = true;
const html = `<h1>Ave Marcus Aurelius!</h1>`;
this.shadowRoot.innerHTML = html;
}
});
}
}
window.customElements.define("page-caption", PageCaption);
</script>
</head>
<body>
<page-caption></page-caption>
</body>
</html>