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 find out how to refer to the custom element name in JavaScript without repeating it
- I should look into whether
observedAttributesandattributeChangedCallbackare more appropriate than the more typical event listeners I used
References
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.