On Yak Shaving and md-block, a new HTML element for Markdown

md-block: A Web Component for Markdown in the Light DOM

Lea Verou has released md-block, a Web Component that processes Markdown directly in the browser. While other similar components exist, Verou’s implementation stands out by using the light DOM rather than the shadow DOM typical of Web Components. The output is plain HTML, allowing developers to style it with page-level CSS just like any other element, bypassing the often cumbersome styling constraints imposed by shadow DOM encapsulation.

As Verou explains in her write-up, the project’s origin is a classic case of yak shaving: what started as a simple idea escalated into a multi-day effort requiring a dozen ancillary tasks. The result, however, is a clean solution for embedding Markdown without build steps.

The landing page demonstrates the component via CodePen embeds using the prefill API, making it easy to test interactively. For teams frustrated with shadow DOM styling, this approach offers a pragmatic alternative.