How to create a web component in StencilJS - VERY SMALL BUNDLE SIZE!

"I need to create a button"
Step 1. First you need to rewire your entire home electricals.
Step 2. Then you need to make sure your floor is strong enough.
Step 3. Get a super computer that is capable of a very unique development environment
Step 4. Install 100 tools to make it easier to develop your projects.
Step 5. Configure 15 different places in your project to make sure all the tools can work.
Step 6. Run the Component Factory Tool server.
Step 7. Run your web server to access your component tool Factor server.
Step 8. Read the documentation on your Component Factory Tool so you know how to use it.
Step 9. Press button to create a new component.
Step 10. Type <button> Button </button>

There you have it, the easiest way to create a button (styling not included).
Now for styling you can install 3 other tools for SASS, CSS, Node-CSS, which will help you to add "style={color:red}" attribute to your new button!

But can we use stencil webcomponent in vue project? and how?

good video. But can we use stencil webcomponent in vue project?

I have few modules with their independent html, css and js. Is there a way (especially in stenciljs) to dynamically load these modules and run them?

What about without using npm?

'npm link' is an excellent pro tip in this video.

good stuff, thanks. any plans on making a video about stencil static site generation?

--------------- Part 1 ---------------------
npm init stencil
pick a starter -> component
project name -> my-component
confirm -> yes
cd my-component
code .
------------- Part 2 -----------------------
edit stencil.config.js (removing configuration we don't need for the time being)
npm install
npm run build
npm link => we got access to the component via npm locally (alternative to use anywhere with npm publish)
-------------- Part 3 ----------------------
cd ..
md consumer
cd consumer
code .
npm init -y
npm link my-component
create index.html (add script pointing to our component.js in node_modules folder and declaring the component with tag my-component and attributes specified in the source with @prop)
--------------- Part 4 -----------------------
add esm module (for newer browser)
add js with nomodule (for legacy browser)

It's really good. thanks, like to see more videos on Stencil.

Thx, good little project to start with! Please do more StencilJS stuff