Skip to main content

My first Web Component: a disclosure widget

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 observedAttributes and attributeChangedCallback are 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.

External Link Bookmark Note Entry Search