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.
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.
(function() { | |
var capturedEvents = []; | |
var capturing = false; | |
function getEventTarget(event) { | |
return event.composedPath()[0] || event.target; | |
} | |
function captureEvent(e) { | |
if (capturing) { |
(function () { | |
const capturedEvents = []; | |
let capturing = false; | |
let captureTarget = null; | |
let deferredDispatch; | |
const faultyElementSelector = [ | |
"a[href]", | |
"area[href]", | |
"audio[controls]", |
/** | |
* # 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 |
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.
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:
(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 |