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
usesCustomEvent
anddispatchEvent()
from the Events API to add custom behaviour to a Web Component.04-custom-component-class
presents an attempt on aComponent
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.
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/
This is a learning repo, so, since everyone's a right to learn, this is an unrestricted project. Do with it as you please.