After a couple of years of reading about web components (and a lot of head-scratching), I’ve finally got around to properly creating one… or at least a rough first draft!
Check out disclosure-widget on codepen.
See also my pen which imports and consumes the component.
Caveats and to-dos:
- I haven’t yet tried writing tests for a web component
- I should look into whether
attributeChangedCallbackare more appropriate than the more typical event listeners I used
I found Eric Bidelman’s article Custom Elements v1: Reusable Web Components pretty handy. In particular it taught me how to create a
<template> including a
<slot> to automatically ringfence the Light DOM content, and then to attach that template to the Shadow DOM to achieve my enhanced component.