Let’s build a web component!

The time has finally come for web components. The specs have been standardised. They’re now (or soon to be) supported in all modern browsers. You can use them with your favourite framework.

So, how do you get started? There are a bunch of libraries around that can help you build web components. But, to help you really get what they’re about, we’re going to build one from scratch, on stage, in twenty minutes.

No frameworks, no libraries, no build tools. Just you, me and an IDE.

Code-heavy which doesn’t transcribe well – see…

A few notes…

  • :root selector refers to your component when used inside it
  • You can access CSS custom props from outside your shadow DOM
  • You cannot use attributes on your component that exist in raw HTML
  • slot acts as a sort of symlink between the shadow DOM and light DOM, so you can place content
  • To style things in slots you use ::slotted, which can accept a selector
  • Adding behaviour is very much the same as normal DOM scripting and SPAs, it’s a matter of linking references and events. Custom events add flexibility.
  • Events won’t bubble up past the shadow root, unless you add a composed property to your custom event in the component