Creating Custom Stencil Components

Creating custom components

Let’s create our custom Stencil components.

We’ll be creating the following mini-project that retrieves online JSON data and uses it to generate a thumbnail image gallery where information about each image can be “written” to a panel.

First steps

Within the system terminal (within a new Stencil project), we use the following commands to create the following new Web Components:

npx stencil generate image-component
npx stencil generate image-gallery-component

Note: The npx command is used to generate Web Components with Stencil when Stencil is not installed globally. If Stencil is installed globally, we run the above commands without the npx prefix.

When creating a Web Component from the command line with Stencil, we enter the name of the component, which must be in lowercase and separated with at least one hyphen.

The CLI component generator will then prompt us to include or exclude the following files (use the arrow keys to navigate and the spacebar to select/deselect):

• Stylesheet (.css)
• Spec test (.spec.tsx)
• E2E test (.e2e.ts)

We won’t create unit tests or end-to-end tests for this project, so feel free to deselect these options. Alternatively, leave them selected and have them sit in the generated component directories unused.

Note: You can run the above commands in the terminal provided below. Wait for the initial commands to finish executing before copying these commands one by one into the terminal.