Skip to content

Instantly share code, notes, and snippets.

@rniwa
rniwa / resize.html
Created October 15, 2019 02:10
resize event test
<!DOCTYPE html>
<html>
<body>
<pre id="log"></pre>
<script>
let lastSize = null;
function updateSize() {
const width = window.innerWidth;
const height = window.innerHeight;
@rniwa
rniwa / radio-click.html
Created September 6, 2018 20:05
Dispatching click event on a radio button and observing the event phase inside a change event listener
<!DOCTYPE html>
<html>
<body>
<input type="radio">
<script>
const input = document.querySelector('input');
const clickEvent = new MouseEvent('click', {button: 0, which: 1});
input.addEventListener('change', () => {
alert(clickEvent.eventPhase);
@rniwa
rniwa / form-stop-propagation.html
Created September 6, 2018 07:22
Stopping of submit event at a form element
<!DOCTYPE html>
<html>
<body>
<form id="outer-form" action="javascript:doAction(outerForm)">
</form>
<form id="inner-form" method="GET" action="javascript:doAction(innerForm)">
<div id="buttonParent">
<input>
<button id="submitButton" type="submit">Go</button>
</div>
@rniwa
rniwa / disabled-mouse-event.html
Last active March 8, 2022 09:52
Dispatching a mouse event and a non-mouse on a disabled button
<!DOCTYPE html>
<html>
<body>
<div><button id="button" type="submit" disabled><span>Go</span></button></div>
<pre id="log"></pre>
<script>
function logEventCapturing(event) { document.getElementById('log').textContent += `${event.type} on ${this.localName} capturing path:${event.composedPath().length}\n`; }
function logEventBubbling(event) { document.getElementById('log').textContent += `${event.type} on ${this.localName} bubbling path:${event.composedPath().length}\n`; }
@rniwa
rniwa / slotchange-removal.html
Created August 30, 2018 23:45
Demonstrating the problem that the setter of textContent creates a superfluous slotchange events
<!DOCTYPE html>
<html>
<body>
<pre id="result"></pre>
<script>
async function createTree(shadowContent)
{
const host = document.createElement('div');
host.innerHTML = '<span></span>';
@rniwa
rniwa / timing-of-connectedCallback-affected-by-presence-of-disconnectedCallback.html
Created August 15, 2018 03:25
Demo that the presence of disconnectedCallback can expedite an invocation of connectedCallback
<!doctype html>
<html>
<body>
<pre id="log"></pre>
<script>
function log(text) {
document.getElementById('log').textContent += `${text}\n`;
}
transaction = new DOMTransaction(function (container, articleList) {
var childCount = container.childNodes.length;
for (let article of articleList)
container.append(article);
// No DOM mutation is made until this function exits.
console.assert(childCount == container.childNodes.length);
});
transaction.commit(element, articles);
@rniwa
rniwa / no-layout.html
Last active August 29, 2015 14:22
no-layout
<!DOCTYPE html>
<html>
<body>
<script>
var NoLayout = (function () {
var layoutGuardCount = 0;
function wrapMethod(name, propertyName) {
if (NoLayout.InProduction)
@rniwa
rniwa / gist:43508508f1d418f9f576
Last active August 7, 2020 07:43
why-is-dom-transaction-hard
mutateElementToAffectOffsetTop(someElement);

// (1) We don't know the value of someElement.offsetTop here because we compute it lazily.

var y = (new DOMTransaction(function () {
    // (2) We need to remember the "old value" of someElement.offsetTop here.
    mutateElementToAffectOffsetTop(someElement);
    return someElement.offsetTop; 
})).execute();
@rniwa
rniwa / gist:2f14588926e1a11c65d3
Last active August 29, 2015 14:19
Imperative API for Node Distribution in Shadow DOM

Imperative API for Node Distribution in Shadow DOM

There are two approaches to the problem depending on whether we want to natively support redistribution or not.

To recap, a redistribution of a node (N_1) happens when it's distributed to an insertion point (I_1) inside a shadow root (S_1), and I_1's parent also has a shadow root which contains an insertion point which ends picking up N_1. e.g. the original tree may look like:

(host of S_1) - S_1
  + N_1         + (host of S_2) - S_2
                   + I_1           + I_2