What?

The create-stencil-component package is a way to easily scaffold stencil components and reduce the amount of boilerplate code that you have to set up yourself. See below on how to use create-stencil-component.

How?

To get started with stencil simply install it to be used globally (or use npx)

npm i -g create-stencil-component

After the install has finished you can use create-stencil-component anywhere. Eventually checks and new features will be added to ensure that you will only be able to use create-stencil-component in a Stencil project.

To create a stencil component simply:

st g c <your-component-name>

This will create you a component with the tag mirroring the name provided, and the Class mirrored as a PascalCase version of the name provided. A scss stylesheet will also be provided for your coponent, so make sure that your @stencil/sass plugin is installed and set up to be used in the Stencil config.

NOTE: Names must be kebab case and contain at least two words. This helps avoid running into issues where the name used collides with element names that already exist within the HTML5 spec.

Happy Coding 👨‍💻