<p>A new <code>&lt;hello-world&gt;</code> Web Component...</p>

<hello-world></hello-world>
body {
  font-family: sans-serif;
}

hello-world {
  font-weight: bold;
  color: red;
}
// web component
class HelloWorld extends HTMLElement {
  
  // connect component
  connectedCallback() {
    this.textContent = 'Hello World!';
  }
  
}

// register component
customElements.define( 'hello-world', HelloWorld );
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.