Web Components & Shadow DOM

What is the correct way to define a custom element?

class MyElement extends HTMLElement {
  constructor() {
    super();
    // Custom element logic
  }
}
customElements.define('my-element', MyElement);

Using document.createElement with a custom tag
By registering it with customElements.define
Custom elements must be defined using customElements.define() with two arguments: 1) The element name (must contain a hyphen), and 2) The class that defines the element's behavior. The class must extend HTMLElement and can implement lifecycle callbacks like constructor(), connectedCallback(), disconnectedCallback(), attributeChangedCallback(), and adoptedCallback().
Through the Shadow DOM API only
With HTML Template tags

Next Question (2/20)