<div class="heading">
<h1>Custom Element: Toggle Button</h1>
</div>
<toggle-button></toggle-button>
body {
background-color: #e7e7e7;
font-family: system-ui;
text-align: center;
margin: 0;
}
div.heading {
background-color: #008080;
color: white;
padding: 1rem;
border: 1px dashed black;
margin-bottom: 1rem;
}
toggle-button button {
padding: 1rem 2rem;
border: 2px dashed black;
cursor: pointer;
border-radius: 5px;
}
class ToggleButton extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const button = document.createElement("button");
button.textContent = "Off";
button.addEventListener("click", () => {
button.textContent = button.textContent === "Off" ? "On" : "Off";
});
this.appendChild(button);
}
}
customElements.define("toggle-button", ToggleButton);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.