<div class="heading">
  <h1>Custom Element Demo</h1>
</div>

<custom-element>
  <h2>Some boring line here.</h2>
</custom-element>
body {
  background-color: #e7e7e7;
  font-family: system-ui;
  text-align: center;
  margin: 0;
}

div.heading {
  background-color: #c7ea46;
  padding: 1rem;
}
class CustomElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = "<h3>JavaScript is awesome!</h3>";
  }
}

customElements.define("custom-element", CustomElement);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.