<w3c-banner> Web Component

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.

• Demo
• Code on GitHub

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";