Ryosuke Niwa rniwa

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();

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

	<!DOCTYPE html>
	<html>
	<body>
	<pre id="log"></pre>
	<script>

	let lastSize = null;
	function updateSize() {
	const width = window.innerWidth;
	const height = window.innerHeight;

	<!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);

	<!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>

	<!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`; }

	<!DOCTYPE html>
	<html>
	<body>
	<pre id="result"></pre>
	<script>

	async function createTree(shadowContent)
	{
	const host = document.createElement('div');
	host.innerHTML = '<span></span>';


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