The Joy of Mixing Custom Elements, Web Components, and Markdown

Chris Coyier Chris Coyier on

One of the nice things about Markdown is that you can just… put HTML in there too. There is no Markdown shortcut for a <div>, but you can just use a <div>. That means you can use use <my-custom-element> as well, bringing the world of Web Components into your writing and creating of content.

Deane Barker writes:

What if you want a Markdown-friendly way to represent a feedback form, or a tabbed UI, or a mortgage calculator, or something else way beyond the scope of text formatting.

For these situations, what you really want is to put a token or a placeholder in your Markdown, and have something else expand it later on into a larger, more complicated HTML construct.

What you sort of need is… Markdown for More Complicated HTML™.

Enter Custom Elements.

If you want to put React components into Markdown, you’ve got MDX, but MDX can get Very Complicated™. If you just want to use Web Components in Markdown, well, Dave really said it best.

Learn to Work with Web Components

Frontend Masters logo

Dave Rupert's course on Web Components will get you entirely up to speed on this powerful native web platform technology. As Dave says, it's HTML with Superpowers.

7-Day Free Trial

Leave a Reply

Your email address will not be published. Required fields are marked *

$839,000

Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.