Zach’s ugly mug (his face) Zach Leatherman

<w3c-banner> Web Component

November 29, 2023

In 2014 I made a fake W3C Specification Status Banner component. It’s now a web component instead. Web components are fun and I’m having fun.

The mildly interesting thing happening in this component is that folks can decide whether or not they want to have fallback content.

The following two samples render the same, but have different fallback experiences:

<w3c-banner>W3C Candidate Recommendation</w3c-banner>
<w3c-banner text="W3C Candidate Recommendation"></w3c-banner>

This is accomplished via a <slot> with fallback content inside.

this.shadowRoot.innerHTML = `<slot>${this.getAttribute("text")}</slot>`;

This also lets me dynamically update the demo (via those radios) using innerHTML (without having to mess with observedAttributes or attributeChangedCallback or slotchange):

let el = document.querySelector("w3c-banner");
el?.innerHTML = "Unsanctioned Web Standards Fan Fiction";

< Newer
Live Editing an Eleventy Project in CloudCannon with Bookshop
Older >
Static Feedback #11: All about Eleventy

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 77 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

5 Likes

Wesley SoaresMatthias OttAlex RiviereMiriam (still)Cory :prami_pride_demi:
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)