Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryosuke Niwa rniwa

View GitHub Profile
@rniwa
rniwa / resize.html
Created Oct 15, 2019
resize event test
View resize.html
<!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 Sep 6, 2018
Dispatching click event on a radio button and observing the event phase inside a change event listener
View radio-click.html
<!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 Sep 6, 2018
Stopping of submit event at a form element
View form-stop-propagation.html
<!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 Sep 6, 2018
Dispatching a mouse event and a non-mouse on a disabled button
View disabled-mouse-event.html
<!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 Aug 30, 2018
Demonstrating the problem that the setter of textContent creates a superfluous slotchange events
View slotchange-removal.html
<!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 Aug 15, 2018
Demo that the presence of disconnectedCallback can expedite an invocation of connectedCallback
View timing-of-connectedCallback-affected-by-presence-of-disconnectedCallback.html
<!doctype html>
<html>
<body>
<pre id="log"></pre>
<script>
function log(text) {
document.getElementById('log').textContent += `${text}\n`;
}
View DOMTransactionSketch.js
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);
View no-layout.html
<!DOCTYPE html>
<html>
<body>
<script>
var NoLayout = (function () {
var layoutGuardCount = 0;
function wrapMethod(name, propertyName) {
if (NoLayout.InProduction)
@rniwa
rniwa / gist:43508508f1d418f9f576
Last active Aug 7, 2020
why-is-dom-transaction-hard
View gist:43508508f1d418f9f576
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 Aug 29, 2015
Imperative API for Node Distribution in Shadow DOM
View gist:2f14588926e1a11c65d3

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