Custom Elements
A custom element is an author-defined HTML element that represents application-specific content or behavior beyond that of built-in HTML elements.
Web Components in Action
The custom elements specification defines the browser rules for registering and implementing author-created HTML elements.
- How it is used
- Creates reusable UI that pages can include and interact with as custom HTML elements.
- How deep it goes
- Works through naming, guarded registration, rendering, events, and lifecycle timing; treats Shadow DOM as a separate concern.
- Examples
- Builds a styled photo carousel with attribute-driven content and buttons, and tests lifecycle timing with document.createElement().
- What you can do after
- Build it from scratch: register an HTMLElement subclass and give its tag rendered content and interactive behavior.
Read how Web Components in Action explains Custom Elements →
React Quickly, Second Edition
A custom element in this React context is an instance of a user-defined component that can be composed into an interface.
- How it is used
- Uses reusable components to encapsulate interface logic and reduce repeated markup.
- How deep it goes
- Defines component classes and renders instances, but stops before customization and more advanced component features.
- Examples
- Demonstrates three repeated React links, first duplicated manually and then produced from one Link component.
- What you can do after
- Build reusable React components from standard elements and render multiple component instances.
Read how React Quickly, Second Edition explains Custom Elements →
Related concepts
- Web Componentspart of · Web Components are browser standards and APIs, including custom elements and shadow DOM, for creating reusable web interface elements with encapsulated structure, presentation, and behavior.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.