A practical introduction to styling a Shadow DOM and Slots

During our last Thursday Ionic Zürich Meetup, after having showcased my last pet project DeckDeckGo, the new tool to create presentation using HTML and Web Components, I found myself explaining how to style a Shadow DOM and what are Slots with the help of a really simple unprepared example. As it was really fun and, I hope, easy to follow, I thought it would maybe be not that a bad idea to share the experience with a new article 😋

But, actually, the following won’t really be an article but rather a step by step practical introduction. Therefore I encourage you to open a browser and a terminal in order to try by yourself each steps displayed here under 🕹👇

Introduction to Shadow DOM

I will not go to deep in details but let’s just say that Shadow DOM are elements, used in our web page, which have their own little kingdom. Let’s even understand these components as castles with fortifications which only allow you to interact or discuss with them under certain rules or channels they would provide or not.

Let’s get started using Stencil

For the purpose of this tutorial we are going to use Stencil. First of all because, per default, components created with Stencil are shadowed and secondly because Stencil is…