What are custom elements?

Custom elements (or Web Components) are a Web Platform feature which extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an HTML tag. Currently this feature is supported by Chrome, Firefox, Opera, and Safari, and available in other browsers through polyfills.

Practical Code Example

// Custom Elements (W3C Web Standard):
class UserGreeting extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>Hello ${this.getAttribute('name')}</p>`;
  }
}
customElements.define('user-greeting', UserGreeting);