published on in news

A Web Component for Swapping Text between Text, HTML, and Markdown Chris Coyier

A couple of re-aligns ago on this website, my “biography” (a bit of text about myself) had some interactive controls on it. You could swap it between:

  • Short, Medium, and Long
  • First-Person and Third-Person
  • Text, HTML, and Markdown

The big idea was to make it self-serve when someone asked me for this, say to accompany and interview or for an introduction at a conference. You never know what format they want it in, what the length limit is, or which tense. So I just did them all!

You’d think I would have done something clever to make that work, right?

I didn’t.

That’s why I don’t have it anymore. I created each possible permutation (3 × 2 × 3 = 18) separately, then just swapped between them depending on the combination of radio input values. Editing the bio was far too hard.

Couldn’t it be automated, though? The “which type of output” I always thought would be the easiest. So the other day I farted around with that and got this far:

I made it a Web Component named <bio-machine>, so it could be portable if needed. It’s not published anywhere except this Pen, so you can’t really just import and and use it, but maybe someday. It would need work.

The idea is that you only provide the Markdown, and the other formats are automatically created and the controls are added.

<bio-machine> <div># Hello, World! I'm Chris.</div> </bio-machine>Code language: HTML, XML (xml)

All the rest of the code you see there is just setting up the Web Component.

I used a beta version of Tram-Lite. I like the idea that it requires no build step at all and the entire component is instantiated in a big block of HTML. I ultimately needed the help of Jesse Jurman, the creator of Tram-Lite, because the event binding stuff they built into v4 is just award with radio controls (apparently a generally weird problem).

Notes on the overall experience:

  • I couldn’t just do this.innerText to grab all the text from the Light DOM. Notice the awkward <div> wrapper which allows for this.querySelector("div").innerText. Feels like there should be a better way.
  • I don’t know that Tram-Lite lends itself well to packaging a component and letting people import and use it from a CDN like many other Web Components. I like the HTML focus though. Is that what this kind of future syntax is about? import { MyComponent } from "./component.html" with { type: 'html' }; I honestly don’t know.
  • I also couldn’t use <script type="module"> within Tram-Lite, so the other dependencies (the Markdown converter, the Syntax Highlighter, etc) had to be just global scripts, not imported. Again, I like the approach and philosophy of Tram-Lite, but it probably makes more sense to use Lit or something for this. I would have been more comfortable just attaching onChange handles to all the radios anyway.
  • How would I approach allowing styles in? Certainly I could use ::part and whatnot to set the main background and text colors, but not with styling links, because you can’t make each link a part and that would be ridiculous anyway. And because you can’t do like ::part(bio) a because you can’t use the cascade, that’s off. So you’d have to send through a --link-color custom property or something, which is fine, but that’s potentially mix-and-matching styling approaches which feels silly.
  • I probably haven’t done the accessibility correctly here, in regards to the changing content. Should I do something like <div role="region" aria-live="polite"> for the bio area?

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgbnxzgY6aZLCdkmKwsLnPqKWepqRis7C%2BjKyumqignruoedOer61lkprBuLHEp2StnaipeqnAzKVkmqaUYrqivsqdprCmXw%3D%3D