Using Custom Components in Stencil Applications
Explore how to create reusable custom components in Stencil by building an image gallery. Learn to fetch remote data, manage internal state, handle events with decorators, and render dynamic JSX templates to enhance your web applications.
The image gallery component
Let’s implement a custom image gallery component and use it in a Stencil application.
image-gallery-component.tsx
This component will be used to perform the following tasks:
- Retrieve remote JSON data and parse it for rendering
- Listen for selected images and render the captured data to the DOM
- Create a new
<mi-image>component to display each image and its data
Although it is a little more involved than our image-component.tsx file, the functionality is relatively lightweight to implement thanks to both the Stencil API methods and the Fetch API that we’ll be making use ...