Nick G NickGard

State switching in HTML

HTML is where mature JavaScript patterns graduate to, removing the need for scripting for common, well-established user interactions. Having a button switch some state on click is a common pattern that needs to move into a declarative HTML-only setup.

Problem statement:

Button-type buttons (<button type="button"></button>) have no inherent behavior. Currently, they require scripting to do anything. A common behavior added is to switch some state:

Menu button toggles the state of a menu between "open" and "closed"
Toggle button switches a site setting, e.g. between "dark mode," "light mode," and "match OS"/"auto"
Tab/accordion button switches the state of the tabset or accordion to one particular section (alternatively, it sets the state for the designated section to "active/open/visible" and the states for all other sections to "inactive/closed/hidden")

Animating the content attribute

In most browsers this is just going to show the letter 'A' but in the latest version of Chrome it should animate between 'A' and 'B'.

Not sure how useful this might be in the future, but it seems pretty cool!

A Pen by Robin Rendle on CodePen.

License.

	(function () {
	const clickRedirectorEventListenerSetKey = Symbol();
	if (!window[clickRedirectorEventListenerSetKey]) {
	window[clickRedirectorEventListenerSetKey] = true;
	window.addEventListener(
	"click",
	(event) => {
	const clickRedirector = event.target.closest("click-redirector");
	const redirectedTarget = document.getElementById(
	clickRedirector?.htmlFor

	/**
	* # OnlyWhen brings Media Queries to HTML.
	*
	* It solves two use-cases via a simple API.
	*
	* ## Use case #1: remove nodes from the DOM.
	*
	* What's the problem this solves? With CSS Media Queries, DOM nodes are typically
	* _hidden_ but still participate in DOM operations, like queries and IDREF resolutions.
	* To include the nodes only when a particular media query matches, use the attributes

	(function () {
	const capturedEvents = [];
	let capturing = false;
	let captureTarget = null;
	let deferredDispatch;

	const faultyElementSelector = [
	"a[href]",
	"area[href]",
	"audio[controls]",

	(function() {
	var capturedEvents = [];
	var capturing = false;

	function getEventTarget(event) {
	return event.composedPath()[0] \|\| event.target;
	}

	function captureEvent(e) {
	if (capturing) {