HTMLElement is the base interface inherited by familiar HTML elements and by autonomous custom elements. Extending it lets a JavaScript class acquire element behavior while adding application-specific logic. section 2.1 section 2.8
A minimal custom element follows this progression:
- Create a class with `extends HTMLElement`. section 2.3
- Register the class with `customElements.define`, guarding with `customElements.get` when registration may run more than once. section 2.3
- Use `connectedCallback` to initialize state and populate the element when it is added to the page. section 2.6
- Add behavior through DOM queries, attributes, event listeners, methods, and styles. section 2.6
A photo carousel custom element
A `PhotoCarousel` class extends `HTMLElement`, reads `title`, `author`, and comma-separated `photos` attributes, then builds headings, an image container, and navigation buttons in `connectedCallback`. A `showPhoto` method updates the current image, while click handlers cycle through the photo list and wrap at either end. The component is registered as `<wcia-photo-carousel>` and styled with CSS. section 2.6
Figure 2.2. While there are a large number of classes that inherit from HTMLElement, here are three that produce common DOM elements that we use all the time, with the actual tags we write in our HTML.
Use the inheritance diagram to relate HTMLElement to specialized classes such as HTMLDivElement and HTMLButtonElement, and to the tags used in markup. section 2.1
