Web Components 101

In case you aren't tired of all the ways to write a component yet, here's a quick intro to Web Components.

Vanilla JavaScript

<!-- HTML + JS combined in CodePen -->
<template id="vanilla-webcomponent-template">
  <style>.red { color: red; }</style>
  Hello, <span class="red">world</span>!
</template>

<script>
  class VanillaWebcomponent extends HTMLElement {
    constructor() {
      super();
      const s = this.attachShadow({ mode: 'open' });
      const t = document.getElementById('vanilla-webcomponent-template');
      s.appendChild(t.content.cloneNode(true));
    }
  }
  customElements.define('vanilla-webcomponent', VanillaWebcomponent);
</script>

<vanilla-webcomponent></vanilla-webcomponent>

import { LitElement, html, css } from 'lit';

class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;
  static properties = { name: { type: String } };
  constructor() { super(); this.name = 'World'; }
  render() { return html`<p>Hello, ${this.name}!</p>`; }
}
customElements.define('simple-greeting', SimpleGreeting);