Web Components & Shadow DOM

What is the correct way to extend built-in HTML elements?

class FancyButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      // Enhanced button behavior
    });
  }
}

customElements.define('fancy-button', FancyButton, { extends: 'button' });

By directly modifying the prototype
Using customElements.define with extends option
To extend built-in HTML elements: 1) Create a class that extends the specific HTML element interface (e.g., HTMLButtonElement), 2) Use customElements.define with the extends option to specify the base element, 3) Use the is attribute in HTML to instantiate the custom element, 4) Maintain all built-in functionality while adding custom behavior. This creates customized versions of standard HTML elements.
Through class inheritance only
By creating a new element type

Next Question (16/20)