<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.