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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.