solarite 0.8.0 → 0.9.0

package/dist/Solarite.js

@@ -16,8 +16,17 @@ function reset() {
 		connected: new WeakSet(),
 
 		/**
-		 * Set by NodeGroup.instantiateComponent()
-		 * Used by RootNodeGroup.getSlotChildren(). */
+		 * A hand-off in flight from PathToComponent.applyAll(), which parks the child nodes
+		 * declared inside a component's tag here just before constructing it, to that
+		 * component's RootNodeGroup.instantiate(), which puts them in its <slot>.  Null when
+		 * no hand-off is pending.
+		 *
+		 * It is addressed by Constructor rather than by tag name because a customized
+		 * built-in has no usable tag at the moment it is consumed:  a <tr is="my-row">
+		 * reports a tagName of TR, and its 'is' attribute is not written until after the
+		 * constructor -- which may already have rendered -- has returned.
+		 *
+		 * @type {?{Constructor:Function, nodes:Node[]}} */
 		currentSlotChildren: null,
 
 		div: document.createElement("div"),
@@ -57,6 +66,17 @@ function reset() {
 }
 reset();
 
+// Warn when a second copy of Solarite loads into the same page.  Each copy has its own classes and its own Globals,
+// so a template or component made by one is not recognised by the other, and the failure that follows (a template
+// rendered as "[object Object]", a slot that stays empty) gives no hint of the cause.  The usual ways to get two are
+// importing both Solarite.js and Solarite.min.js, or a JSX runtime file that doesn't match the build being imported.
+// The marker is the same for every build, so the source, debug, and minified builds all detect one another.
+let copy = Symbol.for('solarite');
+if (globalThis[copy])
+	console.warn(`Solarite loaded twice: ${globalThis[copy]} and ${import.meta.url}.  Templates and components from one won't work in the other.`);
+else
+	globalThis[copy] = import.meta.url;
+
 var Globals$1 = Globals;
 
 /**
@@ -116,6 +136,12 @@ function isDelvePath(arr) {
 // d means "don't create"
 let d = {};
 
+/**
+ * Prefix that asks for a handler to bypass event delegation: `<button native:onclick=\${...}>`
+ * is bound with addEventListener at render time, taking its normal place in the browser's own
+ * dispatch order.  Shared by Util.isEvent() and PathToEvent, which strips it. */
+const nativeEventPrefix = 'native:';
+
 let Util = {
 
 	/**
@@ -315,7 +341,14 @@ let Util = {
 		return node.value; // String
 	},
 
+	/**
+	 * True for an attribute name that binds an event: `onclick`, or `native:onclick` for a
+	 * handler that is registered with addEventListener when the template renders instead of
+	 * being delegated.  Only names an element really exposes as on* handlers count, so an
+	 * attribute like `online` is never mistaken for one. */
 	isEvent(attribName) {
+		if (attribName.startsWith(nativeEventPrefix))
+			attribName = attribName.slice(nativeEventPrefix.length);
 		return attribName.startsWith('on') && attribName in Globals$1.div;
 	},
 
@@ -1072,17 +1105,20 @@ class PathToAttribValue extends Path {
 
 		// Delegated path: a bubbling event (when the root's options allow it, the default)
 		// stores its handler directly on the node as a per-event-type Symbol expando, with no
-		// EventBinding object and no addEventListener call.  The root-level dispatcher reads
-		// these expandos while walking up from the event target.  Re-renders just overwrite
-		// the property.  this.delegatedKey is set by the PathToEvent constructor only for
-		// delegatable event names, so this test also excludes non-bubbling events.
+		// EventBinding object and no addEventListener call.  When an event of that type
+		// starts, jitDispatcher() attaches a real listener to each node on its path that
+		// carries the expando, so the browser runs the handler at the node's own turn.
+		// Re-renders just overwrite the property.  this.delegatedKey is set by the PathToEvent
+		// constructor only for delegatable event names, so this test also excludes
+		// non-bubbling events and native:on* bindings.
 		if (capture === false && this.delegatedKey !== undefined) {
 			let opt = this.parentNg.rootNg.renderOptions?.eventDelegation ?? true;
-			let toDocument = opt === 'document';
-			if (opt !== false && (opt === true || toDocument || opt.includes(eventName))) {
+			// true delegates everything, an array only the events it names, and any other
+			// value (such as the retired 'document' string) counts as true.
+			if (opt !== false && (!Array.isArray(opt) || opt.includes(eventName))) {
 				let dk = this.delegatedKey;
 				if (node[dk] === undefined) // First binding of this type on this node.
-					ensureDelegatedDispatcher(root, eventName, toDocument);
+					ensureDelegatedDispatcher(root, eventName);
 				// Array-form bindings (onclick=${[fn, arg]}, the hot per-row case) store the
 				// template's own [func, ...args] array; a plain function is stored bare.
 				// Either way, nothing is allocated.
@@ -1154,7 +1190,7 @@ function getEventBinding(node, key) {
 	return b instanceof EventBinding ? (b.key === key ? b : undefined) : b[key];
 }
 
-// Bubbling events that one root-level listener can dispatch.  Same set Solid.js delegates.
+// Bubbling events the just-in-time dispatcher handles.  Same set Solid.js delegates.
 const delegatableEvents = new Set(['beforeinput', 'click', 'contextmenu', 'dblclick', 'focusin', 'focusout',
 	'input', 'keydown', 'keyup', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup',
 	'pointerdown', 'pointermove', 'pointerout', 'pointerover', 'pointerup', 'touchend', 'touchmove', 'touchstart']);
@@ -1178,79 +1214,142 @@ function delegatedKeyFor(eventName) {
 // Exported so NodeGroup.applyStamp()'s compiled stamp program can write it directly.
 const delegatedRootKey = Symbol('solariteDelegatedRoot');
 
-// Per-root-element Set of event types that already have a delegated dispatcher registered.
+// Set of event types that already have the dispatcher registered, kept on each root element
+// and on each document.
 const delegatedTypesKey = Symbol('solariteDelegatedTypes');
 
 /**
- * Register the delegated dispatcher for eventName on root if it isn't already.
- * Shared by bindEvent()'s delegated branch and NodeGroup.applyStamp()'s stamp program.
+ * Register the just-in-time dispatcher for eventName on root and on root's document, once
+ * each.  Shared by bindEvent()'s delegated branch and NodeGroup.applyStamp()'s stamp program.
  *
- * With andDocument (the eventDelegation:'document' render option), the dispatcher is also
- * registered on the document, once per event type: a bound node that gets re-parented
- * OUTSIDE its root (e.g. a toolbar a dock parks in its own chrome) bubbles past the root's
- * listener, and only a document-level listener can still reach its handler.  The
- * delegatedDoneKey marker keeps the two dispatchers from double-running the same event.
+ * Both registrations are needed.  The document's listener is what still reaches a bound node
+ * after another component re-parents it outside its root (a toolbar a dock parks in its own
+ * chrome).  The root's listener is what reaches what the document cannot see: a component
+ * that isn't in the document at all, nodes inside a closed shadow root, and a synthetic
+ * event dispatched inside any shadow root without composed:true, which never leaves it.
  * @param root {HTMLElement}
- * @param eventName {string}
- * @param andDocument {boolean} */
-function ensureDelegatedDispatcher(root, eventName, andDocument=false) {
+ * @param eventName {string} */
+function ensureDelegatedDispatcher(root, eventName) {
 	let types = root[delegatedTypesKey];
 	if (types === undefined)
 		types = root[delegatedTypesKey] = new Set();
 	if (!types.has(eventName)) {
 		types.add(eventName);
-		root.addEventListener(eventName, delegatedDispatcher);
-	}
-	if (andDocument) {
-		let doc = root.ownerDocument ?? document;
+		root.addEventListener(eventName, jitDispatcher, true);
+
+		let doc = root.ownerDocument;
 		let docTypes = doc[delegatedTypesKey];
 		if (docTypes === undefined)
 			docTypes = doc[delegatedTypesKey] = new Set();
 		if (!docTypes.has(eventName)) {
 			docTypes.add(eventName);
-			doc.addEventListener(eventName, delegatedDispatcher);
+			doc.addEventListener(eventName, jitDispatcher, true);
 		}
 	}
 }
 
-// Marks an event the innermost root dispatcher has already walked, so an outer root's
-// listener (when components are nested) skips it instead of dispatching the bindings again.
+// Set on an event by the first dispatcher to walk it, holding the length of the path it saw,
+// so the dispatchers on nested roots further down don't repeat the walk.  A root inside a
+// closed shadow root sees a longer path than the document did, because composedPath() hides
+// a closed tree from listeners outside it, and that mismatch is what makes it walk again.
 const delegatedDoneKey = Symbol('solariteDelegated');
 
 /**
- * The per-root listener for each delegated event type.  The first (innermost) root the
- * bubbling event reaches walks from the event target upward, invoking delegated handlers
- * stored on the nodes along the way; outer roots then see the done-marker and skip.
- * Each node carries the root its handlers run with as `this` (see delegatedRootKey), so
- * handlers in an outer component still run with the correct component.  event.currentTarget
- * is patched to the node whose handler is running, and restored after.  stopPropagation()
- * inside a handler ends the walk, mirroring native bubbling. */
-function delegatedDispatcher(ev) {
-	if (ev[delegatedDoneKey])
+ * One shared bubble-phase listener per event type, attached to a node only for the duration
+ * of one event.  The browser invokes it at the node's own turn in propagation, and it reads
+ * the node's handler THEN rather than when it was attached, so a handler that an earlier
+ * listener in the same dispatch replaced or removed is honored.
+ * @type {Object<string, {handleEvent: function(Event)}>} */
+const trampolines = {};
+
+/**
+ * @param type {string}
+ * @return {{handleEvent: function(Event)}} */
+function trampolineFor(type) {
+	let tramp = trampolines[type];
+	if (tramp === undefined) {
+		let dk = delegatedKeys[type];
+		tramp = trampolines[type] = {
+			// Quoted so the minifier's property mangling doesn't rename it, since the browser looks it up by name.
+			'handleEvent'(ev) {
+				let node = ev.currentTarget;
+				let a = node[dk];
+				if (a === undefined) // Unbound by an earlier handler in this same dispatch.
+					return;
+				let root = node[delegatedRootKey];
+				if (typeof a === 'function')
+					a.call(root, ev, node);
+				else
+					switch (a.length) {
+						case 1: a[0].call(root, ev, node); break;
+						case 2: a[0].call(root, a[1], ev, node); break;
+						case 3: a[0].call(root, a[1], a[2], ev, node); break;
+						default: a[0].call(root, ...a.slice(1), ev, node);
+					}
+			}
+		};
+	}
+	return tramp;
+}
+
+// Nodes still carrying a trampoline, per event type, and the one timer that clears them.
+const pending = {};
+let sweepTimer = 0;
+
+/**
+ * Remove every trampoline attached since the last sweep.  Runs as a task, which is always
+ * after every dispatch in progress has finished.  A microtask would not be: for a real click
+ * the browser runs a microtask checkpoint between listeners, so a microtask sweep would strip
+ * the trampolines before the event reached the first of them.  The sweep is housekeeping
+ * only; a trampoline left in place is harmless, because jitDispatcher() re-attaches it and
+ * the trampoline reads its handler fresh. */
+function sweep() {
+	sweepTimer = 0;
+	for (let type in pending) {
+		let nodes = pending[type];
+		if (nodes.length !== 0) {
+			pending[type] = [];
+			let tramp = trampolines[type];
+			for (let i=0; i<nodes.length; i++)
+				nodes[i].removeEventListener(type, tramp);
+		}
+	}
+}
+
+/**
+ * The capture-phase listener registered per delegated event type on every root and on the
+ * document.  It runs before the event reaches anything, walks the event's path, and attaches
+ * the type's trampoline to each node holding a delegated handler.  The browser then finishes
+ * the dispatch natively, so those handlers interleave correctly with listeners anyone else
+ * registered, stopPropagation() works in both directions, currentTarget is right, and the
+ * event needn't bubble.
+ *
+ * Each attach removes the trampoline first.  One left from an earlier event in this same task
+ * would otherwise keep its old place in the node's listener list, ahead of listeners added
+ * since; removing and re-adding puts it last, so the rule holds without exception: a
+ * delegated handler runs after every listener its element had when the event started. */
+function jitDispatcher(ev) {
+	let path = ev.composedPath();
+	if (ev[delegatedDoneKey] === path.length)
 		return;
-	ev[delegatedDoneKey] = true;
-	let dk = delegatedKeys[ev.type];
-	let current = ev.target;
-	Object.defineProperty(ev, 'currentTarget', {configurable: true, get() { return current }});
-	while (current) {
-		let a = current[dk];
-		if (a !== undefined) {
-			let root = current[delegatedRootKey];
-			if (typeof a === 'function')
-				a.call(root, ev, current);
-			else
-				switch (a.length) {
-					case 1: a[0].call(root, ev, current); break;
-					case 2: a[0].call(root, a[1], ev, current); break;
-					case 3: a[0].call(root, a[1], a[2], ev, current); break;
-					default: a[0].call(root, ...a.slice(1), ev, current);
-				}
-			if (ev.cancelBubble)
-				break;
+	ev[delegatedDoneKey] = path.length;
+
+	let type = ev.type;
+	let dk = delegatedKeys[type];
+	let tramp = trampolineFor(type);
+	let list = pending[type];
+	if (list === undefined)
+		list = pending[type] = [];
+	for (let i=0; i<path.length; i++) {
+		let node = path[i];
+		if (node[dk] !== undefined) {
+			node.removeEventListener(type, tramp);
+			node.addEventListener(type, tramp);
+			list.push(node);
 		}
-		current = current.parentNode;
 	}
-	delete ev.currentTarget; // Restore the native getter from the prototype.
+	if (list.length !== 0 && sweepTimer === 0)
+		sweepTimer = setTimeout(sweep);
 }
 
 class EventBinding {
@@ -1287,11 +1386,24 @@ class PathToEvent extends PathToAttribValue {
 	 * Undefined for non-delegatable (non-bubbling) events; bindEvent() then binds directly. */
 	delegatedKey;
 
+	/** @type {boolean} True for `native:onclick`: the handler is registered with addEventListener
+	 * when the template renders, so it runs at its element's own turn in the browser's dispatch
+	 * order instead of being delegated to the component root. */
+	native;
+
 	constructor(nodeBefore, nodeMarker, attribName=null, attrValue=null) {
 		super(null, nodeMarker, attribName, attrValue);
 		this.skipIfSame = true;
-		this.eventName = attribName ? attribName.slice(2) : null;
-		this.delegatedKey = this.eventName !== null ? delegatedKeyFor(this.eventName) : undefined;
+		let name = attribName;
+		this.native = name !== null && name.startsWith(nativeEventPrefix);
+		if (this.native)
+			name = name.slice(nativeEventPrefix.length);
+		this.eventName = name ? name.slice(2) : null;
+
+		// A native binding leaves delegatedKey undefined.  That is the single switch both
+		// bindEvent() and the compiled stamp program test to choose the direct
+		// addEventListener path, so nothing else has to know about the prefix.
+		this.delegatedKey = (this.eventName !== null && !this.native) ? delegatedKeyFor(this.eventName) : undefined;
 	}
 
 	/**
@@ -3335,106 +3447,120 @@ class PathToComponent extends Path {
 			}
 		}
 
-		// 2. Instantiate component on first time.
-		let isAttrib = el.getAttribute('_is');
-		if (el.tagName.endsWith('-SOLARITE-PLACEHOLDER') || isAttrib) {
-
-
-			// 2a. Instantiate component
-			let tagName = (isAttrib || el.tagName.slice(0, -21)).toLowerCase(); // Remove -SOLARITE-PLACEHOLDER
-			let Constructor = customElements.get(tagName);
-
-			// Not defined yet (e.g. the module is being lazily imported): keep the placeholder
-			// and instantiate when the definition lands, like a native custom-element upgrade.
-			// deferredExprs always holds the LATEST exprs so re-renders while undefined win.
-			if (!Constructor) {
-				this.deferredExprs = exprs;
-				if (!this.whenDefinedPending) {
-					this.whenDefinedPending = true;
-					console.warn(`Solarite: <${tagName}> is not defined yet; waiting for customElements.define().`);
-					customElements.whenDefined(tagName).then(() => {
-						this.whenDefinedPending = false;
-						let deferred = this.deferredExprs;
-						this.deferredExprs = null;
-						// Skip if a newer render already instantiated or replaced the placeholder.
-						if (deferred && this.nodeMarker === el && el.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
-							this.applyAll(deferred);
-					});
+		// Constructing a component runs arbitrary user code -- field initializers, the
+		// constructor body, render() -- and that code can build more components, re-entering
+		// this method and overwriting the hand-off parked below.  Saving the caller's value
+		// here and restoring it in the finally makes the JS call stack the stack this hand-off
+		// needs, and unlike an explicit stack it cannot leak if construction throws.
+		let prevSlotChildren = Globals$1.currentSlotChildren;
+		try {
+			// 2. Instantiate component on first time.
+			let isAttrib = el.getAttribute('_is');
+			if (el.tagName.endsWith('-SOLARITE-PLACEHOLDER') || isAttrib) {
+
+
+				// 2a. Instantiate component
+				let tagName = (isAttrib || el.tagName.slice(0, -21)).toLowerCase(); // Remove -SOLARITE-PLACEHOLDER
+				let Constructor = customElements.get(tagName);
+
+				// Not defined yet (e.g. the module is being lazily imported): keep the placeholder
+				// and instantiate when the definition lands, like a native custom-element upgrade.
+				// deferredExprs always holds the LATEST exprs so re-renders while undefined win.
+				if (!Constructor) {
+					this.deferredExprs = exprs;
+					if (!this.whenDefinedPending) {
+						this.whenDefinedPending = true;
+						console.warn(`Solarite: <${tagName}> is not defined yet; waiting for customElements.define().`);
+						customElements.whenDefined(tagName).then(() => {
+							this.whenDefinedPending = false;
+							let deferred = this.deferredExprs;
+							this.deferredExprs = null;
+							// Skip if a newer render already instantiated or replaced the placeholder.
+							if (deferred && this.nodeMarker === el && el.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
+								this.applyAll(deferred);
+						});
+					}
+					return;
 				}
-				Globals$1.currentSlotChildren = null;
-				return;
-			}
 
-			Globals$1.currentSlotChildren = [...el.childNodes]; // TODO: Does this need to be a stack?
-			let newEl = new Constructor(attribs);
+				// Hand the children declared inside the component's tag to the RootNodeGroup that
+				// its render() is about to create.  There is no other channel: the children have
+				// to be parked before new Constructor(), because a Solarite constructor may call
+				// this.render() itself, and the element that would otherwise carry them does not
+				// exist yet.
+				Globals$1.currentSlotChildren = {Constructor, nodes: [...el.childNodes]};
+				let newEl = new Constructor(attribs);
+
+				// 2b. Copy attributes over.
+				if (isAttrib) {
+					newEl.setAttribute('is', isAttrib);
+				//	el.removeAttribute('_is');
+				}
+				for (let attrib of el.attributes)
+					if (attrib.name !== '_is')
+						newEl.setAttribute(attrib.name, attrib.value);
 
-			// 2b. Copy attributes over.
-			if (isAttrib) {
-				newEl.setAttribute('is', isAttrib);
-			//	el.removeAttribute('_is');
-			}
-			for (let attrib of el.attributes)
-				if (attrib.name !== '_is')
-					newEl.setAttribute(attrib.name, attrib.value);
-
-			// Set dynamic attributes if they are primitive types.
-			for (let name in attribs) {
-				let val = attribs[name];
-				let valType = typeof val;
-				// Only true and false can reach here, so the undefined/null halves of the
-				// falsy test this used to spell out could never have decided anything.
-				if (valType === 'boolean') {
-					if (val)
-						newEl.setAttribute(name, '');
+				// Set dynamic attributes if they are primitive types.
+				for (let name in attribs) {
+					let val = attribs[name];
+					let valType = typeof val;
+					// Only true and false can reach here, so the undefined/null halves of the
+					// falsy test this used to spell out could never have decided anything.
+					if (valType === 'boolean') {
+						if (val)
+							newEl.setAttribute(name, '');
+					}
+
+					// If type is a non-boolean primitive, set the attribute value.
+					else if (valType==='string' || valType === 'number' || valType==='bigint')
+						newEl.setAttribute(name, val);
 				}
 
-				// If type is a non-boolean primitive, set the attribute value.
-				else if (valType==='string' || valType === 'number' || valType==='bigint')
-					newEl.setAttribute(name, val);
-			}
 
+				// 2c. If an id pointed at the placeholder, update it to point to the new element.
+				let id = newEl.getAttribute('data-id') || newEl.getAttribute('id');
+				if (id)
+					delve(this.parentNg.getRootEl(), id.split(/\./g), newEl);
 
-			// 2c. If an id pointed at the placeholder, update it to point to the new element.
-			let id = newEl.getAttribute('data-id') || newEl.getAttribute('id');
-			if (id)
-				delve(this.parentNg.getRootEl(), id.split(/\./g), newEl);
+				// 2d. Update paths to use replaced element.
+				let ng = this.parentNg;
+				this.nodeMarker = newEl;
+				for (let path of ng.paths) {
+					if (path.nodeMarker === el)
+						path.nodeMarker = newEl;
+					if (path.nodeBefore === el)
+						path.nodeBefore = newEl;
+				}
+				if (ng.startNode === el)
+					ng.startNode = newEl;
+				if (ng.endNode === el)
+					ng.endNode = newEl;
+
+				// 2f. Call render() if it wasn't called by the constructor.
+				// This must happen before we add it to the DOM which can trigger connectedCallback() -> renderFirstTime()
+				// Because that path renders it without the attribute expressions.
+				if (typeof newEl.render === 'function' && !Globals$1.rendered.has(newEl))
+					newEl.render(attribs, true);
+
+				// 2g. Update attribute paths to use the new element and re-apply them.
+				for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
+					attribPath.parentNg = this.parentNg;
+					attribPath.nodeMarker = newEl;
+					attribPath.applyAll(exprs[i]);
+				}
 
-			// 2d. Update paths to use replaced element.
-			let ng = this.parentNg;
-			this.nodeMarker = newEl;
-			for (let path of ng.paths) {
-				if (path.nodeMarker === el)
-					path.nodeMarker = newEl;
-				if (path.nodeBefore === el)
-					path.nodeBefore = newEl;
+				// 2e. Swap it to the DOM.
+				el.replaceWith(newEl);
 			}
-			if (ng.startNode === el)
-				ng.startNode = newEl;
-			if (ng.endNode === el)
-				ng.endNode = newEl;
-
-			// 2f. Call render() if it wasn't called by the constructor.
-			// This must happen before we add it to the DOM which can trigger connectedCallback() -> renderFirstTime()
-			// Because that path renders it without the attribute expressions.
-			if (typeof newEl.render === 'function' && !Globals$1.rendered.has(newEl))
-				newEl.render(attribs, true);
-
-			// 2g. Update attribute paths to use the new element and re-apply them.
-			for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
-				attribPath.parentNg = this.parentNg;
-				attribPath.nodeMarker = newEl;
-				attribPath.applyAll(exprs[i]);
-			}
-
-			// 2e. Swap it to the DOM.
-			el.replaceWith(newEl);
-		}
 
-		// 2f. Render
-		else if (typeof el.render === 'function')
-			el.render(attribs, changed);
+			// 2f. Render
+			else if (typeof el.render === 'function')
+				el.render(attribs, changed);
 
-		Globals$1.currentSlotChildren = null;
+		}
+		finally {
+			Globals$1.currentSlotChildren = prevSlotChildren;
+		}
 	}
 
 	/**
@@ -3611,6 +3737,9 @@ class Shell {
 		// Smaller fragments make cloning, path resolution, and insertion faster.
 		stripTableWhitespace(this.docFrag);
 
+		// 1c. Neutralize `is` so the browser can't upgrade a placeholder out from under us.
+		renameIsAttribs(this.docFrag);
+
 		// 2. Find placeholders
 		let node;
 		let toRemove = [];
@@ -3624,7 +3753,7 @@ class Shell {
 			
 			// Replace attributes
 			if (node.nodeType === 1) {
-				const hasIs = node.hasAttribute('is');
+				const hasIs = node.hasAttribute('_is'); // Renamed from `is` in step 1c.
 				const isComponent = (hasIs || node.tagName.includes('-'));
 				const componentAttribPaths = [];
 
@@ -3725,10 +3854,6 @@ class Shell {
 					path.attribPaths = componentAttribPaths;
 					this.paths.splice(this.paths.length - componentAttribPaths.length, 0, path); // Insert before its componentAttribPaths
 
-					if (hasIs) {
-						node.setAttribute('_is', node.getAttribute('is'));
-						node.removeAttribute('is');
-					}
 				}
 			}
 
@@ -3745,7 +3870,7 @@ class Shell {
 				// Components and slots are excluded because they move their children
 				// during instantiation, which would orphan the expression's region.
 				if (parent.nodeType === 1 && !node.previousSibling && !node.nextSibling
-					&& !parent.tagName.includes('-') && parent.tagName !== 'SLOT' && !parent.hasAttribute('is')) {
+					&& !parent.tagName.includes('-') && parent.tagName !== 'SLOT' && !parent.hasAttribute('_is')) {
 					let path = new PathToNodes(null, parent);
 					path.wholeParent = true;
 					this.paths.push(path);
@@ -4151,6 +4276,38 @@ function stripTableWhitespace(el) {
 	}
 }
 
+/**
+ * Rename every `is` attribute to `_is`, rebuilding the element to do it.
+ *
+ * A component written as a dashed tag is neutralized in the shell by renaming the TAG
+ * (`<my-tag>` becomes `<my-tag-SOLARITE-PLACEHOLDER>`), so the browser never recognizes the
+ * placeholder and never upgrades it.  A customized built-in cannot be neutralized that way,
+ * because its tag has to stay real:  a `<tr is="my-row">` that is not a `<tr>` is thrown out
+ * by the parser's table rules.  So its ATTRIBUTE is renamed instead.
+ *
+ * Renaming the attribute in place is not enough.  `is` is also recorded in an internal slot on
+ * the element, which removeAttribute() cannot clear and cloneNode() copies, so a placeholder
+ * that was parsed with `is` stays a customized built-in as far as the browser is concerned.
+ * Every clone of it is upgraded the moment it enters a document with a browsing context —
+ * running the component's constructor on the placeholder, before PathToComponent has
+ * instantiated the real element or evaluated the attribute expressions meant for it.  A
+ * constructor that renders then renders the placeholder, whose children are the ones the user
+ * declared, and those get handed to the real instance as if they were slot content.
+ *
+ * Building a fresh element and moving everything across is the only way to drop that slot.
+ * It happens once per unique template, because Shells are cached, and never per render.
+ *
+ * @param docFrag {DocumentFragment} */
+function renameIsAttribs(docFrag) {
+	for (let el of docFrag.querySelectorAll('[is]')) {
+		let clean = el.ownerDocument.createElement(el.tagName);
+		for (let attrib of el.attributes)
+			clean.setAttribute(attrib.name === 'is' ? '_is' : attrib.name, attrib.value);
+		clean.append(...el.childNodes);
+		el.replaceWith(clean);
+	}
+}
+
 // One-entry memo for Shell.get().
 let lastHtmlStrings = null, lastSvgMode = false, lastShell = null;
 
@@ -4472,17 +4629,17 @@ class NodeGroup {
 		let stampers = shell.stampPaths;
 		let rootNg = this.rootNg;
 		let root = rootNg.rootEl;
+		// Any value other than false or an array of event names means delegate everything.
 		let opt = rootNg.renderOptions?.eventDelegation;
-		let delegateDoc = opt === 'document';
-		let delegateAll = opt === undefined || opt === true || delegateDoc;
+		let delegateAll = opt !== false && !Array.isArray(opt);
 
 		// Register this shell's delegated dispatchers once for a whole run of rows.  They live on
-		// the root, not on the bound nodes, so asking per node — as the general binding path has
-		// to — would be a call and a set lookup for every handler in the list.
+		// the root and the document, not on the bound nodes, so asking per node — as the general
+		// binding path has to — would be a call and a set lookup for every handler in the list.
 		let names = shell.stampEventNames;
 		if (names !== null && delegateAll && rootNg[lastStampedShellKey] !== shell) {
 			for (let k=0; k<names.length; k++)
-				ensureDelegatedDispatcher(root, names[k], delegateDoc);
+				ensureDelegatedDispatcher(root, names[k]);
 			rootNg[lastStampedShellKey] = shell;
 		}
 
@@ -4812,13 +4969,30 @@ class RootNodeGroup extends NodeGroup {
 			if (el) {
 				this.rootEl = el;
 
-				// Save slot
-				// 1. Globals.currentSlotChildren is set if this is called via PathToComponent.applyComponent() calls render()
-				// 2. el.childNodes is set if render() is called manually for the first time.
+				// Save the children that belong in this component's <slot>, from one of two places:
+				// 1. A hand-off parked by PathToComponent.applyAll() just before it constructed
+				//    us, when this component was declared inside another template.  It carries
+				//    the Constructor it was meant for, so an unrelated component built in the
+				//    meantime -- a field initializer creating a menu, say -- leaves it alone.
+				// 2. el.childNodes, when render() is called manually for the first time.
+				// An addressed hand-off wins even when its node list is empty:  a component
+				// declared as <my-tag></my-tag> is asking for an empty slot, not for whatever
+				// its own constructor happened to put in the element.
+				//
+				// The hand-off is deliberately NOT cleared on read.  A component that builds
+				// another instance of its OWN class while constructing cannot be told apart
+				// from itself by any address, so both match; the inner one takes the nodes and
+				// this outer one takes them straight back, which is the only thing that makes
+				// that case work.
+				let handOff = Globals$1.currentSlotChildren;
+				let mySlotNodes = handOff?.Constructor === el.constructor
+					? handOff.nodes
+					: (el.childNodes.length ? [...el.childNodes] : null);
+
 				let slotChildren;
-				if (Globals$1.currentSlotChildren || el.childNodes.length) {
+				if (mySlotNodes) {
 					slotChildren = Globals$1.doc.createDocumentFragment();
-					slotChildren.append(...(Globals$1.currentSlotChildren || el.childNodes));
+					slotChildren.append(...mySlotNodes);
 				}
 
 				// If el should replace the root node of the fragment.