I’ve had an idea floating around for a while: MDX is great, but I hate all of the steps around configuring / building React components with it. If I’m writing Markdown, HTML is valid in Markdown, and Web Components are valid HTML, so why not just stick Web Components in Markdown and call it a day?
That was the idea, anyway, I just never got around to trying it. I still don’t quite grok the actual Web Components spec, but I have used Stencil, and figured with some free time today I’d give it a shot. This is the result: Web Components in Markdown. It works! Of course it does. Probably the biggest difference between it and MDX (besides, React, obviously), is that Web Components in HTML can only accept string values, so in this example rather than passing an array of image sources, I passed a comma separated list, e.g:
1<picture-gallery images="https://source.unsplash.com/lvh5L46VWuA/600x600, https://source.unsplash.com/TjbedCFPQdc/600x600, https://source.unsplash.com/caM2RdHVAoc/600x600"></picture-gallery>
One other nice thing here is you can stick fallback HTML into the <picture-gallery> part, and you get fallback content. If the JS loads, yay, a gallery. If not, whatever. I made an example of that here:
See the Pen Progressive enhancement with Web Components by Joseph Martucci (@jjmartucci) on CodePen.
You can see the code behind the site on Github, it’s slap-dash but it is functional.
Permalink