building-web-components

This is a branched, iterative repo of demos, showing examples about Web components and Stencil. Use git checkout -f to navigate through the branches in your favourite shell or explore them with the GitHub branch list.

• 01-vanillajs contains a basic example of a Web Component with embedded styles using Shadow DOM.
• 02-props shows how to add a prop using HTML attributes with some basic level of data binding.
• 03-events uses CustomEvent and dispatchEvent() from the Events API to add custom behaviour to a Web Component.
• 04-custom-component-class presents an attempt on a Component wrapper class to contain generic functionality needed to build any Web Component (a crude approximation to what a component compiler such a Stencil pretends to do).
• 05-stencil introduces Stencil, and its initial scaffolding, along with a demo component and its test cases.

Learning resources

This repo is part of a talk I gave on @beerjs/cordoba.

• Slides: https://slides.com/joelalejandrovillarrealbertoldi/web-components-stencil
• Recorded talk: https://youtu.be/kJQottDiqno (Spanish)

You can also check out:

• Stencil Docs: https://stenciljs.com/docs/introduction/
• Custom Elements v1: https://developers.google.com/web/fundamentals/web-components/customelements
• Web Components: https://www.webcomponents.org/

License

This is a learning repo, so, since everyone's a right to learn, this is an unrestricted project. Do with it as you please.