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. ...