solarite 0.7.1 → 0.9.0

package/dist/Solarite-debug.js

@@ -1,6 +1,6 @@
 /*@__NO_SIDE_EFFECTS__*/
 function assert(val) {
-	//#IFDEV
+	//#IFDEBUG
 	if (!val) {
 		//debugger;
 		throw new Error('Assertion failed: ' + val);
@@ -21,8 +21,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"),
@@ -62,6 +71,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;
 
 /**
@@ -121,6 +141,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 = {
 
 	/**
@@ -160,13 +186,15 @@ let Util = {
 			// Don't clobber a non-element value.  For a simple (non-nested) id this covers two cases:
 			// an inherited/built-in property like `title` or `style`, or an own property that already
 			// holds a non-Node value.  A previously-bound element (a Node) is fine to re-assign.
+			// This can only fail on a mistake in the component's own template, so a developer meets it
+			// the first time the component renders and never again at runtime.  It nonetheless SHIPS,
+			// and deliberately: debug-strip blocks are removed from dist/Solarite.js, which is what
+			// npm serves, so hiding it there would delete it for everyone, not only for production.
 			if (!id.includes('.')) {
 				let existing = root[id];
 				let isInherited = (id in root) && !Object.hasOwn(root, id);
 				if (!existing?.nodeType && (existing != null || isInherited))
-					throw new Error(`${root.constructor.name}.${id} can't be a reference to ` +
-						`<${el.tagName.toLowerCase()} id="${id}"> because it would clobber an existing ` +
-						`${isInherited ? 'built-in ' : ''}property.  Rename the id or the property.`);
+					throw new Error(`Solarite: id="${id}" would overwrite an existing ${root.constructor.name} property.`);
 			}
 
 			delve(root, id.split(/\./g), el);
@@ -185,29 +213,29 @@ let Util = {
 	bindStyles(style, root) {
 
 		let tagName = root.tagName.toLowerCase();
-		let styleId, attribSelector;
+
+		// A global style is scoped by tag name alone, so it needs no attribute in the selector.
+		let attribSelector = '';
 
 		if (style.hasAttribute('global') || style.hasAttribute('data-global')) {
-			styleId = tagName;
-			attribSelector = '';
-			let doc = Globals$1.doc || root.ownerDocument || document;
-			if (!doc.head.querySelector(`style[data-style="${styleId}"]`)) {
-				doc.head.append(style);
-				style.setAttribute('data-style', styleId);
-			}
-			else // TODO: Make sure the style has no expressions.
+			let head = Globals$1.doc.head;
+			if (head.querySelector(`style[data-style="${tagName}"]`))
+				// TODO: Make sure the style has no expressions.
 				style.remove(); // already in the head.
+			else {
+				head.append(style);
+				style.setAttribute('data-style', tagName);
+			}
 		}
 		else {
 			let styleId = root.getAttribute('data-style');
 			if (!styleId) {
-				// Keep track of one style id for each class.
+				// Keep track of one style id for each class.  Reading the static walks up to a parent
+				// class's counter if this class has never been styled, but the assignment always lands
+				// on this class, so each class then counts on from where its parent left off.
 				// TODO: Put this outside the class in a map, so it doesn't conflict with static properties.
-				if (!root.constructor.styleId)
-					root.constructor.styleId = 1;
-				styleId = root.constructor.styleId++;
-
-				root.setAttribute('data-style', styleId);
+				let Class = root.constructor;
+				root.setAttribute('data-style', styleId = Class.styleId = (Class.styleId || 0) + 1);
 			}
 
 			attribSelector = `[data-style="${styleId}"]`;
@@ -217,7 +245,19 @@ let Util = {
 		for (let child of style.childNodes) {
 			if (child.nodeType === 3) {
 				let oldText = child.textContent;
-				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}${attribSelector}`);
+
+				// One pass rewrites both forms of the selector:
+				// 1.  The functional form ':host(X)' — the host element when it also matches X — unwraps
+				//     so X sits right after the scoped name:  tag[data-style="1"]X.  X may hold one
+				//     nested group like ':not(.open)'; deeper parentheses can't be paired by a regex,
+				//     so such an X is left as written rather than half-rewritten into a selector the
+				//     browser would discard silently.
+				// 2.  Plain ':host'.  The lookahead turns down longer names (':host-context') and '(',
+				//     which only follows ':host' when alternative 1 already gave up on it, and accepts
+				//     the end of the text node, where an expression may have split a dynamic style.
+				let newText = oldText.replace(
+					/:host(?:\(((?:[^()]|\([^()]*\))*)\)|(?![-a-z0-9_(]))/gi,
+					`${tagName}${attribSelector}$1`);
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
@@ -238,17 +278,15 @@ let Util = {
 	 * 'UIForm' => 'ui-form'
 	 * 'A100' => 'a-100' */
 	camelToDashes(str) {
-		// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
-		str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
-
-		// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
-		str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
-
-		// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
-		str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
-
-		// Convert all the remaining capital letters to lowercase.
-		return str.toLowerCase();
+		// One pass finds all three dash positions.  Each alternative matches only the character
+		// *before* the boundary and uses a lookahead for what follows, so the following character
+		// is never consumed and can still start the next boundary.  That's what lets the three
+		// rules interleave in a single scan the way three sequential replaces used to:
+		// 1.  a lowercase letter or digit before a capital ('ProperName').
+		// 2.  a capital before a capital+lowercase pair, i.e. the last capital of a run ('HTMLElement').
+		// 3.  a letter before a digit ('A100').
+		// '$&-' appends the dash after the matched character, then everything folds to lowercase.
+		return str.replace(/[a-z0-9](?=[A-Z])|[A-Z](?=[A-Z][a-z])|[a-zA-Z](?=\d)/g, '$&-').toLowerCase();
 	},
 
 	/**
@@ -264,13 +302,24 @@ let Util = {
 		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
 	},
 
+	/**
+	 * Register Class as a custom element, unless it's registered already.
+	 * @param Class {typeof HTMLElement}
+	 * @param tagName {?string} Name to register under.  Defaults to the dashed form of the class name.
+	 * @return {string} The tag name Class is registered under, whether we just registered it or it
+	 *     was already in the registry under some other name.  Callers that emit markup for the class
+	 *     use this instead of re-deriving the name, which guesses wrong for any class registered
+	 *     under a name that isn't camelToDashes(Class.name). */
 	defineClass(Class, tagName) {
-		if (!customElements[getName](Class)) { // If not previously defined.
-			tagName = tagName || Util.camelToDashes(Class.name);
-			if (!tagName.includes('-')) // Browsers require that web components always have a dash in the name.
-				tagName += '-element';
-			customElements[define](tagName, Class);
-		}
+		let defined = customElements[getName](Class);
+		if (defined) // Previously defined.
+			return defined;
+
+		tagName = tagName || Util.camelToDashes(Class.name);
+		if (!tagName.includes('-')) // Browsers require that web components always have a dash in the name.
+			tagName += '-element';
+		customElements[define](tagName, Class);
+		return tagName;
 	},
 
 	/**
@@ -297,8 +346,15 @@ let Util = {
 		return node.value; // String
 	},
 
-	isEvent(attrName) {
-		return attrName.startsWith('on') && attrName in Globals$1.div;
+	/**
+	 * 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;
 	},
 
 	/**
@@ -335,16 +391,13 @@ let Util = {
 	 * @returns {Object} */
 	splitAttribs(str) {
 		let result = {};
-		let attrs = (str + '') // Split string into multiple attributes.
-			.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|\S+))/g)
-			.map(text => text.trim())
-			.filter(text => text.length);
 
-		for (let attr of attrs) {
-			let [name, value] = attr.split(/\s*=\s*/); // split on first equals.
-			value = (value || '').replace(/^(['"])(.*)\1$/, '$2'); // trim value quotes if they match.
-			result[name] = value;
-		}
+		// One scan collects every name and its value.  The value is optional so a boolean attribute
+		// written on its own ('disabled') still lands in the result with an empty value, and the three
+		// value alternatives capture *inside* the quotes so no separate quote-trimming pass is needed.
+		// Whatever doesn't look like an attribute name is skipped rather than becoming a bogus key.
+		(str + '').replace(/([\w-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g,
+			(_, name, dq, sq, bare) => result[name] = dq ?? sq ?? bare ?? '');
 
 		return result;
 	},
@@ -382,19 +435,14 @@ let Util = {
 	 * @param nodes {Node[]|NodeList}
 	 * @returns {Node[]} */
 	trimEmptyNodes(nodes) {
-		const shouldTrimNode = node =>
-			node.nodeType !== Node.ELEMENT_NODE &&
-			(node.nodeType !== Node.TEXT_NODE || node.textContent.trim() === '');
-
-		// Convert nodeList to an array for easier manipulation
-		const result = [...nodes];
+		// nodeType 1 is an element and 3 is a text node; the literals are what Node.ELEMENT_NODE
+		// and Node.TEXT_NODE are defined as, and they cost a fraction of the bytes.
+		let isEmpty = node => node.nodeType !== 1 && (node.nodeType !== 3 || !node.textContent.trim());
 
-		// Trim from the start
-		while (result.length > 0 && shouldTrimNode(result[0]))
+		let result = [...nodes]; // A NodeList can't shift() or pop().
+		while (result.length && isEmpty(result[0]))
 			result.shift();
-
-		// Trim from the end
-		while (result.length > 0 && shouldTrimNode(result[result.length - 1]))
+		while (result.length && isEmpty(result[result.length - 1]))
 			result.pop();
 
 		return result;
@@ -410,7 +458,7 @@ let getName = 'getName';
 
 
 // For debugging only
-//#IFDEV
+//#IFDEBUG
 function setIndent$1(items, level=1) {
 	if (typeof items === 'string')
 		items = items.split(/\r?\n/g);
@@ -510,6 +558,23 @@ class Path {
 	 * @type {Node[]} Cached result of getNodes() */
 	nodesCache;
 
+	/** @type {boolean|undefined} True when this path provides an attribute of a web component
+	 * (a -solarite-placeholder element).  Only attribute paths ever set it true, but it's
+	 * declared here on every Path because clone() and cloneWithNodes() copy it to every clone;
+	 * declaring it keeps those stores from transitioning the clone's hidden class. */
+	isComponentAttrib;
+
+	/** @type {boolean} True when re-applying an expression identical to the one already
+	 * applied is provably a no-op, so a re-render can skip this path entirely.  Only event
+	 * bindings qualify: binding the same handler to the same node again changes nothing,
+	 * while an attribute or a child expression may have been altered outside the template. */
+	skipIfSame = false;
+
+	/** @type {boolean|undefined} True when the attribute is a live HTML property
+	 * (checked/value/selected — Util.isHtmlProp), which users can flip underneath the
+	 * template.  Declared here for the same hidden-class reason as isComponentAttrib. */
+	isHtmlProperty;
+
 	// Set only on Shell paths, never on cloned instances, so they're not declared as
 	// class fields; that would cost a store per field on every clone:
 	// nodeBeforeIndex {int} Index of nodeBefore among its parentNode's children.
@@ -523,7 +588,7 @@ class Path {
 	constructor(nodeBefore, nodeMarker) {
 		this.nodeBefore = nodeBefore;
 		this.nodeMarker = nodeMarker;
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
 	}
 
 	/**
@@ -545,7 +610,12 @@ class Path {
 	 * [[expr5], [expr6, expr7]] // arguments to second my-component constructor.
 	 * [expr5]                   // user attribute value.
 	 * [expr6, expr7]            // role attribute value. */
-	apply(exprs) {}
+	applyAll(exprs) {
+		//#IFDEBUG
+		assert(Array.isArray(exprs));
+		//#ENDIF
+		this.applySingle(exprs[0]);
+	}
 
 	/**
 	 * Fast path used by NodeGroup.applyExprs() when every path consumes exactly one expression.
@@ -555,26 +625,12 @@ class Path {
 
 	getExpressionCount() { return 1 }
 
-
 	/**
-	 * Resolve nodeMarkerPath to new root.
-	 * TODO: Make clone() use this.*/
-	getNewNodeMarker(newRoot, pathOffset) {
-		let root = newRoot;
-		let path = this.nodeMarkerPath;
-		let pathLength = path.length - pathOffset;
-		for (let i=pathLength-1; i>0; i--) { // Resolve the path.
-			//#IFDEV
-			assert(root.childNodes[path[i]]);
-			//#ENDIF
-			root = root.childNodes[path[i]];
-		}
-		let childNodes = root.childNodes;
-
-		return pathLength
-			? childNodes[path[0]]
-			: newRoot;
-	}
+	 * The value a path hands to a component constructor, for the single-expression paths.
+	 * PathToAttribValue overrides this to join its surrounding static strings.
+	 * @param exprs {Expr[]}
+	 * @return {Expr} */
+	getValue(exprs) { return exprs[0] }
 
 
 	/**
@@ -584,7 +640,7 @@ class Path {
 	 * @param nodeMarker {Node}
 	 * @return {Path} */
 	cloneWithNodes(nodeBefore, nodeMarker) {
-		let result = new this.constructor(nodeBefore, nodeMarker, this.attrName, this.attrValue);
+		let result = new this.constructor(nodeBefore, nodeMarker, this.attribName, this.attrValue);
 		result.isComponentAttrib = this.isComponentAttrib;
 		result.wholeParent = this.wholeParent;
 		result.isHtmlProperty = this.isHtmlProperty;
@@ -596,41 +652,25 @@ class Path {
 	 * @param pathOffset {int}
 	 * @return {Path} */
 	clone(newRoot, pathOffset=0) {
-		/*#IFDEV*/this.verify();/*#ENDIF*/
-
-		// Resolve node paths.
-		let nodeMarker, nodeBefore;
-		let root = newRoot;
-		let path = this.nodeMarkerPath;
-		let pathLength = path.length - pathOffset;
-		for (let i=pathLength-1; i>0; i--) { // Resolve the path.
-			//#IFDEV
-			assert(root.childNodes[path[i]]);
-			//#ENDIF
-			root = root.childNodes[path[i]];
-		}
-		let childNodes = root.childNodes;
-
-		nodeMarker = pathLength
-			? childNodes[path[0]]
-			: newRoot;
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
+
+		// Resolve node paths.  nodeBefore is always a sibling of nodeMarker (Shell builds it from
+		// nodeMarker.previousSibling, or inserts a comment immediately before it), so the list
+		// nodeBeforeIndex counts within is the marker's own parent's childNodes.  An empty path
+		// leaves the marker as newRoot itself, and then that list is newRoot's children.
+		let nodeBefore;
+		let nodeMarker = Path.resolve(newRoot, this.nodeMarkerPath, pathOffset);
 		if (this.nodeBefore) {
-			//#IFDEV
+			let childNodes = (nodeMarker === newRoot ? newRoot : nodeMarker.parentNode).childNodes;
+			//#IFDEBUG
 			assert(childNodes[this.nodeBeforeIndex]);
 			//#ENDIF
 			nodeBefore = childNodes[this.nodeBeforeIndex];
-
 		}
 
-		let result = new this.constructor(nodeBefore, nodeMarker, this.attrName, this.attrValue);
+		let result = this.cloneWithNodes(nodeBefore, nodeMarker);
 
-		result.isComponentAttrib = this.isComponentAttrib;
-		result.wholeParent = this.wholeParent;
-
-		// TODO: Put this in PathToAttribValue.clone().
-		result.isHtmlProperty = this.isHtmlProperty;
-
-		//#IFDEV
+		//#IFDEBUG
 		result.verify();
 		//#ENDIF
 
@@ -654,14 +694,21 @@ class Path {
 	 * Note that the path is backward, with the outermost element at the end.
 	 * @param root {HTMLElement|Document|DocumentFragment|ParentNode}
 	 * @param path {int[]}
+	 * @param skip {int} How many of the outermost steps to leave off, for when root is
+	 *   already that many levels down from where the path was recorded.  An empty walk
+	 *   (skip === path.length) returns root itself.
 	 * @returns {Node|HTMLElement|HTMLStyleElement} */
-	static resolve(root, path) {
-		for (let i=path.length-1; i>=0; i--)
+	static resolve(root, path, skip=0) {
+		for (let i=path.length-1-skip; i>=0; i--) {
+			//#IFDEBUG
+			assert(root.childNodes[path[i]]);
+			//#ENDIF
 			root = root.childNodes[path[i]];
+		}
 		return root;
 	}
 
-	//#IFDEV
+	//#IFDEBUG
 
 	/** @return {HTMLElement|ParentNode} */
 	getParentNode() {
@@ -695,122 +742,236 @@ class Path {
 	//#ENDIF
 }
 
-class HtmlParser {
-	constructor() {
-		this.defaultState = {
-			context: HtmlParser.Text, // possible values: 'TEXT', 'TAG', 'ATTRIBUTE'
-			quote: null, // possible values: null, '"', "'"
-			buffer: '',
-			lastChar: null
-		};
-		this.state = {...this.defaultState};
+/**
+ * A key-scoped selection that updates only the rows it actually affects.
+ *
+ * Rendering a list normally means calling render() and letting the reconciler decide what
+ * changed.  That is the right default, but it is a poor fit for a selection: moving a
+ * highlight from one row of a thousand to another changes two attributes, and asking the
+ * reconciler about it means walking the whole list to discover that fact.
+ *
+ * A Selector short-circuits that.  when() hands each row one of exactly two objects — the
+ * selected one or the unselected one — and set() reaches the two rows that change through
+ * the list they were rendered into, writing their attributes directly with no render() call.
+ *
+ * This is the same primitive as Solid's createSelector, adapted to a library that has no
+ * signals: the list, not a subscription, is what carries the binding.
+ *
+ * Because set() locates a row by its key, **the rows must be keyed** — the row template needs
+ * a key=${...} attribute.  set() throws on an unkeyed list rather than silently doing nothing.
+ */
+
+/**
+ * The value an attribute is bound to.  There are only ever **two** of these per Selector,
+ * both built in its constructor: one standing for "this row is the selected one" and one for
+ * "this row is not".  when() returns whichever of the two the row's key calls for.
+ *
+ * Two singletons rather than one object per key is what makes a selector free to create.  A
+ * row of a freshly-drawn list with nothing selected gets the unselected singleton, whose
+ * value is the off value, so there is no allocation, no map entry and no DOM call — only the
+ * two stores that record where the list lives.  It also sharpens the re-render skip: a row's
+ * expression changes identity exactly when its selectedness changes, so
+ * NodeGroup.rewriteStamp() rewrites the rows that gained or lost the selection and no others.
+ */
+class SelectorRef {
+
+	/** @type {Selector} */
+	selector;
+
+	/** @type {boolean} True on the singleton that stands for the selected row. */
+	selected;
+
+	constructor(selector, selected) {
+		this.selector = selector;
+		this.selected = selected;
 	}
 
-	reset() {
-		this.state = {...this.defaultState};
-		return this.state.context;
+	/** @return {*} The value this ref currently stands for. */
+	value() {
+		let s = this.selector;
+		return this.selected ? s.onValue : s.offValue;
 	}
 
 	/**
-	 * Parse the next chunk of html, starting with the same context we left off with from the previous chunk.
-	 * @param html {string}
-	 * @param onContextChange {?function(html:string, index:int, prevContext:string, nextContext:string)}
-	 *     Called every time the context changes, and again at the last context.
-	 * @return {('Attribute','Text','Tag')} The context at the end of html.  */
-	parse(html, onContextChange=null) {
-		if (html === null)
-			return this.reset();
-
-		for (let i = 0; i < html.length; i++) {
-			const char = html[i];
-			switch (this.state.context) {
-				case HtmlParser.Text:
-					if (char === '<' && html[i + 1].match(/[/a-z!]/i)) { // Start of a tag or comment.
-						onContextChange?.(html, i, this.state.context, HtmlParser.Tag);
-						this.state.context = HtmlParser.Tag;
-						this.state.buffer = '';
-					}
-					break;
-				case HtmlParser.Tag:
-					if (char === '>') {
-						onContextChange?.(html, i+1, this.state.context, HtmlParser.Text);
-						this.state.context = HtmlParser.Text;
-						this.state.quote = null;
-						this.state.buffer = '';
-					}
-					else if (char === ' ' && !this.state.buffer) {
-						// No attribute name is present. Skipping the space.
-						continue;
-					}
-					else if (char === ' ' || char === '/' || char === '?') {
-						this.state.buffer = ''; // Reset the buffer when a delimiter or potential self-closing sign is found.
-					}
-					else if (char === '"' || char === "'" || char === '=') {
-						onContextChange?.(html, i, this.state.context, HtmlParser.Attribute);
-						this.state.context = HtmlParser.Attribute;
-						this.state.quote = char === '=' ? null : char;
-						this.state.buffer = '';
-					}
-					else
-						this.state.buffer += char;
-					break;
-				case HtmlParser.Attribute:
-					// Start an attribute quote.
-					if (!this.state.quote && !this.state.buffer.length && (char === '"' || char === "'")) {
-						this.state.quote = char;
-					}
-					else if (char === this.state.quote || (!this.state.quote && this.state.buffer.length)) {
-						onContextChange?.(html, i, this.state.context, HtmlParser.Tag);
-						this.state.context = HtmlParser.Tag;
-						this.state.quote = null;
-						this.state.buffer = '';
-					}
-					else if (!this.state.quote && char === '>') {
-						onContextChange?.(html, i+1, this.state.context, HtmlParser.Text);
-						this.state.context = HtmlParser.Text;
-						this.state.quote = null;
-						this.state.buffer = '';
-					}
-					else if (char !== ' ')
-						this.state.buffer += char;
-
-					break;
-			}
+	 * Write this ref's value to an element's attribute, and tell the selector where the list
+	 * is so that a later set() can find any row in it.
+	 *
+	 * Called by PathToAttribValue when the ref appears as an attribute expression.  It runs
+	 * once per row per render, so it is deliberately nothing but two stores and a write that
+	 * the common case skips.
+	 *
+	 * @param node {Node} The element carrying the attribute.
+	 * @param attribName {string}
+	 * @param parentNg {NodeGroup} The row this attribute belongs to. */
+	bind(node, attribName, parentNg) {
+		// set() writes through the row's own root element, so an attribute anywhere deeper
+		// would be found at bind time and then written somewhere else at set() time.  Catching
+		// it here turns a silently misplaced attribute into a clear message.  It SHIPS: it is not
+		// in a debug-strip block, and it must not be, because the failure it catches is silent.
+		if (parentNg.startNode !== node)
+			throw new Error(`Solarite: a selector must be on the row's root element.`);
+
+		let s = this.selector;
+		s.attribName = attribName;
+		s.path = parentNg.parentPath;
+
+		let v = this.selected ? s.onValue : s.offValue;
+
+		// Matches PathToAttribValue.applySingle: an empty or falsy value leaves no attribute
+		// behind, so a selector never adds markup a hand-written implementation wouldn't have.
+		if (v === '' || v === false || v === null || v === undefined) {
+			// A just-cloned row provably carries no attribute of this name yet, so the
+			// removeAttribute — a DOM call for every row of the list — can be skipped.
+			if (parentNg.firstApply !== true)
+				node.removeAttribute(attribName);
 		}
-		onContextChange?.(html, html.length, this.state.context, null);
-		return this.state.context;
+		else
+			node.setAttribute(attribName, v);
 	}
 }
 
-HtmlParser.Attribute = 'Attribute';
-HtmlParser.Text = 'Text';
-HtmlParser.Tag = 'Tag';
+/**
+ * Created by h.selector().  Holds one selected key.
+ *
+ * Only attribute expressions can bind a selector; using one as element content throws,
+ * because writing text through this path would need bookkeeping the two-node fast case
+ * doesn't want.
+ *
+ * The selector keeps **no per-row state at all** — no map of keys, nothing to sweep, and
+ * nothing that could pin a removed row's element in memory.  All it remembers is which
+ * attribute it drives and which list it was rendered into.
+ */
+class Selector {
+
+	/** @type {*} The selected key, or null. */
+	#key = null;
+
+	/** @type {SelectorRef} Returned by when() for the row whose key is selected. */
+	#on = new SelectorRef(this, true);
+
+	/** @type {SelectorRef} Returned by when() for every other row. */
+	#off = new SelectorRef(this, false);
+
+	/** @type {*} Value the bound attribute takes for the selected key.  Held here rather than
+	 * on each ref, so the two refs stay interchangeable between call sites. */
+	onValue;
+
+	/** @type {*} Value it takes for every other key. */
+	offValue = '';
+
+	/** @type {?string} The attribute this selector drives, learned when a row binds. */
+	attribName = null;
+
+	/** @type {?PathToNodes} The list this selector's rows were rendered into, learned when a
+	 * row binds.  set() asks it for the NodeGroup holding a given key. */
+	path = null;
+
+	/** @param key {*} The initially selected key. */
+	constructor(key = null) {
+		this.#key = key;
+	}
+
+	/** @return {*} The selected key. */
+	get key() {
+		return this.#key;
+	}
+
+	/**
+	 * Bind an attribute to whether key is the selected one.
+	 *
+	 *	 h`<tr key=${row.id} class=${sel.when(row.id, 'danger')}>`
+	 *
+	 * @param key {*} This row's key.
+	 * @param on {*} Value the attribute takes when key is selected.
+	 * @param off {*} Value it takes otherwise.  '' removes the attribute.
+	 * @return {SelectorRef} */
+	when(key, on, off = '') {
+		this.onValue = on;
+		this.offValue = off;
+		return key === this.#key ? this.#on : this.#off;
+	}
+
+	/**
+	 * Move the selection.  Writes at most two attributes — the row losing the selection and
+	 * the row gaining it — and touches nothing else.  There is no render() call.
+	 * @param key {*} The newly selected key, or null for none. */
+	set(key) {
+		let old = this.#key;
+		if (old === key)
+			return;
+		this.#key = key;
+
+		// Nothing has rendered a row yet, so there is no list to write into.  The new key
+		// still takes effect: rows drawn later come up already carrying the attribute.
+		if (this.path === null)
+			return;
+
+		this.#write(old, this.offValue);
+		this.#write(key, this.onValue);
+	}
+
+	/**
+	 * Find the row holding key and give its root element the value v.
+	 * @param key {*}
+	 * @param v {*} */
+	#write(key, v) {
+		if (key === null || key === undefined)
+			return;
+
+		let ngs = this.path.nodeGroups;
+		if (ngs === null || ngs.length === 0)
+			return;
+
+		if (ngs[0].key === undefined)
+			throw new Error('Solarite: a selector must be on a keyed list, as key=${...}.');
+
+		// A linear scan over the rows.  The list is walked only when the selection actually
+		// moves — twice per user click, not once per row per render — so a thousand pointer
+		// comparisons here cost far less than the per-row index that would avoid them.
+		let ng = null;
+		for (let i = 0; i < ngs.length; i++)
+			if (ngs[i].key === key) {
+				ng = ngs[i];
+				break;
+			}
+		if (ng === null)
+			return;
+
+		// The selector owns an attribute on the row's own root element, which for a
+		// single-root row template is exactly the NodeGroup's startNode.
+		let node = ng.startNode;
+		if (node === null || node.nodeType !== 1)
+			return;
+
+		if (v === '' || v === false || v === null || v === undefined)
+			node.removeAttribute(this.attribName);
+		else
+			node.setAttribute(this.attribName, v);
+	}
+}
 
 class PathToAttribValue extends Path {
 
 	/** @type {?string} Used only if type=AttribType.Value. */
-	attrName;
+	attribName;
 
 	/**
 	 * @type {?string[]} Used only if type=AttribType.Value. If null, use one expr to set the whole attribute value. */
 	attrValue;
 
-	/** @type {boolean} Provides value for attribute on a component. */
-	isComponent;
+	// isComponentAttrib and isHtmlProperty are declared on the Path base class.
 
-	isHtmlProperty;
-
-	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
+	constructor(nodeBefore, nodeMarker, attribName=null, attrValue=null) {
 		super(null, nodeMarker);
-		this.attrName = attrName;
+		this.attribName = attribName;
 		this.attrValue = attrValue;
 	}
 
 	/**
 	 * Set the value of an attribute.  This can be for any attribute, not just attributes named "value".
 	 * @param exprs {Expr[]} */
-	apply(exprs) {
-		//#IFDEV
+	applyAll(exprs) {
+		//#IFDEBUG
 		assert(Array.isArray(exprs));
 		//#ENDIF
 
@@ -823,14 +984,14 @@ class PathToAttribValue extends Path {
 			// Only update attributes if the value has changed.
 			// This is needed for setting input.value, .checked, option.selected, etc.
 			let oldVal = isProp
-				? node[this.attrName]
-				: node.getAttribute(this.attrName);
+				? node[this.attribName]
+				: node.getAttribute(this.attribName);
 			if (oldVal !== joinedValue) {
 				if (isProp)
-					node[this.attrName] = joinedValue;
-				else if (this.attrName === 'value' && node.hasAttribute('contenteditable'))
+					node[this.attribName] = joinedValue;
+				else if (this.attribName === 'value' && node.hasAttribute('contenteditable'))
 					node.innerHTML = joinedValue;
-				node.setAttribute(this.attrName, joinedValue);
+				node.setAttribute(this.attribName, joinedValue);
 			}
 		}
 		else
@@ -843,7 +1004,7 @@ class PathToAttribValue extends Path {
 	applySingle(expr) {
 		// One expression surrounded by strings, e.g. class="a ${b} c".  Join through apply().
 		if (this.attrValue)
-			return this.apply([expr]);
+			return this.applyAll([expr]);
 
 		let node = this.nodeMarker;
 
@@ -864,12 +1025,12 @@ class PathToAttribValue extends Path {
 			let [obj, path] = [expr[0], expr.slice(1)];
 
 			if (!obj)
-				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
+				throw new Error(`Solarite cannot bind ${this.attribName} to ${obj}.`);
 
 			let value = delve(obj, path);
 
 			// Special case to allow setting select-multiple value from an array
-			if (this.attrName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
+			if (this.attribName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
 				// Set the .selected property on the options having a value within value.
 				let strValues = value.map(v => v + '');
 				for (let option of node.options)
@@ -885,7 +1046,7 @@ class PathToAttribValue extends Path {
 				const strValue = Util.isFalsy(value) ? '' : value;
 
 				// Special case for contenteditable
-				if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
+				if (this.attribName === 'value' && node.hasAttribute('contenteditable')) {
 					const existingValue = node.innerHTML;
 					if (strValue !== existingValue)
 						node.innerHTML = strValue;
@@ -894,28 +1055,39 @@ class PathToAttribValue extends Path {
 
 					// If we don't have this condition, when we call render(), the browser will scroll to the currently
 					// selected item in a <select> and mess up manually scrolling to a different value.
-					if (strValue !== node[this.attrName])
-						node[this.attrName] = strValue;
+					if (strValue !== node[this.attribName])
+						node[this.attribName] = strValue;
 				}
 			}
 
 			// TODO: We need to remove any old listeners, like in bindEventAttribute.
 			// Does bindEvent() now handle that?
 			let func = () => {
-				let value = (this.attrName === 'value' || node.type === 'radio')
+				let value = (this.attribName === 'value' || node.type === 'radio')
 					? Util.getInputValue(node)
-					: node[this.attrName];
+					: node[this.attribName];
 				delve(obj, path, value);
 			};
 
 			// We use capture so we update the values before other events added by the user.
 			// TODO: Bind to scroll events also?
 			// What about resize events and width/height?
-			this.bindEvent(node, this.parentNg.getRootNode(), this.attrName, 'input', func, null, true);
+			this.bindEvent(node, this.parentNg.getRootEl(), this.attribName, 'input', func, null, true);
 		}
 
 		// Regular attribute
 		else {
+			// A selection binding (h.selector().when()) writes its own value and tells the
+			// selector which list this row belongs to, so a later change of selection reaches
+			// the attribute directly instead of going back through render().  The typeof test
+			// keeps ordinary string attributes — nearly all of them — from paying for the
+			// prototype check.
+			if (typeof expr === 'object' && expr instanceof SelectorRef) {
+				if (!this.isComponentAttrib)
+					expr.bind(node, this.attribName, this.parentNg);
+				return;
+			}
+
 			// Cache this on Path.isHtmlProperty when Shell creates the props.
 			// Have Path.clone() copy .isHtmlProperty?
 			let isProp = this.isHtmlProperty;
@@ -928,43 +1100,53 @@ class PathToAttribValue extends Path {
 			else
 				expr = Util.makePrimitive(expr);
 
-			// Values to toggle an attribute
-			if (expr === undefined || expr === false || expr === null) { // Util.isFalsy() inlined.
-				if (isProp)
-					node[this.attrName] = false;
-				node.removeAttribute(this.attrName);
+			// Values that remove an attribute.  The empty string is included so that an attribute
+			// disappears whenever its expression is empty, instead of only when it happened to be
+			// absent already.  makePrimitive() above turns null into '', so plain null lands here
+			// too; the explicit null test still matters for a function expression returning null,
+			// which skips makePrimitive.
+			// An html property is exempt: on those, '' is a real value meaning "empty", as when
+			// clearing an <input>, so it belongs on the assignment path below.
+			if (expr === undefined || expr === false || expr === null || (expr === '' && !isProp)) {
+				if (isProp) {
+					// Clear the property with a value of its own type.  Assigning false to a string
+					// property such as input.value would put the text "false" in the field.
+					let old = node[this.attribName];
+					node[this.attribName] = typeof old === 'boolean' ? false : '';
+				}
+				node.removeAttribute(this.attribName);
 			}
 			else if (expr === true) {
 				if (isProp)
-					node[this.attrName] = true;
-				node.setAttribute(this.attrName, '');
+					node[this.attribName] = true;
+				node.setAttribute(this.attribName, '');
 			}
 
 			// A non-toggled attribute
 			else {
 				// Only update attributes if the value has changed.
 				// This is needed for setting input.value, .checked, option.selected, etc.
-				// A missing attribute counts as '', so empty values don't write empty attributes.
+				// Non-property attributes never reach here with '', since that removes above.
 				let oldVal = isProp
-					? node[this.attrName]
-					: node.getAttribute(this.attrName) ?? '';
+					? node[this.attribName]
+					: node.getAttribute(this.attribName) ?? '';
 				if (oldVal !== expr) {
 
 					// <textarea value=${expr}></textarea>
 					// Without this branch we have no way to set the value of a textarea,
 					// since we also prohibit expressions that are a child of textarea.
 					if (isProp)
-						node[this.attrName] = expr;
+						node[this.attribName] = expr;
 
 						// Allow one-way binding to contenteditable value attribute.
 						// Contenteditables normally don't have a value attribute and have their content set via innerHTML.
 					// Solarite doesn't allow contenteditables to have expressions as their children.
-					else if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
+					else if (this.attribName === 'value' && node.hasAttribute('contenteditable')) {
 						node.innerHTML = expr;
 					}
 
 					// TODO: Putting an 'else' here would be more performant
-					node.setAttribute(this.attrName, expr);
+					node.setAttribute(this.attribName, expr);
 				}
 			}
 		}
@@ -978,14 +1160,14 @@ class PathToAttribValue extends Path {
 	 * @return {string} The joined values of the expressions, or the first expression if there are no strings. */
 	getValue(exprs) {
 
-		//#IFDEV
+		//#IFDEBUG
 		assert(Array.isArray(exprs));
 		//#ENDIF
 		//if (!Array.isArray(exprs))
 		//	return exprs;
 
 		if (!this.attrValue) {// If it's not multiple paths inside a single attribute, return first (and only) expression.
-			//#IFDEV
+			//#IFDEBUG
 			assert(exprs.length === 1);
 			//#ENDIF
 			return exprs[0];
@@ -996,6 +1178,18 @@ class PathToAttribValue extends Path {
 		for (let i = 0; i < values.length; i++) {
 			result.push(values[i]);
 			if (i < values.length - 1) {
+				// A selection binding has to own the whole attribute, because its whole point is
+				// writing that attribute without re-rendering, which it can't do if the rest of
+				// the value comes from expressions it doesn't know about.  Whether a selector sits
+				// inside a multi-part attribute is fixed by the shape of the template and never by
+				// the data, so this can only be an authoring mistake, and it always surfaces on the
+				// template's very first render -- exactly like the placement check in
+				// SelectorRef.bind().  That makes it safe to strip from the built file, where the
+				// throw is the only thing lost: makePrimitive() then turns the ref into '' and the
+				// attribute is written from its constant parts alone.  Stripping it also keeps a
+				// per-expression instanceof out of the multi-part attribute loop.
+				if (typeof exprs[i] === 'object' && exprs[i] instanceof SelectorRef)
+					throw new Error(`Solarite: a selector must own the whole ${this.attribName} attribute.`);
 				let val = Util.makePrimitive(exprs[i]);
 				if (!Util.isFalsy(val))
 					result.push(val);
@@ -1016,17 +1210,44 @@ class PathToAttribValue extends Path {
 	/**
 	 * @param funcAndArgs {?Array} The [func, ...args] array from the template, or null if func stands alone. */
 	bindEvent(node, root, key, eventName, func, funcAndArgs, capture=false) {
+		//#IFDEBUG
+		// Both callers already guarantee a function, so this only catches a future third caller.
+		// PathToEvent.applySingle() rejects every shape a template can produce and names the
+		// offending value, and the two-way binding path above passes a closure it just made
+		// here, so nothing a page author writes can reach this line.  That makes it dev-only:
+		// stripping it from the built file costs no diagnostic that the surviving throw in
+		// PathToEvent doesn't already give, with a better message.
 		if (typeof func !== 'function')
-			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
+			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attribName}=\${${func}}> because it's not a function.`);
+		//#ENDIF
 
-		// Whether to delegate is decided in registerBinding(), which only runs for a NEW binding.
-		// Re-renders rebind existing rows (just updating binding.args below), so they skip the
-		// options lookup + delegatableEvents check entirely.
-		let options = this.parentNg.rootNg.options;
+		// 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.  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;
+			// 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);
+				// 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.
+				node[dk] = funcAndArgs || func;
+				node[delegatedRootKey] = root;
+				return;
+			}
+		}
 
-		// Store the callable as a single [func, ...args] array.  Array-form bindings
-		// (onclick=${[fn, arg]}, the hot per-row case) pass it through with no allocation;
-		// a plain function allocates a one-element array, which is rare (buttons, two-way).
+		// Direct path: capture bindings, non-bubbling events, and eventDelegation:false.
+		// Store the callable as a single [func, ...args] array.
 		let args = funcAndArgs || [func];
 
 		// One stable EventBinding object per node+key is registered with addEventListener
@@ -1036,7 +1257,7 @@ class PathToAttribValue extends Path {
 		let nodeEvents = node[eventBindingsKey];
 		if (nodeEvents === undefined) {
 			let b = node[eventBindingsKey] = new EventBinding(root, node, key, args);
-			registerBinding(b, node, eventName, capture, options, root);
+			node.addEventListener(eventName, b, capture);
 			return;
 		}
 
@@ -1054,7 +1275,7 @@ class PathToAttribValue extends Path {
 				let map = node[eventBindingsKey] = {};
 				map[nodeEvents.key] = nodeEvents;
 				binding = map[key] = new EventBinding(root, node, key, args);
-				registerBinding(binding, node, eventName, capture, options, root);
+				node.addEventListener(eventName, binding, capture);
 				return;
 			}
 		}
@@ -1062,11 +1283,11 @@ class PathToAttribValue extends Path {
 			binding = nodeEvents[key];
 			if (!binding) {
 				binding = nodeEvents[key] = new EventBinding(root, node, key, args);
-				registerBinding(binding, node, eventName, capture, options, root);
+				node.addEventListener(eventName, binding, capture);
 				return;
 			}
 		}
-		binding.root = root;
+		binding.rootEl = root;
 		binding.args = args;
 	}
 }
@@ -1087,82 +1308,171 @@ function getEventBinding(node, key) {
 	return b instanceof EventBinding ? (b.key === key ? b : undefined) : b[key];
 }
 
-/**
- * Attach a new EventBinding either directly or through the root component's delegated
- * dispatcher.  The dispatcher lives on the root element (not the document) so a component
- * still receives delegated events while detached from the document, and events stay scoped
- * to the component that rendered them. */
-function registerBinding(binding, node, eventName, capture, options, root) {
-	// Bubbling events are delegated by default: they skip addEventListener entirely, and one
-	// root-level dispatcher per event type finds bindings by walking up from the event target.
-	// eventDelegation:false opts out; an array delegates only the named events.  Capture
-	// bindings and non-bubbling events always stay direct.
-	let delegate = false;
-	if (capture === false) {
-		let opt = options?.eventDelegation ?? true;
-		if (opt !== false && delegatableEvents.has(eventName))
-			delegate = opt === true || opt.includes(eventName);
-	}
-
-	if (delegate) {
-		binding.delegated = true;
-		let types = root[delegatedTypesKey];
-		if (types === undefined)
-			types = root[delegatedTypesKey] = new Set();
-		if (!types.has(eventName)) {
-			types.add(eventName);
-			root.addEventListener(eventName, delegatedDispatcher);
-		}
-	}
-	else
-		node.addEventListener(eventName, binding, capture);
-}
-
-// 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']);
 
-// Per-root-element Set of event types that already have a delegated dispatcher registered.
+// One Symbol per delegated event type; nodes store their delegated handler under it.
+// Symbols (vs string expandos like Solid's $$click) can't collide with user properties.
+const delegatedKeys = {};
+
+/**
+ * Get the per-event-type Symbol key, or undefined for non-delegatable events.
+ * Called once per PathToEvent construction, never per bind.
+ * @param eventName {string}
+ * @return {symbol|undefined} */
+function delegatedKeyFor(eventName) {
+	if (!delegatableEvents.has(eventName))
+		return undefined;
+	return delegatedKeys[eventName] ??= Symbol('sol$' + eventName);
+}
+
+// The component root a node's delegated handlers run with as `this`.
+// Exported so NodeGroup.applyStamp()'s compiled stamp program can write it directly.
+const delegatedRootKey = Symbol('solariteDelegatedRoot');
+
+// Set of event types that already have the dispatcher registered, kept on each root element
+// and on each document.
 const delegatedTypesKey = Symbol('solariteDelegatedTypes');
 
-// 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.
+/**
+ * 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.
+ *
+ * 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} */
+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, 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, jitDispatcher, true);
+		}
+	}
+}
+
+// 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
- * EventBindings stored on the nodes along the way; outer roots then see the done-marker and
- * skip.  Each binding carries its own root, so handlers in an outer component still run with
- * the correct `this`.  event.currentTarget is patched to the node whose binding 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;
+	ev[delegatedDoneKey] = path.length;
+
 	let type = ev.type;
-	let current = ev.target;
-	Object.defineProperty(ev, 'currentTarget', {configurable: true, get() { return current }});
-	while (current) {
-		let b = current[eventBindingsKey];
-		if (b !== undefined) {
-			let binding = b instanceof EventBinding ? b : b[type];
-			if (binding !== undefined && binding.delegated === true && binding.key === type) {
-				binding.handleEvent(ev);
-				if (ev.cancelBubble)
-					break;
-			}
+	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 {
 	constructor(root, node, key, args) {
-		this.root = root;
+		this.rootEl = root;
 		this.node = node;
 		this.key = key;
 
@@ -1176,23 +1486,42 @@ class EventBinding {
 	'handleEvent'(event) {
 		let a = this.args;
 		switch (a.length) {
-			case 1: return a[0].call(this.root, event, this.node);
-			case 2: return a[0].call(this.root, a[1], event, this.node);
-			case 3: return a[0].call(this.root, a[1], a[2], event, this.node);
+			case 1: return a[0].call(this.rootEl, event, this.node);
+			case 2: return a[0].call(this.rootEl, a[1], event, this.node);
+			case 3: return a[0].call(this.rootEl, a[1], a[2], event, this.node);
 		}
-		return a[0].call(this.root, ...a.slice(1), event, this.node);
+		return a[0].call(this.rootEl, ...a.slice(1), event, this.node);
 	}
 }
 
 // TODO: Merge this into PathToAttribValue?
 class PathToEvent extends PathToAttribValue {
 
-	/** @type {string} The attrName without the "on" prefix. */
+	/** @type {string} The attribName without the "on" prefix. */
 	eventName;
 
-	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
-		super(null, nodeMarker, attrName, attrValue);
-		this.eventName = attrName ? attrName.slice(2) : null;
+	/** @type {symbol|undefined} Expando key nodes store this event's delegated handler under.
+	 * 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;
+		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;
 	}
 
 	/**
@@ -1202,8 +1531,8 @@ class PathToEvent extends PathToAttribValue {
 	 * onclick=${[this, 'doSomething', 'meow']}
 	 *
 	 * @param exprs {Expr[]} Only the first is used.*/
-	apply(exprs) {
-		//#IFDEV
+	applyAll(exprs) {
+		//#IFDEBUG
 		assert(Array.isArray(exprs));
 		//#ENDIF
 
@@ -1211,7 +1540,7 @@ class PathToEvent extends PathToAttribValue {
 		// We have expressions within a string attribute value that's not a Solarite event.  E.g.
 		// <div onclick="alert(${1});"
 		if (this.attrValue?.length > 1) {
-			super.apply(exprs);
+			super.applyAll(exprs);
 			return;
 		}
 
@@ -1223,16 +1552,16 @@ class PathToEvent extends PathToAttribValue {
 	applySingle(expr) {
 		// Expressions within a string attribute value that's not a Solarite event.
 		if (this.attrValue?.length > 1)
-			return super.apply([expr]);
+			return super.applyAll([expr]);
 
 		// Don't bind events to component placeholders.
 		// PathToComponent will do the binding later when it instantiates the component.
 		if (this.isComponentAttrib && this.nodeMarker.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
 			return;
 
-		let root = this.parentNg.rootNg.root;
+		let root = this.parentNg.rootNg.rootEl;
 
-		/*#IFDEV*/
+		/*#IFDEBUG*/
 		assert(root?.nodeType === 1);
 		/*#ENDIF*/
 
@@ -1250,7 +1579,7 @@ class PathToEvent extends PathToAttribValue {
 			expr = null;
 		}
 		else
-			throw new Error(`Invalid event binding: <${node.tagName.toLowerCase()} ${this.attrName}=\${${JSON.stringify(expr)}}>`);
+			throw new Error(`Solarite: ${this.attribName}=\${...} is not a function.`);
 
 		this.bindEvent(node, root, eventName, eventName, func, expr);
 	}
@@ -1373,13 +1702,10 @@ function jsxToTemplate(tag, props, children=[], key=undefined) {
 
 		// 2a. Custom element class => emit <tag-name ...props>children</tag-name>; PathToComponent
 		// instantiates it exactly like a tagged-template component.
-		if (tag.prototype instanceof HTMLElement) {
-			Util.defineClass(tag);
-			let tagName = customElements.getName ? customElements.getName(tag) : Util.camelToDashes(tag.name);
-			if (tagName && !tagName.includes('-'))
-				tagName += '-element';
-			return buildIntrinsic(tagName, props, children, key);
-		}
+		// defineClass() hands back the name it registered, or the name the class was already
+		// registered under, so we never have to guess it a second time.
+		if (tag.prototype instanceof HTMLElement)
+			return buildIntrinsic(Util.defineClass(tag), props, children, key);
 
 		// 2b. Plain function component: call it with props (+ children) and expect a Template back.
 		let p = {};
@@ -1457,24 +1783,21 @@ class PathToAttribs extends Path {
 	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
 	attrNames;
 
-	/** @type {boolean} Provides one or more attributes on a component. */
-	isComponent;
+	/** @type {PathToEvent|PathToAttribValue|undefined} Cached sub-path for the JSX
+	 * whole-attribute fast path; see applyJsxAttr().  Declared so the first assignment
+	 * doesn't transition the hidden class. */
+	jsxSub;
+
+	/** @type {?string} The attribute name jsxSub was built for. */
+	jsxSubName;
 
 	constructor(nodeBefore, nodeMarker) {
-		super(null, null);
-		this.nodeMarker = nodeMarker;
+		// nodeBefore is discarded: an attribute path has no nodes of its own.  The marker goes
+		// straight through the base constructor rather than being stored a second time after it.
+		super(null, nodeMarker);
 		this.attrNames = new Set();
 	}
 
-	/**
-	 * @param exprs {Expr[][]} Only the first is used. */
-	apply(exprs) {
-		//#IFDEV
-		assert(Array.isArray(exprs));
-		//#ENDIF
-		this.applySingle(exprs[0]);
-	}
-
 	/**
 	 * @param expr {Expr} */
 	applySingle(expr) {
@@ -1553,17 +1876,13 @@ class PathToAttribs extends Path {
 			value = styleToCss(value);
 		sub.applySingle(value);
 	}
-
-
-	getExpressionCount() { return 1 }
-	getValue(exprs) { return exprs[0]; }
 }
 
 /**
  * Maps a string key to multiple values.
  * Values are stored in arrays because pushing them is much faster than Set operations,
  * and deleteAny() needs no iterator allocation.
- * deleteAny() returns values first-in-first-out by advancing a head index (array.head)
+ * deleteAny() returns values first-in-first-out by advancing a head index (array.hd)
  * instead of calling shift(), which would be O(n). */
 class MultiValueMap {
 
@@ -1591,7 +1910,7 @@ class MultiValueMap {
 		let array = data[key];
 		if (!array)
 			data[key] = [value];
-		else if (array.length - (array.head || 0) < max)
+		else if (array.length - (array.hd || 0) < max)
 			array.push(value);
 	}
 
@@ -1605,20 +1924,75 @@ class MultiValueMap {
 		if (!array) // slower than pre-check.
 			return undefined;
 
-		let head = array.head || 0;
+		let head = array.hd || 0;
 		let result = array[head];
 		head++;
 		if (head >= array.length)
 			delete data[key];
 		else
-			array.head = head;
+			array.hd = head;
 
 		return result;
 	}
 }
 
+/**
+ * A list of items plus the function that builds one item's Template, as returned by h.map().
+ *
+ * Handing the reconciler the source items instead of an array of Templates is what makes
+ * h.map() cheap on a long list: a row whose item is the same object it was built from needs
+ * neither a Template built for it nor a cache lookup to find one, just an identity check
+ * against the item the row already remembers.  Rows that moved are recognized too — see
+ * PathToNodes.applyMapped(), which follows a shifted list's offset and, failing that, matches
+ * items against the Templates the previous render built.
+ */
+class MappedList {
+
+	/** @type {Array} */
+	items;
+
+	/** @type {function(*):Template} */
+	fn;
+
+	constructor(items, fn) {
+		this.items = items;
+		this.fn = fn;
+	}
+
+	/**
+	 * Yield the Templates, building each one as it goes, so that code written against the older
+	 * array-returning h.map() — spreading it, iterating it, passing it to Array.from — still
+	 * works.  Doing so builds every row, which is exactly the work the reconciler skips when the
+	 * list is handed to it whole, so prefer putting an h.map() straight into a template. */
+	*[Symbol.iterator]() {
+		let items = this.items, fn = this.fn;
+		for (let i=0; i<items.length; i++)
+			yield fn(items[i]);
+	}
+}
+
 class PathToNodes extends Path {
 
+	/** @type {boolean} True once any NodeGroup this path created needs a visit even when its
+	 * values are unchanged (it holds a component or a live HTML property).  Those rows are the
+	 * reason the list scans exist, so their presence rules out applyMisses()' skip-the-scan
+	 * path.  Sticky: it's never cleared, which can only cost a scan that wasn't needed. */
+	anyNeedsRefresh = false;
+
+	/** @type {?Array} The h.map() items the previous render drew, one per NodeGroup and in the
+	 * same order, so an unchanged row is recognized by comparing two arrays rather than by
+	 * following a pointer into each NodeGroup.  A thousand rows' NodeGroups are scattered over
+	 * a hundred kilobytes, so reading a field from each one costs a cache miss apiece; two flat
+	 * arrays walk in step.  Null whenever the last render wasn't an h.map().
+	 * @type {?Array} */
+	lastItems = null;
+
+	/** @type {boolean} True when the previous render's items contained raw DOM Nodes,
+	 * which routes applySingle() to the generic reconciler.  Declared so the hot
+	 * `!this.itemsHaveNodes` check reads a real field instead of a missing property,
+	 * and so the first raw-Node render doesn't transition the hidden class. */
+	itemsHaveNodes = false;
+
 	/** @type {?NodeGroup[]} The NodeGroups created by this path's expression, in order.
 	 * Lazily created; null when the path has only ever rendered a primitive (see textNode). */
 	nodeGroups = null;
@@ -1632,14 +2006,6 @@ class PathToNodes extends Path {
 
 
 
-	/**
-	 * Nodes that have been used during the current render().
-	 * Used with getNodeGroup() and freeNodeGroups() on the generic path; the positional diff
-	 * tracks in-use NodeGroups in this.nodeGroups instead.
-	 * Lazily created since most paths never use it.
-	 * @type {?NodeGroup[]} */
-	nodeGroupsRendered = null;
-
 	/**
 	 * Nodes that were added to the web component during the last render(), but are available to be used again.
 	 * Used with getNodeGroup() and freeNodeGroups(), keyed by close key.
@@ -1657,18 +2023,6 @@ class PathToNodes extends Path {
 		super(nodeBefore, nodeMarker);
 	}
 
-	/**
-	 * Insert/replace the nodes created by a single expression.
-	 * Called by applyExprs()
-	 * @param exprs {Expr[]} Only the first is used.
-	 * @return {Node[]} New Nodes created. */
-	apply(exprs) {
-		//#IFDEV
-		assert(Array.isArray(exprs));
-		//#ENDIF
-		this.applySingle(exprs[0]);
-	}
-
 	/**
 	 * Make the DOM between nodeBefore and nodeMarker match the value of expr.
 	 * This is the main entry point for rendering an expression's nodes, chosen from three strategies:
@@ -1680,7 +2034,7 @@ class PathToNodes extends Path {
 	 * @param expr {Expr} */
 	applySingle(expr) {
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
 
 		// Fast path for a single primitive expression, the most common case in loops.
 		let exprType = typeof expr;
@@ -1756,31 +2110,452 @@ class PathToNodes extends Path {
 			this.textNode = null;
 		}
 
-		// 1. Flatten the expression to a list of Templates, strings and Nodes, evaluating functions along the way.
+		// A selection binding only knows how to write an attribute, so catch it here rather than
+		// letting it render as an empty string and leave the caller wondering where it went.
+		if (expr instanceof SelectorRef)
+			throw new Error('Solarite: a selector must own the whole attribute.');
+
+		// 1. h.map() hands over its source items and callback rather than built Templates, so a
+		// row whose item is unchanged is recognized without building or looking up a Template.
+		if (expr instanceof MappedList) {
+			this.applyMapped(expr);
+			/*#IFDEBUG*/this.verify();/*#ENDIF*/
+			return;
+		}
+
+		// Anything that isn't an h.map() leaves no items to recognize rows by next time.
+		this.lastItems = null;
+
+		// 2. Flatten the expression to a list of Templates, strings and Nodes, evaluating functions along the way.
+		// A flat array that is entirely Templates — the rows.map(...) shape that list renders
+		// produce — is borrowed directly instead of copied.  The borrow lasts only for the
+		// rest of this synchronous call:  applyDiff/applyKeyed/applyGeneric read the items and
+		// retain only the NodeGroups (and each item's own Template) built from them, never the
+		// items array itself, so no reference to the caller's array survives the render.  Keep
+		// that invariant — storing newItems on any long-lived object would pin the caller's
+		// per-render array until the next render, moving its collection into a later frame.
 		/** @type {(Template|string|Node)[]} */
-		let newItems = [];
-		let hasNodesNow = this.collectItems(expr, newItems, false);
+		let newItems = null;
+		let hasNodesNow = false;
+		if (Array.isArray(expr)) {
+			let len = expr.length, i = 0;
+			while (i < len && expr[i] instanceof Template)
+				i++;
+			if (i === len)
+				newItems = expr; // Borrowed from the caller; read-only from here on.
+		}
+		if (newItems === null) {
+			newItems = [];
+			hasNodesNow = this.collectItems(expr, newItems, false);
+		}
 
-		// 2. Raw Nodes in the items (now or on the previous render) can't be diffed positionally
+		// 3. Raw Nodes in the items (now or on the previous render) can't be diffed positionally
 		// because this.nodeGroups only tracks NodeGroups.  Use the generic path for those.
 		if (hasNodesNow || this.itemsHaveNodes) {
 			this.itemsHaveNodes = hasNodesNow;
 			this.applyGeneric(newItems);
 		}
-		else {
-			// Templates with a key=${} attribute diff by key so node identity follows the data.
-			// An empty list also routes to applyKeyed when the previous render was keyed,
-			// so removed keyed NodeGroups are discarded instead of pooled.
-			let first = newItems.length !== 0 ? newItems[0] : null;
-			if (first !== null
-				? (typeof first !== 'string' && (first.key !== undefined || Shell.get(first.html, first.svgMode).keyIndex >= 0))
-				: (this.nodeGroups !== null && this.nodeGroups.length !== 0 && this.nodeGroups[0].key !== undefined))
-				this.applyKeyed(newItems);
+		else
+			this.diffItems(newItems);
+
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
+	}
+
+	/**
+	 * Reconcile a flat list of Templates and strings against this path's NodeGroups.
+	 * Templates with a key=${} attribute diff by key so node identity follows the data.
+	 * An empty list also routes to applyKeyed when the previous render was keyed, so removed
+	 * keyed NodeGroups are discarded instead of pooled.
+	 * @param newItems {(Template|string)[]} */
+	diffItems(newItems) {
+		let first = newItems.length !== 0 ? newItems[0] : null;
+		if (first !== null
+			? (typeof first !== 'string' && (first.key !== undefined || Shell.get(first.html, first.svgMode).keyIndex >= 0))
+			: (this.nodeGroups !== null && this.nodeGroups.length !== 0 && this.nodeGroups[0].key !== undefined))
+			this.applyKeyed(newItems);
+		else
+			this.applyDiff(newItems);
+	}
+
+	/**
+	 * Render an h.map() list.
+	 *
+	 * What makes this cheaper than reconciling an array of Templates is that a row still holding
+	 * the item it was built from needs no Template at all: it is recognized by one identity
+	 * check, with nothing built and nothing compared.  When the list is the same length and only
+	 * a few rows changed, that is the whole render — see applyMisses().  Otherwise the walk
+	 * follows the offset a shifted list settles on, and finally consults a map from item to the
+	 * Template the previous render built, so rows that moved far are still reused.
+	 * @param mapped {MappedList} */
+	applyMapped(mapped) {
+		let items = mapped.items, fn = mapped.fn;
+		let len = items.length;
+		let oldNgs = this.nodeGroups;
+		// Only rows this path drew from an h.map() last time can be recognized by their item;
+		// anything else starts over.
+		let lastItems = this.lastItems;
+		let oldLen = oldNgs === null || lastItems === null || lastItems.length !== oldNgs.length
+			? 0 : oldNgs.length;
+
+		// Patch path.  When the list is the same length as last time, every row that still holds
+		// the item it was built from is already final: it needs no Template, no comparison and no
+		// visit.  So find the positions that did change, build only those, and patch them.  That
+		// makes a selection or a partial update cost work proportional to the change instead of
+		// to the length of the list.  Rows that must be visited even when unchanged (components,
+		// live HTML properties) rule it out, since revisiting them is what the full scan is for.
+		let misses = null, missTemplates = null, missCount = 0;
+		if (oldLen === len && len !== 0 && !this.anyNeedsRefresh && !this.itemsHaveNodes) {
+			let tooMany = false;
+			let cap = missProbeThreshold;
+
+			// First find WHICH positions changed, without building anything for them.  A change
+			// this path can't handle is then abandoned having cost only comparisons — building
+			// as we went would throw away a Template for every row of, say, a reversed list,
+			// which the general diff is about to reuse from the previous render.
+			for (let i=0; i<len; i++) {
+				if (lastItems[i] !== items[i]) {
+					if (missCount === cap) {
+						// Enough of the list has changed to ask what kind of change this is,
+						// because the two kinds want opposite treatment.  If the item at this
+						// position is somewhere else in the old list, the rows were reordered,
+						// and the general diff's item map will reuse their Templates instead of
+						// rebuilding them — so stop here and let it.  If the item is new, the
+						// rows' contents changed, and there is nothing to reuse: keep going and
+						// patch them all, however many there are.  The scan costs one pass over
+						// the old rows, once, and only for a list that changed this much.
+						if (itemIsElsewhere(lastItems, oldLen, items[i])) {
+							tooMany = true;
+							missCount = 0; // Nothing was built, so the general path has nothing to reuse.
+							break;
+						}
+						cap = len; // Asked and answered; there is no second probe.
+					}
+					(misses ??= [])[missCount++] = i;
+				}
+			}
+
+			// Now build them.
+			if (!tooMany && missCount !== 0) {
+				missTemplates = new Array(missCount);
+				for (let k=0; k<missCount; k++) {
+					let t = fn(items[misses[k]]);
+					if (!(t instanceof Template) && typeof t !== 'string') { // A Node, an array, …
+						tooMany = true;
+						missCount = k; // Keep the ones already built; the rest are the caller's problem.
+						break;
+					}
+					missTemplates[k] = t;
+				}
+			}
+			if (!tooMany && (missCount === 0
+					|| this.applyMisses(oldNgs, misses, missTemplates, missCount, len))) {
+				for (let k=0; k<missCount; k++) {
+					let j = misses[k];
+					lastItems[j] = items[j];
+				}
+				return;
+			}
+		}
+
+		// General path: build the whole list of Templates and hand it to the reconciler.
+		let newItems = new Array(len);
+		let built = missCount !== 0 ? misses : null, b = 0;
+		let itemMap = null, noItemMap = false;
+		const indexOfItem = item => {
+			if (noItemMap)
+				return -1;
+			if (itemMap === null) {
+				// One scan before paying for a map: if this item is nowhere in the old rows, the
+				// list's contents changed rather than moved, so there is nothing to look up and
+				// every later miss can go straight to the callback.  A scan is cheaper than a map
+				// of every row, and this is the common shape — rows replaced in place.
+				if (!itemIsElsewhere(lastItems, oldLen, item)) {
+					noItemMap = true;
+					return -1;
+				}
+				itemMap = new Map();
+				for (let k=0; k<oldLen; k++)
+					itemMap.set(lastItems[k], k);
+			}
+			let k = itemMap.get(item);
+			return k === undefined ? -1 : k;
+		};
+		// Walk the two lists together.  A row is recognized by the item it was built from, at the
+		// offset the walk has settled on: after an insertion or a removal every later row sits a
+		// fixed distance from where it was, and following that keeps recognizing them instead of
+		// treating the whole tail as changed.  The short search that re-establishes the offset
+		// only runs while the walk is still in step, so a list of genuinely new rows (an append,
+		// a replace-all) gives up after one miss rather than searching for every row.  Failing
+		// all that, a map from item to the Template the previous render built for it catches
+		// rows that moved far — a sort, a shuffle.  It's built on demand, from the rows this
+		// path already holds: a persistent per-item cache would instead pay a write for every
+		// row of every list ever created, which is most of the work of building a list from
+		// scratch, and would hold each Template alive for as long as the caller holds the item.
+		if (oldLen !== 0) {
+			let delta = 0, inSync = true;
+			for (let i=0; i<len; i++) {
+				let item = items[i];
+				let j = i + delta;
+				let inRange = j >= 0 && j < oldLen;
+				if (inRange && lastItems[j] === item) {
+					newItems[i] = oldNgs[j].template;
+					inSync = true;
+					continue;
+				}
+
+				// This position was already found to have changed, and its Template built, by the
+				// patch scan above.  That only happens for a same-length list, where the offset
+				// stays zero, so there's no search to redo here.
+				if (built !== null && b < missCount && built[b] === i) {
+					newItems[i] = missTemplates[b++];
+					continue;
+				}
+
+				if (inSync) {
+					let found = -1;
+					for (let d=1; d<=shiftSearchDistance; d++) {
+						let after = j + d, before = j - d;
+						if (after < oldLen && lastItems[after] === item) {
+							found = after;
+							break;
+						}
+						if (before >= 0 && lastItems[before] === item) {
+							found = before;
+							break;
+						}
+					}
+					if (found >= 0) {
+						delta = found - i;
+						newItems[i] = oldNgs[found].template;
+						continue;
+					}
+
+					// The item isn't in the old list at all, but the old row standing here
+					// belongs to an item a little further along: rows were INSERTED here.  Build
+					// this one and shift the offset, so the rest of the list is still recognized.
+					// Without this, prepending one row to a long list would look like a change to
+					// every row in it.  Only worth asking when the list actually grew.
+					if (inRange && len > oldLen)
+						for (let d=1; d<=insertSearchDistance && i+d<len; d++)
+							if (items[i+d] === lastItems[j]) {
+								newItems[i] = fn(item);
+								delta--;
+								found = -2; // Handled; skip the fallbacks below.
+								break;
+							}
+					if (found === -2)
+						continue;
+
+					inSync = false;
+				}
+
+				// Past the end of the old list there is nothing left to match, so appended rows
+				// go straight to the callback instead of paying for a lookup that must miss.
+				if (j < oldLen) {
+					let k = indexOfItem(item);
+					if (k >= 0) {
+						newItems[i] = oldNgs[k].template;
+						delta = k - i; // Back in step; the rest of the list can walk positionally again.
+						inSync = true;
+						continue;
+					}
+				}
+				newItems[i] = fn(item);
+			}
+		}
+
+		else
+			for (let i=0; i<len; i++)
+				newItems[i] = fn(items[i]);
+
+		// A callback that returns something other than a Template or a string (a raw Node, an
+		// array, a nested list) can't be diffed positionally; flatten it the general way.
+		let first = len !== 0 ? newItems[0] : null;
+		if (first !== null && !(first instanceof Template) && typeof first !== 'string') {
+			let flat = [];
+			let hasNodesNow = this.collectItems(newItems, flat, false);
+			if (hasNodesNow || this.itemsHaveNodes) {
+				this.itemsHaveNodes = hasNodesNow;
+				this.applyGeneric(flat);
+			}
+			else
+				this.diffItems(flat);
+			return;
+		}
+
+		if (this.itemsHaveNodes) {
+			this.itemsHaveNodes = false;
+			this.applyGeneric(newItems);
+			return;
+		}
+
+		this.diffItems(newItems);
+
+		// Remember which item drew each row, so the next render can match them by identity.
+		// The reconciler leaves nodeGroups aligned with newItems, and therefore with items.
+		// The caller's array is copied rather than kept, since the caller mutates it in place.
+		let li = this.lastItems;
+		if (li === null || li.length !== len)
+			li = this.lastItems = new Array(len);
+		for (let j=0; j<len; j++)
+			li[j] = items[j];
+	}
+
+	/**
+	 * Patch only the positions an h.map() render changed, leaving every other row alone.
+	 *
+	 * Every unchanged position already holds the NodeGroup built from that exact item, so it
+	 * needs no visit at all; only the changed positions can require a rewrite, a move, or a new
+	 * row.  Changed positions are handled in two steps, the same shape as the general keyed
+	 * diff's small-reorder path: first the ones that kept their key (a row whose data changed
+	 * in place), then the leftovers are cross-matched against each other by key so a swap or a
+	 * short shuffle moves the fewest node ranges.
+	 *
+	 * @param ngs {NodeGroup[]} This path's NodeGroups, patched in place.
+	 * @param misses {int[]} Positions whose item changed, ascending.
+	 * @param templates {(Template|string)[]} The new Template for each of those positions.
+	 * @param missCount {int}
+	 * @param len {int} Length of the list, for anchoring the last position.
+	 * @return {boolean} False when the change doesn't fit this path and the caller must run
+	 * the general diff instead; nothing has been modified in that case. */
+	applyMisses(ngs, misses, templates, missCount, len) {
+
+		// Only a keyed list can move rows around safely.  An unkeyed one can still be rewritten
+		// in place, which is what the positional diff would do for it anyway.
+		let keyed = ngs[0].key !== undefined;
+
+		// 1. Classify the changed positions without touching anything, so that a change too big
+		// for this path can still be handed to the general diff with nothing half-applied.
+		// A row that kept its key is rewritten where it stands; the rest have to be matched
+		// against each other, and past a handful of those the general diff's map-and-LIS
+		// approach is the better tool.
+		let displaced = null, dCount = 0;
+		for (let k=0; k<missCount; k++) {
+			let ng = ngs[misses[k]], t = templates[k];
+			if (typeof t === 'string' || !itemClose(ng, t) || (keyed && ng.key !== keyOf(t))) {
+				if (!keyed || dCount === maxDisplacedMisses)
+					return false;
+				(displaced ??= [])[dCount++] = k;
+			}
+		}
+
+		// 2. Rewrite the rows that kept their key.  displaced holds indexes into misses in
+		// ascending order, so one pointer walks past them.
+		for (let k=0, d=0; k<missCount; k++) {
+			if (d < dCount && displaced[d] === k) {
+				d++;
+				continue;
+			}
+			let ng = ngs[misses[k]], t = templates[k];
+			if (itemSame(ng, t))
+				this.refreshSameItem(ng, t);
 			else
-				this.applyDiff(newItems);
+				this.rewriteNodeGroup(ng, t);
+		}
+		if (dCount === 0)
+			return true;
+
+		// 3. Hand the displaced rows to the shared placer.  displaced holds indexes into misses
+		// and templates, so misses is what maps a row to its position in the list.
+		let wholeParent = this.wholeParent;
+		this.placeDisplaced(displaced, misses, ngs, templates, ngs, len,
+			wholeParent ? null : this.nodeMarker,
+			wholeParent ? this.nodeMarker : this.nodeMarker.parentNode);
+
+		// 4. Node membership or order changed, so invalidate caches.
+		if (!this.parentNg.firstApply) {
+			this.nodesCache = null;
+			if (this.parentNg.parentPath)
+				this.parentNg.parentPath.clearNodesCache();
 		}
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		// Keep state used by the generic path from going stale.
+		if (this.nodeGroupsAttachedAvailable)
+			this.nodeGroupsAttachedAvailable = null;
+		return true;
+	}
+
+	/**
+	 * Settle a handful of rows that moved, appeared or vanished within one window of a list.
+	 *
+	 * Both small-reorder paths — the h.map() patch in applyMisses and the equal-length window in
+	 * applyKeyed — reach the same point: a few positions whose old NodeGroup no longer belongs
+	 * where it stands, everything around them already correct.  Since every candidate came from
+	 * this same window, a swap, a dragged row or a short shuffle finds its partners inside it, so
+	 * the rows are cross-matched against each other by key rather than through the general
+	 * diff's key map and longest-increasing-subsequence machinery.
+	 *
+	 * rows holds ascending indexes into items, which is the array each caller already has; when
+	 * those indexes are not themselves list positions, positions maps them across.  Doing the
+	 * indirection here rather than compacting it away in the caller keeps this off the allocation
+	 * path: neither caller builds an array it wasn't building already.  rows.length is small by
+	 * construction (at most maxDisplacedMisses), which is what makes the O(n²) cross-match
+	 * cheaper than building a map.
+	 *
+	 * @param rows {int[]} Ascending indexes of the rows to settle.
+	 * @param positions {int[]|null} Maps a row index to its list position, or null when the row
+	 *   indexes are already positions.
+	 * @param oldNgs {NodeGroup[]} Where each position's outgoing NodeGroup is read from.
+	 * @param items {(Template|string)[]} The new items, indexed by row index.
+	 * @param outNgs {NodeGroup[]} Receives the NodeGroup that ends up at each position.  May be
+	 *   the same array as oldNgs; the outgoing groups are snapshotted before anything is written.
+	 * @param boundary {int} First position past this window, where the anchor stops being
+	 *   outNgs[p+1] and becomes tailAnchor.
+	 * @param tailAnchor {Node|null} Anchor for a row placed at boundary-1.
+	 * @param parent {Node} Where the rows' nodes live. */
+	placeDisplaced(rows, positions, oldNgs, items, outNgs, boundary, tailAnchor, parent) {
+		let count = rows.length;
+
+		// 1. Cross-match the rows against each other by key.  A claimed NodeGroup is nulled out
+		// of the snapshot so it can't be claimed twice.
+		let free = new Array(count);
+		for (let b=0; b<count; b++) {
+			let i = rows[b];
+			free[b] = oldNgs[positions === null ? i : positions[i]];
+		}
+		let placed = new Array(count);
+		for (let a=0; a<count; a++) {
+			let t = items[rows[a]];
+			let key = keyOf(t);
+			if (key !== undefined)
+				for (let b=0; b<count; b++) {
+					let ng = free[b];
+					if (ng !== null && ng.key === key && itemClose(ng, t)) {
+						free[b] = null;
+						if (itemSame(ng, t))
+							this.refreshSameItem(ng, t);
+						else
+							this.rewriteNodeGroup(ng, t);
+						placed[a] = ng;
+						break;
+					}
+				}
+		}
+
+		// 2. Discard the old rows nothing claimed.  Keyed semantics require a new key to get new
+		// nodes, so these are never pooled.
+		for (let b=0; b<count; b++) {
+			let ng = free[b];
+			if (ng !== null) {
+				if (ng.startNode !== ng.endNode)
+					Util.saveOrphans(ng.getNodes());
+				else
+					ng.startNode.remove();
+			}
+		}
+
+		// 3. Put the rows in place, right to left so each one's anchor is already final.
+		for (let a=count-1; a>=0; a--) {
+			let i = rows[a];
+			let p = positions === null ? i : positions[i];
+			let ng = placed[a];
+			if (ng === undefined)
+				ng = this.createNew(items[i]);
+			outNgs[p] = ng;
+			let anchor = p+1 < boundary ? outNgs[p+1].startNode : tailAnchor;
+			if (ng.endNode.nextSibling !== anchor || ng.startNode.parentNode !== parent)
+				insertNodesBefore(parent, ng, anchor);
+		}
 	}
 
 	/**
@@ -1803,8 +2578,8 @@ class PathToNodes extends Path {
 			let ng = oldNgs[start], t = newItems[start];
 			if (!itemSame(ng, t))
 				break;
-			if (ng.hasComponentPaths)
-				ng.applyExprs(t.exprs, false);
+			if (ng.shell.needsRefresh)
+				this.refreshSameItem(ng, t);
 			newNgs[start] = ng;
 			start++;
 		}
@@ -1814,8 +2589,8 @@ class PathToNodes extends Path {
 			let ng = oldNgs[oldEnd-1], t = newItems[newEnd-1];
 			if (!itemSame(ng, t))
 				break;
-			if (ng.hasComponentPaths)
-				ng.applyExprs(t.exprs, false);
+			if (ng.shell.needsRefresh)
+				this.refreshSameItem(ng, t);
 			newNgs[--newEnd] = ng;
 			oldEnd--;
 		}
@@ -1824,8 +2599,8 @@ class PathToNodes extends Path {
 		while (start < oldEnd && start < newEnd) {
 			let ng = oldNgs[start], t = newItems[start];
 			if (itemSame(ng, t)) { // Can happen between changed rows, e.g. partial updates.
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
+				if (ng.shell.needsRefresh)
+					this.refreshSameItem(ng, t);
 			}
 			else if (itemClose(ng, t))
 				this.rewriteNodeGroup(ng, t);
@@ -1862,34 +2637,18 @@ class PathToNodes extends Path {
 				}
 			}
 
-			// 5. Insert leftover new items.
+			// 5. Insert leftover new items directly.  Each row is one native insert; a
+			// batching DocumentFragment would double the insert count for no benefit,
+			// since style/layout work is deferred until the next frame either way.
 			if (newRemain) {
 				let wholeParent = this.wholeParent;
 				let anchor = newEnd < newLen ? newNgs[newEnd].startNode : (wholeParent ? null : this.nodeMarker);
 				let parent = wholeParent ? this.nodeMarker : this.nodeMarker.parentNode;
-				let target = parent, before = anchor;
-				let fragment = null;
-				if (newRemain > 1) { // Batch-insert through a fragment.
-					fragment = Globals$1.doc.createDocumentFragment();
-					target = fragment;
-					before = null;
-				}
 				for (let i=start; i<newEnd; i++) {
 					let ng = this.createOrReuse(newItems[i]);
 					newNgs[i] = ng;
-					let node = ng.startNode, end = ng.endNode;
-					if (node === end) // Single-node NodeGroups are the common case in loops.
-						target.insertBefore(node, before);
-					else while (true) {
-						let next = node.nextSibling;
-						target.insertBefore(node, before);
-						if (node === end)
-							break;
-						node = next;
-					}
+					insertNodesBefore(parent, ng, anchor);
 				}
-				if (fragment)
-					parent.insertBefore(fragment, anchor);
 			}
 
 			// 6. Node membership changed, so invalidate caches.
@@ -1904,8 +2663,6 @@ class PathToNodes extends Path {
 		this.nodeGroups = newNgs;
 
 		// Keep state used by the generic path from going stale.
-		if (this.nodeGroupsRendered)
-			this.nodeGroupsRendered = null;
 		if (this.nodeGroupsAttachedAvailable)
 			this.nodeGroupsAttachedAvailable = null;
 	}
@@ -1924,23 +2681,11 @@ class PathToNodes extends Path {
 		let oldLen = oldNgs.length, newLen = newItems.length;
 		let newNgs = new Array(newLen);
 
-		// Resolve an item's key, caching the html->keyIndex lookup for same-template lists.
-		let keyHtml = null, keyIndex = -1;
-		const keyOf = t => {
-			if (t.key !== undefined) // JSX templates carry the key directly.
-				return t.key;
-			if (t.html !== keyHtml) {
-				keyHtml = t.html;
-				keyIndex = Shell.get(t.html, t.svgMode).keyIndex;
-			}
-			return keyIndex >= 0 ? t.exprs[keyIndex] : undefined;
-		};
-
-		//#IFDEV
+		//#IFDEBUG
 		{
 			let seen = new Set();
 			for (let t of newItems) {
-				let k = typeof t === 'string' ? undefined : keyOf(t);
+				let k = keyOf(t);
 				if (k === undefined)
 					console.warn('Unkeyed item in a keyed list; it will be rebuilt on every render:', t);
 				else if (seen.has(k))
@@ -1958,15 +2703,13 @@ class PathToNodes extends Path {
 			let ng = oldNgs[start], t = newItems[start];
 			// An identical Template instance (h.map) implies an identical key, so skip key extraction.
 			if (ng.template === t) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
+				if (ng.shell.needsRefresh)
+					this.refreshSameItem(ng, t);
 			}
 			else if (typeof t === 'string' || ng.key !== keyOf(t) || !itemClose(ng, t))
 				break;
-			else if (itemSame(ng, t)) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
-			}
+			else if (itemSame(ng, t))
+				this.refreshSameItem(ng, t);
 			else
 				this.rewriteNodeGroup(ng, t);
 			newNgs[start] = ng;
@@ -1977,15 +2720,13 @@ class PathToNodes extends Path {
 		while (oldEnd > start && newEnd > start) {
 			let ng = oldNgs[oldEnd-1], t = newItems[newEnd-1];
 			if (ng.template === t) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
+				if (ng.shell.needsRefresh)
+					this.refreshSameItem(ng, t);
 			}
 			else if (typeof t === 'string' || ng.key !== keyOf(t) || !itemClose(ng, t))
 				break;
-			else if (itemSame(ng, t)) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
-			}
+			else if (itemSame(ng, t))
+				this.refreshSameItem(ng, t);
 			else
 				this.rewriteNodeGroup(ng, t);
 			newNgs[--newEnd] = ng;
@@ -1997,6 +2738,57 @@ class PathToNodes extends Path {
 			let wholeParent = this.wholeParent;
 			let parent = wholeParent ? this.nodeMarker : this.nodeMarker.parentNode;
 
+			// 3a. Equal-length windows: scan them aligned.  Rows whose keys match positionally
+			// are updated in place with no bookkeeping, and when at most 8 positions are
+			// displaced (a swap, a dragged row, a small shuffle) they're cross-matched and
+			// moved directly — no key map, no sources array, no LIS.  A bigger shuffle falls
+			// through to the general map phase; the in-place updates already done stay valid
+			// there, since the map phase finds those rows already matching their new items.
+			let fastHandled = false;
+			if (oldRemain === newRemain) {
+				let displaced = null;
+				let ok = true;
+				for (let i=start; i<newEnd; i++) {
+					let ng = oldNgs[i], t = newItems[i];
+					if (ng.template === t) {
+						if (ng.shell.needsRefresh)
+							this.refreshSameItem(ng, t);
+					}
+					else {
+						let k = keyOf(t);
+						if (k !== undefined && ng.key === k && itemClose(ng, t)) {
+							if (itemSame(ng, t))
+								this.refreshSameItem(ng, t);
+							else
+								this.rewriteNodeGroup(ng, t);
+						}
+						else {
+							(displaced ??= []).push(i);
+							if (displaced.length > 8) {
+								ok = false;
+								break;
+							}
+							continue; // newNgs[i] is filled during the placement pass below.
+						}
+					}
+					newNgs[i] = ng;
+				}
+				if (ok) {
+					// The windows are the same length, so a displaced row's index is already its
+					// position and no position map is needed.  The tail anchor is the suffix row
+					// just past this window, which placement never writes to — it only fills
+					// positions below newEnd — so it is computed once here instead of on every
+					// pass around the placement loop.
+					if (displaced !== null)
+						this.placeDisplaced(displaced, null, oldNgs, newItems, newNgs, newEnd,
+							newEnd < newLen ? newNgs[newEnd].startNode : (wholeParent ? null : this.nodeMarker),
+							parent);
+					fastHandled = true;
+				}
+			}
+
+			if (!fastHandled) {
+
 			// 3. Match the middle windows by key.
 			let kept = 0, moved = false;
 			let sources = null; // sources[i] = old index reused by new item start+i, or -1 to create fresh.
@@ -2022,71 +2814,82 @@ class PathToNodes extends Path {
 								moved = true;
 							else
 								lastNewIndex = newIndex;
-							if (itemSame(ng, t)) {
-								if (ng.hasComponentPaths)
-									ng.applyExprs(t.exprs, false);
-							}
+							if (itemSame(ng, t))
+								this.refreshSameItem(ng, t);
 							else
 								this.rewriteNodeGroup(ng, t);
 							newNgs[newIndex] = ng;
 						}
 						else
 							(removals ??= []).push(ng);
-					}
-				}
-				else {
-					removals = oldNgs.slice(start, oldEnd);
+					}
 				}
+				// else: the whole old window goes away.  It isn't collected into an array here,
+				// because the fast clear below usually takes every one of them at once and the
+				// array would be built only to be thrown away.
+			}
+
+			// 3b. A large whole-parent list that is being fully replaced is emptied and refilled
+			// with its parent detached, so the browser's connected-tree bookkeeping (child-change
+			// notifications, tree-version bumps, MutationObserver interest walks, deferred
+			// accessibility and style consumers) runs once at reattach instead of once per row
+			// removed and once per row added.  Detaching before the clear, rather than after it,
+			// puts the removals on the cheap side of that line as well.  The gates: the whole
+			// region is being replaced, so nothing is kept and no focus can survive inside it;
+			// the parent is a plain element, since detaching a custom element would fire its
+			// disconnected/connectedCallback in the middle of a render and a subclass may run
+			// arbitrary logic there; the parent is in the document, since the notification storm
+			// only exists on a connected tree; and the list is long enough for the saving to beat
+			// the fixed cost of the detour and the extra MutationObserver records it creates.
+			let detachedFrom = null, reattachBefore = null;
+			if (wholeParent && start === 0 && newEnd === newLen && kept === 0 && newRemain > 500
+				&& parent.isConnected && parent.parentNode !== null
+				&& parent.localName.indexOf('-') === -1 && !parent.hasAttribute('is')) {
+				detachedFrom = parent.parentNode;
+				reattachBefore = parent.nextSibling;
+				parent.remove();
 			}
 
 			// 4. Remove unmatched old NodeGroups.  They're discarded, never pooled,
 			// so a later render with new keys always creates new nodes.
-			if (removals) {
-				// Materialize node caches of multi-node groups while attached, since detaching breaks sibling links.
-				for (let ng of removals)
-					if (ng.startNode !== ng.endNode)
-						ng.getNodes();
+			let removeAll = oldRemain !== 0 && newRemain === 0;
+			if (removals !== null || removeAll) {
+				// Fast clear when nothing is kept anywhere; the whole region is removals.  Trying
+				// it first means a cleared list skips the two passes below entirely: those exist
+				// to lift each group's nodes out one at a time, and emptying the parent has
+				// already taken all of them.
+				if (!(start === 0 && newEnd === newLen && kept === 0 && this.fastClear())) {
+					if (removeAll)
+						removals = oldNgs.slice(start, oldEnd);
+
+					// Materialize node caches of multi-node groups while attached, since detaching breaks sibling links.
+					for (let ng of removals)
+						if (ng.startNode !== ng.endNode)
+							ng.getNodes();
 
-				// Fast clear when nothing is kept anywhere; the whole region is removals.
-				let cleared = start === 0 && newEnd === newLen && kept === 0 && this.fastClear();
-				if (!cleared)
 					for (let ng of removals) {
 						if (ng.startNode !== ng.endNode)
 							Util.saveOrphans(ng.getNodes()); // Moves the nodes out of the DOM, into their own fragment.
 						else
 							ng.startNode.remove();
 					}
+				}
 			}
 
 			// 5. Insert new NodeGroups and move kept ones.
 			if (newRemain) {
 				let anchor = newEnd < newLen ? newNgs[newEnd].startNode : (wholeParent ? null : this.nodeMarker);
 
-				// 5a. Nothing kept in the middle: batch-insert every new item through a fragment.
+				// 5a. Nothing kept in the middle: insert every new item directly.
+				// Each row is one native insert; routing rows through a batching
+				// DocumentFragment would double the insert count for no benefit, since
+				// style/layout work is deferred until the next frame either way.
 				if (kept === 0) {
-					let target = parent, before = anchor;
-					let fragment = null;
-					if (newRemain > 1) {
-						fragment = Globals$1.doc.createDocumentFragment();
-						target = fragment;
-						before = null;
-					}
 					for (let i=start; i<newEnd; i++) {
 						let ng = this.createNew(newItems[i]);
 						newNgs[i] = ng;
-						let node = ng.startNode, end = ng.endNode;
-						if (node === end)
-							target.insertBefore(node, before);
-						else while (true) {
-							let next = node.nextSibling;
-							target.insertBefore(node, before);
-							if (node === end)
-								break;
-							node = next;
-						}
+						insertNodesBefore(parent, ng, anchor);
 					}
-					if (fragment)
-						parent.insertBefore(fragment, anchor);
 				}
 
 				// 5b. Mixed: iterate backwards so each item's anchor is already in place.
@@ -2113,6 +2916,11 @@ class PathToNodes extends Path {
 				}
 			}
 
+			if (detachedFrom !== null)
+				detachedFrom.insertBefore(parent, reattachBefore);
+
+			} // end if (!fastHandled)
+
 			// 6. Node membership or order changed, so invalidate caches.
 			// During a NodeGroup's first applyExprs(), no ancestor caches can reference its nodes yet.
 			if (!this.parentNg.firstApply) {
@@ -2125,8 +2933,6 @@ class PathToNodes extends Path {
 		this.nodeGroups = newNgs;
 
 		// Keep state used by the generic path from going stale.
-		if (this.nodeGroupsRendered)
-			this.nodeGroupsRendered = null;
 		if (this.nodeGroupsAttachedAvailable)
 			this.nodeGroupsAttachedAvailable = null;
 	}
@@ -2140,11 +2946,30 @@ class PathToNodes extends Path {
 		if (typeof item === 'string')
 			return new NodeGroup(textTemplate(item), this); // Text NodeGroups have no paths to apply.
 		let ng = new NodeGroup(item, this);
+		if (ng.shell.needsRefresh)
+			this.anyNeedsRefresh = true;
 		if (item.exprs.length || (ng.paths && ng.paths.length))
 			ng.applyExprs(item.exprs);
 		return ng;
 	}
 
+	/**
+	 * Refresh a NodeGroup whose new template has the SAME values as its current one.
+	 * Components still render so changes deeper in the tree can surface, and groups holding
+	 * live-HTML-property bindings (checked/value/selected) rewrite in place — a user's click
+	 * flips those DOM properties underneath the cached expression, so same values ≠ same DOM.
+	 * rewriteNodeGroup's per-path skip exempts exactly those paths; everything else is
+	 * compared and skipped as before, so this stays cheap.
+	 * @param ng {NodeGroup}
+	 * @param t {Template|string} */
+	refreshSameItem(ng, t) {
+		let shell = ng.shell;
+		if (shell.hasComponentPaths)
+			ng.applyExprs(t.exprs, false);
+		else if (shell.hasLivePropPaths && shell.pathsSingleExpr && typeof t !== 'string')
+			this.rewriteNodeGroup(ng, t);
+	}
+
 	/**
 	 * Update an existing NodeGroup, created from the same html strings, with new values.
 	 * @param ng {NodeGroup}
@@ -2158,15 +2983,21 @@ class PathToNodes extends Path {
 		else {
 			// When every path consumes exactly one expression, paths align 1:1 with exprs,
 			// so only the expressions that changed need to be applied.
-			if (ng.pathsSingleExpr) {
+			if (ng.shell.pathsSingleExpr) {
 				// Stamped groups (paths === null) rewrite through the shared stampers and stay
 				// path-less, unless a child-node expression stopped being primitive.
 				if (ng.paths !== null || !ng.rewriteStamp(item)) {
 					let oldExprs = ng.template.exprs, newExprs = item.exprs;
 					let paths = ng.paths ?? ng.materializePaths();
-					for (let i = paths.length - 1; i >= 0; i--)
-						if (!exprSame(oldExprs[i], newExprs[i]))
-							paths[i].applySingle(newExprs[i]);
+					for (let i = paths.length - 1; i >= 0; i--) {
+						// Boolean live-HTML-property bindings are exempt from the unchanged-value
+						// skip — a click flips the property underneath the cached expression;
+						// applySingle() compares against the live node before writing.
+						let oldExpr = oldExprs[i], newExpr = newExprs[i];
+						if ((oldExpr !== newExpr && !exprSame(oldExpr, newExpr))
+							|| (paths[i].isHtmlProperty && typeof newExpr === 'boolean'))
+							paths[i].applySingle(newExpr);
+					}
 				}
 
 				if (ng.styles)
@@ -2205,6 +3036,8 @@ class PathToNodes extends Path {
 		}
 
 		ng = new NodeGroup(item, this);
+		if (ng.shell.needsRefresh)
+			this.anyNeedsRefresh = true;
 		if (item.exprs.length || (ng.paths && ng.paths.length))
 			ng.applyExprs(item.exprs);
 		return ng;
@@ -2232,6 +3065,14 @@ class PathToNodes extends Path {
 		else if (typeof expr === 'function')
 			hasNodes = this.collectItems(expr(), items, hasNodes);
 
+		// A MappedList nested inside an array or returned from a function can't use the
+		// identity fast path, but it still renders; expand it through the per-item cache.
+		else if (expr instanceof MappedList) {
+			let subItems = expr.items, fn = expr.fn;
+			for (let i=0; i<subItems.length; i++)
+				items.push(fn(subItems[i]));
+		}
+
 		else if (expr instanceof NodeList) {
 			for (let node of expr)
 				items.push(node);
@@ -2271,7 +3112,7 @@ class PathToNodes extends Path {
 		/** @type {Node[]} */
 		let newNodes = [];
 		let oldNodeGroups = path.nodeGroups || emptyNodeGroups;
-		/*#IFDEV*/assert(!oldNodeGroups.includes(null));/*#ENDIF*/
+		/*#IFDEBUG*/assert(!oldNodeGroups.includes(null));/*#ENDIF*/
 
 		path.nodeGroups = [];
 		for (let item of items) {
@@ -2379,29 +3220,26 @@ class PathToNodes extends Path {
 			|| this.nodeGroupsDetachedAvailable?.deleteAny(closeKey);
 
 		if (result) {
-			if (templatesSame(result.template, template)) {
-				// Components still render so changes deeper in the tree can surface.
-				if (result.hasComponentPaths)
-					result.applyExprs(template.exprs, false);
-			}
+			if (templatesSame(result.template, template))
+				this.refreshSameItem(result, template);
 			else
 				result.applyExprs(template.exprs);
 			result.template = template;
 		}
 		else {
 			result = new NodeGroup(template, this);
+			if (result.shell.needsRefresh)
+				this.anyNeedsRefresh = true;
 			result.applyExprs(template.exprs);
 		}
 
-		(this.nodeGroupsRendered ??= []).push(result);
-
-		/*#IFDEV*/assert(result.parentPath);/*#ENDIF*/
+		/*#IFDEBUG*/assert(result.parentPath);/*#ENDIF*/
 		return result;
 	}
 
 
 	/**
-	 * Move everything from this.nodeGroupsRendered to this.nodeGroupsAttached and nodeGroupsDetached.
+	 * Move everything from this.nodeGroups to this.nodeGroupsAttached and nodeGroupsDetached.
 	 * Called at the beginning of applyGeneric() so it can have NodeGroups to use.
 	 * TODO: this could run as needed in getNodeGroup? */
 	freeNodeGroups() {
@@ -2411,7 +3249,7 @@ class PathToNodes extends Path {
 			let detached = (this.nodeGroupsDetachedAvailable ??= new MultiValueMap()).data;
 			for (let key in previouslyAttached) {
 				let src = previouslyAttached[key];
-				let from = src.head || 0; // Skip entries already consumed by deleteAny().
+				let from = src.hd || 0; // Skip entries already consumed by deleteAny().
 				let array = detached[key];
 				if (!array) {
 					array = detached[key] = from ? src.slice(from) : src;
@@ -2419,22 +3257,18 @@ class PathToNodes extends Path {
 						array.length = maxPooledPerKey;
 				}
 				else
-					for (let i=from, max=maxPooledPerKey + (array.head || 0); i<src.length && array.length < max; i++)
+					for (let i=from, max=maxPooledPerKey + (array.hd || 0); i<src.length && array.length < max; i++)
 						array.push(src[i]);
 			}
 		}
 
-		// Add nodes that were used during render() to nodeGroupsRendered.
-		// If the last render used the positional diff, the in-use NodeGroups are in
-		// this.nodeGroups instead of nodeGroupsRendered.
-		this.nodeGroupsAttachedAvailable = new MultiValueMap();
-		let nga = this.nodeGroupsAttachedAvailable;
-		let source = this.nodeGroupsRendered?.length ? this.nodeGroupsRendered : this.nodeGroups;
-		if (source)
-			for (let ng of source)
+		// Offer the NodeGroups the last render left in place for reuse.  Every path that renders
+		// NodeGroups — the positional diff, the keyed diff and applyGeneric alike — leaves them in
+		// this.nodeGroups, so that one array is always the set still standing in the DOM.
+		let nga = this.nodeGroupsAttachedAvailable = new MultiValueMap();
+		if (this.nodeGroups)
+			for (let ng of this.nodeGroups)
 				nga.add(ng.closeKey, ng);
-
-		this.nodeGroupsRendered = null;
 	}
 
 
@@ -2454,7 +3288,7 @@ class PathToNodes extends Path {
 		// This shaves about 5ms off the partialUpdate benchmark.
 		result = this.nodesCache;
 		if (result) {
-			//#IFDEV
+			//#IFDEBUG
 			//this.checkNodesCache();
 			//#ENDIF
 			return result
@@ -2477,7 +3311,7 @@ class PathToNodes extends Path {
 		return result;
 	}
 
-	//#IFDEV
+	//#IFDEBUG
 
 	get debug() {
 		return [
@@ -2511,12 +3345,55 @@ class PathToNodes extends Path {
 // Shared empty array for paths whose nodeGroups were never created.  Never mutated.
 const emptyNodeGroups = [];
 
+// How many changed h.map() positions applyMapped() collects before it stops to work out what
+// kind of change it is looking at (see the probe in applyMapped).  Below this every ordinary
+// edit — a selection, a partial update — is handled without asking.
+const missProbeThreshold = 256;
+
+// How many of those positions may need matching against each other before the general keyed
+// diff, with its key map and longest-increasing-subsequence, becomes the cheaper tool.  The
+// cross-match here is quadratic, which only pays while the number of moved rows is small.
+const maxDisplacedMisses = 16;
+
+// How far applyMapped() looks around a position to pick a shifted list's rows back up.  One
+// insertion or removal moves everything by one, which the first step finds; a handful at once
+// still lands inside this window, and past it the item map takes over.
+const shiftSearchDistance = 4;
+
+// How far ahead it looks to recognize a block of inserted rows, by finding the item that the
+// old row standing here now belongs to.  Wider than the search above because inserting a page
+// of rows at once is ordinary, and because this search only runs while the walk is still in
+// step and stops it dead the first time it fails — so its worst case is one pass of this many
+// comparisons per render, against building a map of every row in the list.
+const insertSearchDistance = 64;
+
 // Most detached NodeGroups kept per close key.  Bounds memory growth after very large
 // lists are cleared while keeping pooled rows for every typical re-create pattern.
 // Lowering this (e.g. to 1000) cuts retained memory ~7x after clearing a 10k-row list,
 // but makes re-creating such a list ~2x slower since most rows are built fresh.
 const maxPooledPerKey = 10000;
 
+
+// Cache for keyOf(): list rows share one html array, so the Shell lookup that finds where the
+// key=${} expression sits happens once per list rather than once per row.
+let lastKeyHtml = null, lastKeyIndex = -1;
+
+/**
+ * The list key of an item, or undefined when it has none.
+ * @param t {Template|string}
+ * @return {*} */
+function keyOf(t) {
+	if (typeof t === 'string')
+		return undefined;
+	if (t.key !== undefined) // JSX templates carry the key directly.
+		return t.key;
+	if (t.html !== lastKeyHtml) {
+		lastKeyHtml = t.html;
+		lastKeyIndex = Shell.get(t.html, t.svgMode).keyIndex;
+	}
+	return lastKeyIndex >= 0 ? t.exprs[lastKeyIndex] : undefined;
+}
+
 /**
  * @param text {string}
  * @return {Template} */
@@ -2553,6 +3430,21 @@ function itemClose(ng, item) {
 	return tpl.html === item.html && tpl.svgMode === item.svgMode;
 }
 
+/**
+ * Is this item somewhere in the list the previous render drew, i.e. did it move rather than
+ * appear?  A plain scan rather than a map, because it runs once and usually answers on the way
+ * past.
+ * @param lastItems {Array}
+ * @param oldLen {int}
+ * @param item {*}
+ * @return {boolean} */
+function itemIsElsewhere(lastItems, oldLen, item) {
+	for (let i=0; i<oldLen; i++)
+		if (lastItems[i] === item)
+			return true;
+	return false;
+}
+
 /**
  * Insert all of ng's nodes before anchor within parent.
  * @param parent {Node}
@@ -2649,12 +3541,6 @@ function reconcileNodes(parentNode, oldNodes, newNodes, before) {
  * matches NodeGroups to new templates by this key. */
 class PathToKey extends Path {
 
-	/**
-	 * @param exprs {Expr[]} Only the first is used. */
-	apply(exprs) {
-		this.parentNg.key = exprs[0];
-	}
-
 	applySingle(expr) {
 		this.parentNg.key = expr;
 	}
@@ -2676,15 +3562,15 @@ class PathToComponent extends Path {
 	 * Call render() on the component pointed to by this Path.
 	 * And instantiate it (from a -solarite-placeholder element) if it hasn't been done yet.
 	 * @param exprs {Expr[][]} Expressions to evaluate for each attribute to pass to the constructor.
-	 * This is different than other Path.apply() functions which only receive Expr[] and not Expr[][].
+	 * This is different than other Path.applyAll() functions which only receive Expr[] and not Expr[][].
 	 * Because here we're receiving an array of arrays of expressions, one for each dynamic attribute. */
-	apply(exprs) {
-		//#IFDEV
+	applyAll(exprs) {
+		//#IFDEBUG
 		assert(Array.isArray(exprs));
 		assert(!exprs.length || Array.isArray(exprs[0]));
 		//#ENDIF
 
-		//#IFDEV
+		//#IFDEBUG
 		assert(exprs.length === this.attribPaths.length);
 		//#ENDIF
 
@@ -2700,8 +3586,15 @@ class PathToComponent extends Path {
 		for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
 			if (attribPath instanceof PathToKey) // The list key is never a component arg.
 				continue;
+			// Event attributes like onchange=${...} are bound with addEventListener when the
+			// PathToEvent itself is applied.  They must not also become constructor fields:
+			// a component that assigns its fields onto itself would set the native on*
+			// property, making the handler fire a second time with only the (event) argument
+			// instead of Solarite's documented (event, element) signature.
+			if (attribPath instanceof PathToEvent)
+				continue;
 			if (attribPath instanceof PathToAttribValue) {
-				let name = Util.dashesToCamel(attribPath.attrName);
+				let name = Util.dashesToCamel(attribPath.attribName);
 				
 				// Resolve two way bindimg path before we pass it to the component.
 				let value = attribPath.getValue(exprs[i]);
@@ -2723,85 +3616,120 @@ class PathToComponent extends Path {
 			}
 		}
 
-		// 2. Instantiate component on first time.
-		let isAttrib = el.getAttribute('_is');
-		if (el.tagName.endsWith('-SOLARITE-PLACEHOLDER') || isAttrib) {
-
+		// 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;
+				}
 
-			// 2a. Instantiate component
-			let tagName = (isAttrib || el.tagName.slice(0, -21)).toLowerCase(); // Remove -SOLARITE-PLACEHOLDER
-			let Constructor = customElements.get(tagName);
-			if (!Constructor)
-				throw new Error(`Must call customElements.define('${tagName}', Class) before using it.`);
+				// 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);
 
-			Globals$1.currentSlotChildren = [...el.childNodes]; // TODO: Does this need to be a stack?
-			let newEl = new Constructor(attribs);
+				// 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, '');
+					}
 
-			// 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;
-				if (valType === 'boolean') {
-					if (val !== false && val !== undefined && val !== null) // Util.isFalsy() inlined
-						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.getRootNode(), 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.apply(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;
+		}
 	}
 
 	/**
@@ -2809,21 +3737,16 @@ class PathToComponent extends Path {
 	 * @param pathOffset {int}
 	 * @return {Path} */
 	clone(newRoot, pathOffset=0) {
-		/*#IFDEV*/this.verify();/*#ENDIF*/
-		let nodeMarker = this.getNewNodeMarker(newRoot, pathOffset);
-		let result = new PathToComponent(null, nodeMarker);
+		// A component path's nodeBefore is always null (the constructor discards it), so the
+		// base clone() resolves only the nodeMarker and hands back a new PathToComponent.
+		let result = super.clone(newRoot, pathOffset);
 		result.attribPaths = this.attribPaths.map(path => path.clone(newRoot, pathOffset));
-
-		//#IFDEV
-		result.verify();
-		//#ENDIF
-
 		return result;
 	}
 
 	getExpressionCount() { return 0 }
 
-	//#IFDEV
+	//#IFDEBUG
 	verify() {
 		super.verify();
 		assert(this.nodeMarker.nodeType === Node.ELEMENT_NODE);
@@ -2847,7 +3770,7 @@ class Shell {
 
 	/**
 	 * @type {DocumentFragment|Text} DOM parent of the shell's nodes. */
-	fragment;
+	docFrag;
 
 	/** @type {Path[]} Paths to where expressions should go. */
 	paths = [];
@@ -2867,10 +3790,22 @@ class Shell {
 	/** @type {boolean} True if any of this Shell's own paths is a PathToComponent. */
 	hasComponentPaths = false;
 
+	/** @type {boolean} True if any path binds an attribute that's a live HTML property
+	 * (checked, value, selected — Util.isHtmlProp).  Users flip those underneath the template,
+	 * so "expression unchanged" doesn't mean "DOM unchanged" and the skip shortcuts exempt them. */
+	hasLivePropPaths = false;
+
 	/** @type {boolean} True if every path consumes exactly one expression and none are components.
 	 * Lets NodeGroup.applyExprs() use a fast loop without allocating per-path expression arrays. */
 	pathsSingleExpr = false;
 
+	/** @type {boolean} True when a NodeGroup whose values are unchanged still has work to do:
+	 * components re-render so changes deeper in the tree surface, and live HTML properties are
+	 * rewritten because a click can flip them underneath the cached expression.  The list scans
+	 * check this before calling PathToNodes.refreshSameItem(), so the overwhelmingly common
+	 * unchanged row costs one field read instead of a call. */
+	needsRefresh = false;
+
 	/** @type {boolean} True if this Shell has any ids, styles, or scripts. */
 	hasEmbeds = false;
 
@@ -2886,6 +3821,52 @@ class Shell {
 	 * with no per-instance Path objects.  See the stampPaths setup in the constructor. */
 	stampable = false;
 
+	// The remaining fields are only filled in for some shells (resolve program, stampable),
+	// but they're all declared here so every Shell instance shares one hidden class.
+	// NodeGroup's per-row code (its constructor, applyStamp, resolveStampSlots) reads these
+	// off whichever shell it's given, and a single shape keeps those loads monomorphic.
+
+	/** @type {?string} The Template close key, cached here by the NodeGroup constructor so
+	 * each new template row skips a WeakMap lookup.  See Template.getCloseKey(). */
+	closeKey;
+
+	/** @type {?int[]} The resolve program: flat [parentSlot, childIndex] pairs in dependency
+	 * order; pair i fills slot i+1, slot 0 being the fragment.  Built by buildResolveProgram();
+	 * undefined for shells with components. */
+	resolveOps;
+
+	/** @type {?Node[]} Reusable scratch array for resolved nodes; safe because resolution
+	 * never re-enters. */
+	resolveSlots;
+
+	// The stamp program, set only when stampable is true:
+
+	/** @type {?int[]} Indexes of PathToNodes paths, checked for primitive exprs before stamping. */
+	nodesPathIdx;
+
+	/** @type {?Path[]} One shared stamper per path; nodeMarker/parentNg are set per use. */
+	stampPaths;
+
+	/** @type {?Uint8Array} Opcode per path; see the stamp-program comment in the constructor. */
+	stampOp;
+
+	/** @type {?Uint16Array} paths[i].markerSlot, in a flat array so the hot loop
+	 * doesn't load the Path object to find its slot. */
+	stampSlot;
+
+	/** @type {?Path[]} Per-path extra the stamp program needs: the event stamper for op 3
+	 * (it carries delegatedKey and eventName), the attribute name for op 4, null otherwise. */
+	stampAux;
+
+	/** @type {?string[]} The delegatable event names this shell binds, so a loop can register
+	 * their dispatchers once for the whole run of rows instead of testing every bound node. */
+	stampEventNames;
+
+	/** @type {?Uint8Array} Per-path flags the in-place rewrite loop needs, so it reads one byte
+	 * from a flat array instead of two properties from a Path object it otherwise wouldn't
+	 * touch.  Bit 1 = the path binds a live HTML property, bit 2 = it's a whole-parent child. */
+	stampFlags;
+
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
@@ -2895,13 +3876,13 @@ class Shell {
 		if (!html)
 			return;
 
-		//#IFDEV
+		//#IFDEBUG
 		this._html = html.join('');
 		//#ENDIF
 
 		// If no html tags or entities, just create a text node.
 		if (html.length === 1 && !html[0].match(/[<&]/)) {
-			this.fragment = Globals$1.doc.createTextNode(html[0]);
+			this.docFrag = Globals$1.doc.createTextNode(html[0]);
 			return;
 		}
 
@@ -2919,29 +3900,32 @@ class Shell {
 				let frag = Globals$1.doc.createDocumentFragment();
 				while (svgEl.firstChild)
 					frag.append(svgEl.firstChild);
-				this.fragment = frag;
+				this.docFrag = frag;
 			}
 			else {
 				template.innerHTML = htmlWithPlaceholders;
-				this.fragment = template.content;
+				this.docFrag = template.content;
 			}
 		}
 		else { // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
 			template.content.append(Globals$1.doc.createTextNode(''));
-			this.fragment = template.content;
+			this.docFrag = template.content;
 		}
 
 		// 1b. Remove whitespace-only text nodes inside table-structure elements.
 		// The parser foster-parents non-whitespace text out of tables, and whitespace-only
 		// text between cells/rows is never rendered, so removing it is invisible.
 		// Smaller fragments make cloning, path resolution, and insertion faster.
-		stripTableWhitespace(this.fragment);
+		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 = [];
 		let placeholdersUsed = 0;
-		const walker = Globals$1.doc.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		const walker = Globals$1.doc.createTreeWalker(this.docFrag, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
 		while (node = walker.nextNode()) {
 
 			// Remove previous elements after each iteration, so paths will still be calculated correctly.
@@ -2950,7 +3934,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 = [];
 
@@ -2959,13 +3943,20 @@ class Shell {
 					// The reserved key attribute identifies this template within a keyed list.
 					// It's consumed here and never written to the DOM or passed to components.
 					if (attr.name === 'key') {
+
+						// These three are template-authoring mistakes, and every one of them fails SILENTLY if
+						// it isn't caught: the reconciler would key rows on a garbage value and reuse the wrong
+						// DOM, with nothing reported.  So they ship, unlike the assertions elsewhere in this
+						// file.  The cost is one regex split per unique template \u2014 never per render, never per
+						// row \u2014 which is why they are affordable to keep.
 						let parts = attr.value.split(/[\ue000-\uf8ff]/g);
 						if (parts.length !== 2 || parts[0] !== '' || parts[1] !== '')
-							throw new Error(`The key attribute is reserved and must be a single expression: key=\${...}`);
-						if (node.parentNode !== this.fragment)
-							throw new Error(`The key attribute must be on a top-level element of its template.`);
+							throw new Error(`Solarite: key must be one whole expression.`);
+						if (node.parentNode !== this.docFrag)
+							throw new Error(`Solarite: key must be on a top-level element.`);
 						if (this.keyIndex >= 0)
-							throw new Error(`A template can have only one key attribute.`);
+							throw new Error(`Solarite: duplicate key attribute.`);
+
 						this.keyIndex = attr.value.charCodeAt(0) - attribPlaceholder;
 
 						let path = new PathToKey(null, node);
@@ -3010,19 +4001,33 @@ class Shell {
 							}
 
 							placeholdersUsed += parts.length - 1;
-							// In svgMode, setting typed SVG attributes (viewBox, r, etc.) with the placeholders
-							// stripped out makes the browser log parse errors, both here and when the fragment is cloned.
-							// Remove the attribute instead; apply() recreates it with the real values.
-							// Event attributes bound to a single expression are removed because they bind via
-							// addEventListener; leaving an empty onclick="" attribute violates a strict CSP when the event fires.
-							if (svgMode || (isEvent && !nonEmptyParts))
+							// An attribute whose whole value is one expression is removed from the shell:
+							// its stamped value is always the empty string, so every clone would carry a
+							// useless empty attribute that costs storage on creation and a slot in the
+							// element's attribute list forever, and apply() writes the real value anyway
+							// (a missing attribute reads back as '', so an empty expression still writes
+							// nothing).  Event attributes must be removed for the same reason plus a
+							// stricter one: an empty onclick="" violates a strict CSP when the event fires.
+							// In svgMode, setting typed SVG attributes (viewBox, r, etc.) with the
+							// placeholders stripped out makes the browser log parse errors, both here and
+							// when the fragment is cloned, so those are removed whether or not they're whole.
+							if (svgMode || !nonEmptyParts)
 								node.removeAttribute(attr.name);
-							else try {
+
+							// setAttribute throws only when the template author wrote a name the browser
+							// refuses, such as one holding a space or a quote.  That name comes from a tagged
+							// template literal's static text, so it is a typo that surfaces the first time the
+							// template renders and can never appear later or for only some users.  Development
+							// therefore wraps the call to rethrow with the attribute name and the tag included,
+							// because the browser's own DOMException names neither and leaves the author
+							// hunting.  Production ships the bare call and lets that DOMException through: the
+							// friendlier wording is only worth its bytes to whoever can still fix the template.
+							else /*#IFDEBUG*/try {/*#ENDIF*/
 								node.setAttribute(attr.name, parts.join(''));
-							}
+							/*#IFDEBUG*/}
 							catch (e) {
 								throw new Error(`Error setting attribute "${attr.name}" on node <${node.tagName}>: ${e.message}`);
-							}
+							}/*#ENDIF*/
 						}
 					}
 				}
@@ -3033,10 +4038,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');
-					}
 				}
 			}
 
@@ -3044,7 +4045,7 @@ class Shell {
 			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 
 				if (node?.parentNode?.closest && node?.parentNode?.closest('[contenteditable]'))
-					throw new Error(`Contenteditable can't have expressions inside them. Use <div contenteditable value="\${...}"> instead.`);
+					throw new Error(`Solarite: no \${...} inside contenteditable; use value="\${...}".`);
 
 				let parent = node.parentNode;
 
@@ -3053,7 +4054,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);
@@ -3068,7 +4069,7 @@ class Shell {
 						nodeBefore = Globals$1.doc.createComment('Path:'+this.paths.length);
 						node.parentNode.insertBefore(nodeBefore, node);
 					}
-					/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
+					/*#IFDEBUG*/assert(nodeBefore);/*#ENDIF*/
 
 					// Get the next node.
 					let nodeMarker;
@@ -3083,7 +4084,7 @@ class Shell {
 						nodeMarker = node;
 						nodeMarker.textContent = 'PathEnd:'+ this.paths.length;
 					}
-					/*#IFDEV*/assert(nodeMarker);/*#ENDIF*/
+					/*#IFDEBUG*/assert(nodeMarker);/*#ENDIF*/
 
 					let path = new PathToNodes(nodeBefore, nodeMarker);
 					this.paths.push(path);
@@ -3091,11 +4092,6 @@ class Shell {
 				}
 			}
 
-			// Comments become text nodes when inside textareas.
-			else if (node.nodeType === 3 && node.parentNode?.tagName === 'TEXTAREA' && node.textContent.includes('<!--!✨!-->'))
-				throw new Error(`Textarea can't have expressions inside them. Use <textarea value="\${...}"> instead.`);
-			
-			
 			// Sometimes users will comment out a block of html code that has expressions.
 			// Here we look for expressions in comments.
 			// We don't actually update them dynamically, but we still add paths for them.
@@ -3109,29 +4105,39 @@ class Shell {
 				}
 			}
 
-			// Replace comment placeholders inside script and style tags, which have become text nodes.
-			else if (node.nodeType === 3 && ['SCRIPT', 'STYLE'].includes(node.parentNode?.nodeName)) { // Node.TEXT_NODE
-				let parts = node.textContent.split(commentPlaceholder);
-				if (parts.length > 1) {
-
-					let placeholders = [];
-					for (let i = 0; i<parts.length; i++) {
-						let current = Globals$1.doc.createTextNode(parts[i]);
-						node.parentNode.insertBefore(current, node);
-						if (i > 0)
-							placeholders.push(current);
-					}
-
-					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new PathToNodes(node.previousSibling, node);
-						this.paths.push(path);
-						placeholdersUsed ++;
+			// A few elements have raw-text bodies, which the html parser reads as literal characters
+			// rather than as markup.  A comment placeholder written inside one therefore never becomes
+			// a comment node; it arrives here as ordinary text.  A textarea can't support expressions
+			// in its body at all, while script and style can, by splitting their text around each
+			// placeholder so that every expression gets a text node of its own to write into.
+			else if (node.nodeType === 3) { // Node.TEXT_NODE
+				let parentName = node.parentNode?.nodeName;
+
+				if (parentName === 'TEXTAREA' && node.textContent.includes(commentPlaceholder))
+					throw new Error(`Solarite: no \${...} inside textarea; use value="\${...}".`);
+
+				else if (parentName === 'SCRIPT' || parentName === 'STYLE') {
+					let parts = node.textContent.split(commentPlaceholder);
+					if (parts.length > 1) {
+
+						// Every part is inserted before the original node, in order, so from the second
+						// part onward the text node made on the previous iteration is already sitting
+						// immediately before this one and serves as the new path's nodeBefore.
+						for (let i = 0; i<parts.length; i++) {
+							let current = Globals$1.doc.createTextNode(parts[i]);
+							node.parentNode.insertBefore(current, node);
+							if (i > 0) {
+								let path = new PathToNodes(current.previousSibling, current);
+								this.paths.push(path);
+								placeholdersUsed ++;
+
+								/*#IFDEBUG*/path.verify();/*#ENDIF*/
+							}
+						}
 
-						/*#IFDEV*/path.verify();/*#ENDIF*/
+						// Removing it here will mess up the treeWalker.
+						toRemove.push(node);
 					}
-
-					// Removing them here will mess up the treeWalker.
-					toRemove.push(node);
 				}
 			}
 		}
@@ -3140,31 +4146,37 @@ class Shell {
 		// Less than or equal because there can be one path to multiple expressions
 		// if those expressions are in the same attribute value.
 		if (placeholdersUsed !== html.length-1)
-			throw new Error(`Could not parse expressions in template.  Check for duplicate attributes or malformed html: ${html.join('${...}')}`);
+			throw new Error(`Solarite: bad html or duplicate attribute: ${html.join('${...}')}`);
 
 		for (let path of this.paths) {
-			if (path.nodeBefore)
-				path.nodeBeforeIndex = Array.prototype.indexOf.call(path.nodeBefore.parentNode.childNodes, path.nodeBefore);
+			// -1 when the path has no nodeBefore.  Assigned unconditionally so every shell path
+			// of a given class takes the same property-addition order and shares one hidden class.
+			path.nodeBeforeIndex = path.nodeBefore
+				? Array.prototype.indexOf.call(path.nodeBefore.parentNode.childNodes, path.nodeBefore)
+				: -1;
 
 			// Must be calculated after we remove the toRemove nodes:
 			path.nodeMarkerPath = Path.get(path.nodeMarker);
-
-
 		}
 
 		this.findEmbeds();
-		this.buildResolveProgram();
 
+		// This scan must run before buildResolveProgram(), which skips shells with components
+		// and reads hasComponentPaths rather than walking the paths a second time.
 		this.pathsSingleExpr = true;
 		for (let path of this.paths) {
 			if (path instanceof PathToComponent) {
 				this.hasComponentPaths = true;
 				this.pathsSingleExpr = false;
-				break; // Both facts are now decided.
 			}
-			if (path.getExpressionCount() !== 1)
-				this.pathsSingleExpr = false; // Keep scanning for components.
+			else if (path.getExpressionCount() !== 1)
+				this.pathsSingleExpr = false;
+			if (path.isHtmlProperty) // needs the full scan — no early break
+				this.hasLivePropPaths = true;
 		}
+		this.needsRefresh = this.hasComponentPaths || (this.hasLivePropPaths && this.pathsSingleExpr);
+
+		this.buildResolveProgram();
 
 		// Stampable shells create NodeGroups without allocating any Path objects:
 		// NodeGroup.applyStamp() writes expressions through these shared stamper paths,
@@ -3189,17 +4201,50 @@ class Shell {
 			}
 			if (ok) {
 				this.stampable = true;
-
-				/** @type {int[]} Indexes of PathToNodes paths, checked for primitive exprs before stamping. */
 				this.nodesPathIdx = nodesIdx;
-
-				/** @type {Path[]} One shared stamper per path; nodeMarker/parentNg are set per use. */
 				this.stampPaths = this.paths.map(p => p.cloneWithNodes(null, p.nodeMarker));
 
+				// Compiled stamp program: one opcode per path lets applyStamp() write a fresh
+				// row through a flat branch chain instead of dispatching applySingle() per path.
+				// 0 = generic (shared stamper fallback), 1 = list key (no DOM), 2 = wholeParent
+				// child text, 3 = delegatable single-expression event (written as node expandos
+				// when the root delegates, the default).
+				let n = this.paths.length;
+				this.stampOp = new Uint8Array(n);
+				this.stampSlot = new Uint16Array(n);
+				this.stampAux = new Array(n).fill(null);
+				this.stampFlags = new Uint8Array(n);
+
+				let eventNames = null;
+				for (let i=0; i<n; i++) {
+					let p = this.paths[i], sp = this.stampPaths[i];
+					this.stampSlot[i] = p.markerSlot;
+					this.stampFlags[i] = (sp.isHtmlProperty ? 1 : 0) | (sp.wholeParent ? 2 : 0);
+					if (p instanceof PathToKey)
+						this.stampOp[i] = 1;
+					else if (sp.wholeParent)
+						this.stampOp[i] = 2;
+					else if (sp instanceof PathToEvent && sp.delegatedKey !== undefined && !sp.attrValue) {
+						this.stampOp[i] = 3;
+						this.stampAux[i] = sp;
+						(eventNames ??= []).push(sp.eventName);
+					}
+
+					// A plain attribute holding one whole expression.  The shell no longer carries
+					// the attribute at all (see the placeholder handling above), so on a freshly
+					// cloned row the value is known to be absent and a string can be written
+					// without first reading back what's there.
+					else if (sp instanceof PathToAttribValue && !sp.attrValue && !sp.isHtmlProperty
+						&& !sp.isComponentAttrib) {
+						this.stampOp[i] = 4;
+						this.stampAux[i] = sp.attribName;
+					}
+				}
+				this.stampEventNames = eventNames;
 			}
 		}
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
 	}
 
 	/**
@@ -3210,42 +4255,64 @@ class Shell {
 	 * @param htmlChunks {string[]}
 	 * @returns {string} Html with the placeholders in place. */
 	static addPlaceholders(htmlChunks) {
-		let result = [];
+		let result = '';
+
+		// Where the tokenizer is as it walks the chunks.  An expression can sit in the middle of an attribute
+		// value, so both of these have to survive from one chunk to the next.  Nothing else has to: an
+		// expression anywhere inside a tag gets the same attribute placeholder, so the machine only has to
+		// know whether it is inside a tag at all, and whether a quoted value is currently open.
+		let inTag = false; // True from the '<' that opens a tag or comment through the '>' that closes it.
+		let quote = null; // The quote character that opened the attribute value we're inside of: null, '"', or "'".
 
-		let htmlParser = new HtmlParser(); // Reset the context.
 		for (let i = 0; i < htmlChunks.length; i++) {
-			let lastHtml = htmlChunks[i];
+			let html = htmlChunks[i];
 
 			// Append -solarite-placholder to web component tags, so we can pass args to them when they're instantiated.
-			let lastIndex = 0;
-			let context = htmlParser.parse(lastHtml, (html, index, prevContext/*, nextContext*/) => { // This function is called every time the html context changes.
-				if (lastIndex !== index) {
-					let token = html.slice(lastIndex, index);
-
-					if (prevContext === HtmlParser.Tag) {
-						// Find Web Component tags and append -solarite-placeholder to their tag names
-						// This way we can gather their constructor arguments and their children before we call their constructor.
-						// Later, PathToComponent.apply() will replace them with the real components.
-						// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-						const isWebComponentTagName = /^<\/?[a-z][a-z0-9]*-[a-z0-9-]+/i; // a dash in the middle
-						token = token.replace(isWebComponentTagName, match => match + '-SOLARITE-PLACEHOLDER'); // caps to match other instances of this string, for better compression.
+			let lastIndex = 0; // Start of the run of this chunk not yet copied into result.
+			for (let j = 0; j < html.length; j++) {
+				const char = html[j];
+
+				if (!inTag) {
+					if (char === '<' && html[j + 1].match(/[/a-z!]/i)) { // Start of a tag or comment.
+						inTag = true;
+
+						// A component suffix can only ever be added right here, at the '<' that opens the tag, so
+						// the name is matched on the spot with a sticky regex rather than collected into a buffer
+						// and matched later.  The greedy tag-name class can't run past the name, because every
+						// character that can follow a tag name is outside it.
+						isWebComponentTagName.lastIndex = j;
+						let match = isWebComponentTagName.exec(html);
+						if (match) {
+							let end = j + match[0].length;
+							result += html.slice(lastIndex, end) + '-SOLARITE-PLACEHOLDER';
+							lastIndex = end;
+						}
 					}
+				}
 
-					result.push(token);
+				// Inside a tag, only two characters end anything: the quote that closes the value we're in, or,
+				// when we're not in one, the '>' that closes the tag.  Attribute names, '=', unquoted values and
+				// whitespace all need no handling at all.
+				else if (quote) {
+					if (char === quote)
+						quote = null;
 				}
-				lastIndex = index;
-			});
+				else if (char === '"' || char === "'")
+					quote = char;
+				else if (char === '>')
+					inTag = false;
+			}
+
+			result += html.slice(lastIndex);
 
 			// Insert placeholders
-			if (i < htmlChunks.length - 1) {
-				if (context === HtmlParser.Text)
-					result.push(commentPlaceholder); // Comment Placeholder. because we can't put text in between <tr> tags for example.
-				else
-					result.push(String.fromCharCode(attribPlaceholder + i));
-			}
+			if (i < htmlChunks.length - 1)
+				result += inTag
+					? String.fromCharCode(attribPlaceholder + i)
+					: commentPlaceholder; // Comment Placeholder. because we can't put text in between <tr> tags for example.
 		}
 
-		return result.join('');
+		return result;
 	}
 
 	/**
@@ -3257,21 +4324,18 @@ class Shell {
 	 * this.ids
 	 * this.staticComponents */
 	findEmbeds() {
-		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('script'), el => Path.get(el));
+		this.scripts = Array.prototype.map.call(this.docFrag.querySelectorAll('script'), el => Path.get(el));
 
 		// TODO: only find styles that have Paths in them?
-		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => Path.get(el));
-
-		let idEls = this.fragment.querySelectorAll('[id],[data-id]');
+		this.styles = Array.prototype.map.call(this.docFrag.querySelectorAll('style'), el => Path.get(el));
 
-		// Check for valid id names.
-		for (let el of idEls) {
-			let id = el.getAttribute('data-id') || el.getAttribute('id');
-			if (Globals$1.div.hasOwnProperty(id))
-				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
-		}
-
-		this.ids = Array.prototype.map.call(idEls, el => Path.get(el));
+		// An id that would clobber a built-in element property is reported by Util.bindId(), which
+		// asks the real component object, with `in`, at the moment the binding happens.  The check
+		// that used to stand here asked Globals.div.hasOwnProperty(id) instead, and a freshly
+		// created element has no own properties at all — every DOM property an element exposes
+		// lives on its interface prototype — so that test could never be true and the error it
+		// guarded was never reachable.
+		this.ids = Array.prototype.map.call(this.docFrag.querySelectorAll('[id],[data-id]'), el => Path.get(el));
 
 		this.hasEmbeds = this.ids.length > 0 || this.styles.length > 0 || this.scripts.length > 0;
 	}
@@ -3282,25 +4346,37 @@ class Shell {
 	 * Replaces per-path root-to-node walks in the hot NodeGroup creation path.
 	 * Skipped for shells with components, whose clone() has special attribPaths behavior. */
 	buildResolveProgram() {
-		let hasComponents = false;
-		for (let path of this.paths)
-			if (path instanceof PathToComponent) {
-				hasComponents = true;
-				break;
-			}
-		if (hasComponents || !this.paths.length)
+		if (this.hasComponentPaths || !this.paths.length)
 			return;
 
 		let ops = [];
 		let slotOf = new Map();
-		let frag = this.fragment;
+		let frag = this.docFrag;
 		let nextSlot = 1;
 		let getSlot = node => {
 			if (node === frag)
 				return 0;
 			let s = slotOf.get(node);
 			if (s === undefined) {
-				ops.push(getSlot(node.parentNode), Array.prototype.indexOf.call(node.parentNode.childNodes, node));
+				// Two ways to reach a node, costing one pointer step each: walk forward from an
+				// already-resolved earlier sibling, or take the parent's firstChild and walk
+				// forward.  Sibling steps win whenever they're no more numerous, and they can
+				// also spare the parent a slot of its own — in a row of cells, resolving each
+				// <td> from the previous one is one step instead of firstChild plus its index.
+				let d = 0, from = -1;
+				for (let sib = node.previousSibling; sib; sib = sib.previousSibling) {
+					d++;
+					let ss = slotOf.get(sib);
+					if (ss !== undefined) {
+						from = ss;
+						break;
+					}
+				}
+				let index = Array.prototype.indexOf.call(node.parentNode.childNodes, node);
+				if (from >= 0 && d <= index + 1)
+					ops.push(from, -d); // A negative step count means "walk nextSibling from that slot".
+				else
+					ops.push(getSlot(node.parentNode), index);
 				s = nextSlot++;
 				slotOf.set(node, s);
 			}
@@ -3311,10 +4387,7 @@ class Shell {
 			path.beforeSlot = path.nodeBefore ? getSlot(path.nodeBefore) : -1;
 		}
 
-		/** @type {?int[]} Flat [parentSlot, childIndex] pairs; pair i fills slot i+1. */
 		this.resolveOps = ops;
-
-		/** @type {Node[]} Reusable scratch array for resolved nodes; safe because resolution never re-enters. */
 		this.resolveSlots = new Array(nextSlot);
 
 		// A lone root element means slot 1 is always that element (the first op pair is [0, 0]),
@@ -3349,15 +4422,15 @@ class Shell {
 		lastSvgMode = svgMode;
 		lastShell = result;
 
-		/*#IFDEV*/result.verify();/*#ENDIF*/
+		/*#IFDEBUG*/result.verify();/*#ENDIF*/
 		return result;
 	}
 
-	//#IFDEV
+	//#IFDEBUG
 	// For debugging only:
 	verify() {
 		for (let path of this.paths) {
-			assert(this.fragment.contains(path.getParentNode()));
+			assert(this.docFrag.contains(path.getParentNode()));
 			path.verify();
 		}
 	}
@@ -3367,6 +4440,15 @@ class Shell {
 
 const commentPlaceholder = `<!--!✨!-->`;
 
+// A tag name with a dash in the middle, which is what makes an element a web component.  addPlaceholders()
+// tests this at each '<' that opens a tag, and a match gets -solarite-placeholder appended to its tag name.
+// That way we can gather a component's constructor arguments and its children before we call its constructor;
+// later PathToComponent.applyAll() replaces the placeholder tag with the real component.  The suffix is written in
+// caps wherever it appears, so that the several copies of it in this project compress well.  It's sticky rather
+// than anchored so it can be tested at an offset within the chunk instead of against a sliced-out token.
+// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
+const isWebComponentTagName = /<\/?[a-z][a-z0-9]*-[a-z0-9-]+/iy;
+
 // Elements whose whitespace-only text children are never rendered.
 const tableTags = ['TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR'];
 
@@ -3386,6 +4468,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;
 
@@ -3395,6 +4509,50 @@ const attribPlaceholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_A
 
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
 
+/** Stand-in Shell for text NodeGroups, which are never parsed from html.  Its default field
+ * values (no components, no live properties, no single-expression paths) are exactly what the
+ * per-row code must see for a bare Text node, so ng.shell is never null. */
+const textShell = new Shell();
+
+// The Shell whose delegated dispatchers a root last registered, kept on the RootNodeGroup so
+// that a run of rows checks one field instead of asking at every bound node.  A Symbol rather
+// than a declared field, since only root NodeGroups ever carry it and a declared field would
+// cost a slot on every row.  The delegation mode isn't part of it: it comes from the root's
+// render options, which are fixed when the root is created.
+const lastStampedShellKey = Symbol('solariteStampedShell');
+
+/**
+ * Run a Shell's precomputed resolve program (see Shell.buildResolveProgram) into the shell's
+ * shared slots array, which the caller has already seeded with its starting node.
+ * Each node is reached with firstChild/nextSibling pointer walks instead of childNodes[index];
+ * the live NodeList indexing is markedly slower, and the indices are small (markers are
+ * elements, often the first child after whitespace stripping).  A negative step count means the
+ * program reaches this node by walking forward from an earlier sibling's slot instead of from
+ * its parent.
+ * @param slots {Node[]} The shell's shared scratch array; slot 0 is the fragment.
+ * @param ops {int[]} Flat [parentSlot, childIndex] pairs in dependency order.
+ * @param i {int} Index of the first op pair to run; earlier pairs are pre-seeded by the caller.
+ * @param s {int} Slot that pair fills.
+ * @return {Node[]} slots, so callers can resolve and use it in one expression. */
+function runResolveOps(slots, ops, i, s) {
+	for (; i<ops.length; i+=2, s++) {
+		let k = ops[i+1], node;
+		if (k < 0) {
+			node = slots[ops[i]];
+			do
+				node = node.nextSibling;
+			while (++k < 0);
+		}
+		else {
+			node = slots[ops[i]].firstChild;
+			for (; k>0; k--)
+				node = node.nextSibling;
+		}
+		slots[s] = node;
+	}
+	return slots;
+}
+
 /**
  * A group of Nodes instantiated from a Shell, with Expr's filled in.
  *
@@ -3428,11 +4586,11 @@ class NodeGroup {
 	 * matched by PathToNodes.applyKeyed().  Undefined for unkeyed NodeGroups. */
 	key;
 
-	/** @type {boolean} True if any of this NodeGroup's own paths is a PathToComponent. */
-	hasComponentPaths = false;
-
-	/** @type {boolean} True if every path consumes exactly one expression and none are components. */
-	pathsSingleExpr = false;
+	/** @type {Shell} The Shell this NodeGroup was cloned from, so the per-row code can read
+	 * hasComponentPaths/hasLivePropPaths/pathsSingleExpr and the stamp program off it instead
+	 * of copying them onto every instance and re-looking the Shell up on every apply.
+	 * Text NodeGroups get the shared empty textShell, which reports false for all of them. */
+	shell;
 
 	/** @type {boolean} True until applyExprs() finishes the first time.
 	 * While true, ancestor node caches can't reference this NodeGroup's nodes, so they don't need invalidation. */
@@ -3443,6 +4601,11 @@ class NodeGroup {
 	 * @type {Node[]} Cached result of getNodes() used only for improving performance.*/
 	nodesCache;
 
+	/** @type {?Node[]} Slot nodes resolved by the first rewriteStamp(); a stamped group's
+	 * element structure never changes while it stays stampable, so they're reused on every
+	 * later rewrite.  Declared here so every NodeGroup keeps one monomorphic hidden class. */
+	stampSlotsCache = null;
+
 	/**
 	 * A map between <style> Elements and their text content.
 	 * This lets NodeGroup.updateStyles() see when the style text has changed.
@@ -3464,7 +4627,7 @@ class NodeGroup {
 		this.rootNg = parentPath?.parentNg?.rootNg || this;
 		this.parentPath = parentPath;
 
-		/*#IFDEV*/assert(this.rootNg);/*#ENDIF*/
+		/*#IFDEBUG*/assert(this.rootNg);/*#ENDIF*/
 		this.template = template;
 
 		// JSX templates carry their list key on the Template (tagged templates instead set it via
@@ -3475,24 +4638,22 @@ class NodeGroup {
 		// If it's just a text node, skip a bunch of unnecessary steps.
 		// el can be an existing Text node to adopt, from PathToNodes' bare-text fast path.
 		if (template.isText) {
+			this.shell = textShell;
 			this.closeKey = template.getCloseKey();
 			this.startNode = this.endNode = el || Globals$1.doc.createTextNode(template.html[0]);
 		}
 
 		else {
 			// Get a cached version of the parsed and instantiated html, and Paths:
-			const shell = Shell.get(template.html, template.svgMode);
+			const shell = this.shell = Shell.get(template.html, template.svgMode);
 
 			// The shell caches the close key so each new template doesn't repeat the WeakMap lookup.
 			this.closeKey = shell.closeKey ??= template.getCloseKey();
 
-			this.hasComponentPaths = shell.hasComponentPaths;
-			this.pathsSingleExpr = shell.pathsSingleExpr;
-
 			// A lone root element is cloned directly, skipping a throwaway fragment wrapper.
 			// Only for child NodeGroups; RootNodeGroup's grafting expects a fragment.
 			if (shell.singleRoot && parentPath !== null) {
-				const clone = shell.fragment.firstChild.cloneNode(true);
+				const clone = shell.docFrag.firstChild.cloneNode(true);
 				this.startNode = this.endNode = clone;
 
 				// Stampable shells skip path creation entirely; the first applyExprs() routes
@@ -3501,7 +4662,7 @@ class NodeGroup {
 					this.setPathsFromFragment(clone, shell, 0, true);
 			}
 			else {
-				const shellFragment = shell.fragment.cloneNode(true);
+				const shellFragment = shell.docFrag.cloneNode(true);
 
 				if (shellFragment.nodeType === 11) { // DocumentFragment
 					this.startNode = shellFragment.firstChild;
@@ -3513,7 +4674,7 @@ class NodeGroup {
 			}
 		}
 
-		//#IFDEV
+		//#IFDEBUG
 		this.verify();
 		//#ENDIF
 	}
@@ -3544,10 +4705,14 @@ class NodeGroup {
 	 * Dispatches expression handling to other functions depending on the path type.
 	 * @param exprs {(*|*[]|function|Template)[]}
 	 * @param includeNonComponents {boolean} False to only apply component paths,
-	 * used when the non-component exprs are known to be unchanged. */
-	applyExprs(exprs, includeNonComponents=true) {
-
-		/*#IFDEV*/
+	 * used when the non-component exprs are known to be unchanged.
+	 * @param lastExprs {?Expr[]} The expressions applied last time, when the caller has them.
+	 * Paths that would provably do nothing with an unchanged expression are then skipped —
+	 * see Path.skipIfSame.  A root template's event bindings are the usual beneficiaries:
+	 * they are the same handlers on every render, and re-binding them costs a call apiece. */
+	applyExprs(exprs, includeNonComponents=true, lastExprs=null) {
+
+		/*#IFDEBUG*/
 		this.verify();
 		/*#ENDIF*/
 
@@ -3555,14 +4720,18 @@ class NodeGroup {
 
 		// Fast path: every path consumes exactly one expression and none are components,
 		// so skip the bookkeeping that maps expressions to paths.
-		if (this.pathsSingleExpr) {
+		if (this.shell.pathsSingleExpr) {
 			if (includeNonComponents) {
 				if (paths === null) { // Created from a stampable shell; no paths yet.
 					this.applyStamp(exprs);
 					return;
 				}
-				for (let i = paths.length - 1; i >= 0; i--)
-					paths[i].applySingle(exprs[i]);
+				for (let i = paths.length - 1; i >= 0; i--) {
+					let path = paths[i];
+					if (lastExprs !== null && path.skipIfSame && lastExprs[i] === exprs[i])
+						continue;
+					path.applySingle(exprs[i]);
+				}
 
 				if (this.styles)
 					this.updateStyles();
@@ -3589,7 +4758,7 @@ class NodeGroup {
 		let exprIndex = exprs.length; // Update exprs at paths.
 		let pathExprs = new Array(paths.length); // Store all the expressions that map to a single path.  Only paths to attribute values can have more than one.
 		for (let i = paths.length - 1, path; path = paths[i]; i--) {
-			if (i===0 && path instanceof PathToComponent && path.nodeMarker === this.getRootNode())
+			if (i===0 && path instanceof PathToComponent && path.nodeMarker === this.getRootEl())
 				continue;
 
 			// Get the expressions associated with this path.
@@ -3601,15 +4770,15 @@ class NodeGroup {
 			// They use expressions from the paths that provide their attributes.
 			if (path instanceof PathToComponent) {
 				let attribExprs = pathExprs.slice(i+1, i+1 + path.attribPaths.length); // +1 b/c we move forward from the component path.
-				path.apply(attribExprs);
+				path.applyAll(attribExprs);
 			}
 			else if (includeNonComponents)
-				path.apply(pathExprs[i]);
+				path.applyAll(pathExprs[i]);
 		}
 
 		// If there's leftover expressions, there's probably an issue with the Shell that created this NodeGroup,
 		// and the number of paths not matching.
-		/*#IFDEV*/
+		/*#IFDEBUG*/
 		assert(exprIndex === 0);
 		/*#ENDIF*/
 
@@ -3625,7 +4794,7 @@ class NodeGroup {
 		}
 		this.firstApply = false;
 
-		/*#IFDEV*/
+		/*#IFDEBUG*/
 		this.verify();
 		/*#ENDIF*/
 	}
@@ -3637,8 +4806,7 @@ class NodeGroup {
 	 * falls back to materializing real paths and applying normally.
 	 * @param exprs {Expr[]} */
 	applyStamp(exprs) {
-		let template = this.template;
-		let shell = Shell.get(template.html, template.svgMode);
+		let shell = this.shell;
 
 		// 1. Bail to real paths when any child-node expression isn't a primitive.
 		let nodesIdx = shell.nodesPathIdx;
@@ -3654,27 +4822,71 @@ class NodeGroup {
 			}
 		}
 
-		// 2. Resolve target nodes, then write each expression.
+		// 2. Resolve target nodes, then run the shell's compiled stamp program: a flat
+		// opcode per path replaces per-path applySingle() dispatch (see Shell.stampOp).
 		let slots = this.resolveStampSlots(shell);
-		let paths = shell.paths, stampers = shell.stampPaths;
-		for (let i = paths.length - 1; i >= 0; i--) {
-			let stamper = stampers[i];
-			let marker = slots[paths[i].markerSlot];
-
-			// A wholeParent text path's marker is the (freshly cloned, empty) only-child slot:
-			// write its text directly, skipping applySingle's branching and the shared-stamper
-			// bookkeeping.  Child exprs are primitive here (step 1 bailed otherwise).
-			if (stamper.wholeParent) {
-				let v = exprs[i];
+		let ops = shell.stampOp, slotIdx = shell.stampSlot, aux = shell.stampAux;
+		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 delegateAll = opt !== false && !Array.isArray(opt);
+
+		// Register this shell's delegated dispatchers once for a whole run of rows.  They live on
+		// 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]);
+			rootNg[lastStampedShellKey] = shell;
+		}
+
+		let firstApply = this.firstApply;
+		for (let i = ops.length - 1; i >= 0; i--) {
+			let v = exprs[i];
+			let o = ops[i];
+
+			// Whole-parent child text: the marker is the (freshly cloned, empty) only-child
+			// slot.  Child exprs are primitive here (step 1 bailed otherwise).
+			if (o === 2) {
 				if (typeof v === 'number')
 					v += '';
-				marker.textContent = v;
-				continue;
+				slots[slotIdx[i]].textContent = v;
+			}
+
+			// Delegatable event with a valid handler shape: write the node expandos
+			// directly, mirroring bindEvent()'s delegated branch.  An event-name-array
+			// delegation option or an invalid value falls through to the generic stamper.
+			else if (o === 3 && delegateAll
+				&& (typeof v === 'function' || (Array.isArray(v) && typeof v[0] === 'function'))) {
+				let sp = aux[i];
+				let node = slots[slotIdx[i]];
+				node[sp.delegatedKey] = v;
+				node[delegatedRootKey] = root;
+			}
+
+			// A plain attribute on a freshly cloned row: the shell left it off, so an empty
+			// value means there is simply nothing to write, and any other string can go
+			// straight in without reading the attribute back first.
+			else if (o === 4 && firstApply && typeof v === 'string') {
+				if (v !== '')
+					slots[slotIdx[i]].setAttribute(aux[i], v);
 			}
 
-			stamper.nodeMarker = marker;
-			stamper.parentNg = this;
-			stamper.applySingle(exprs[i]);
+			// The list key never touches the DOM.
+			else if (o === 1)
+				this.key = v;
+
+			// Everything else (attributes, disabled delegation, odd values) goes through
+			// the shared stamper's full applySingle() semantics.
+			else {
+				let stamper = stampers[i];
+				stamper.nodeMarker = slots[slotIdx[i]];
+				stamper.parentNg = this;
+				stamper.applySingle(v);
+			}
 		}
 
 		this.nodesCache = null;
@@ -3688,7 +4900,7 @@ class NodeGroup {
 	 * @return {boolean} False when a child-node expression isn't primitive; the caller
 	 * must then materialize paths and apply normally. */
 	rewriteStamp(template) {
-		let shell = Shell.get(template.html, template.svgMode);
+		let shell = this.shell;
 		let newExprs = template.exprs;
 		let nodesIdx = shell.nodesPathIdx;
 		for (let i=0; i<nodesIdx.length; i++) {
@@ -3698,19 +4910,29 @@ class NodeGroup {
 		}
 
 		let oldExprs = this.template.exprs;
-		let paths = shell.paths, stampers = shell.stampPaths;
-		let slots = null; // Nodes are resolved only if something actually changed.
-		for (let i = paths.length - 1; i >= 0; i--) {
-			if (!exprSame(oldExprs[i], newExprs[i])) {
+		let stampers = shell.stampPaths, slotIdx = shell.stampSlot, flags = shell.stampFlags;
+		let slots = this.stampSlotsCache; // Nodes are resolved only if something actually changed, then cached.
+		for (let i = stampers.length - 1; i >= 0; i--) {
+			// Live HTML properties (checked etc., boolean-valued) are exempt from the
+			// unchanged-value skip: a user's click flips the DOM property underneath the cached
+			// expression, and applySingle() compares against the live node before writing.
+			// The identity test is inline because most expressions are unchanged, and reaching
+			// exprSame() only to be told so costs more than the comparison itself.
+			let oldExpr = oldExprs[i], newExpr = newExprs[i];
+			let flag = flags[i];
+			if ((oldExpr !== newExpr && !exprSame(oldExpr, newExpr))
+				|| ((flag & 1) && typeof newExpr === 'boolean')) {
+				// .slice() is required: resolveStampSlots returns the Shell's SHARED scratch
+				// array, which the next row's resolve would overwrite.
 				if (slots === null)
-					slots = this.resolveStampSlots(shell);
+					slots = this.stampSlotsCache = this.resolveStampSlots(shell).slice();
 				let stamper = stampers[i];
-				let marker = slots[paths[i].markerSlot];
+				let marker = slots[slotIdx[i]]; // The flat slot array, so the Path isn't loaded.
 
 				// Fast path for a wholeParent text path whose child already exists (the common
 				// rewrite case): set its value directly, skipping applySingle's branching and
 				// textNode bookkeeping.  exprSame above already proved it changed.
-				if (stamper.wholeParent) {
+				if (flag & 2) {
 					let v = newExprs[i], tn = marker.firstChild;
 					if (typeof v === 'number')
 						v += '';
@@ -3745,16 +4967,10 @@ class NodeGroup {
 	 * @return {Node[]} The shell's shared scratch slots array. */
 	resolveStampSlots(shell) {
 		let slots = shell.resolveSlots;
+		// A singleRoot shell's first op pair is always [0, 0], so slot 1 is the row's own root
+		// element and the program can start at the second pair.
 		slots[1] = this.startNode;
-		let ops = shell.resolveOps;
-		// firstChild/nextSibling pointer walk; see setPathsFromFragment for why not childNodes[i].
-		for (let i=2, s=2; i<ops.length; i+=2, s++) {
-			let node = slots[ops[i]].firstChild;
-			for (let k=ops[i+1]; k>0; k--)
-				node = node.nextSibling;
-			slots[s] = node;
-		}
-		return slots;
+		return runResolveOps(slots, shell.resolveOps, 2, 2);
 	}
 
 	/**
@@ -3764,17 +4980,8 @@ class NodeGroup {
 	 * @param shell {?Shell}
 	 * @return {Path[]} */
 	materializePaths(shell=null) {
-		shell ??= Shell.get(this.template.html, this.template.svgMode);
-		let slots = this.resolveStampSlots(shell);
-		let paths = shell.paths;
-		let pathLength = paths.length;
-		let result = this.paths = new Array(pathLength);
-		for (let i=0; i<pathLength; i++) {
-			let p = paths[i];
-			let path = p.cloneWithNodes(p.beforeSlot >= 0 ? slots[p.beforeSlot] : null, slots[p.markerSlot]);
-			path.parentNg = this;
-			result[i] = path;
-		}
+		shell ??= this.shell;
+		let result = this.clonePathsFromSlots(shell, this.resolveStampSlots(shell));
 
 		// A wholeParent child-node path that stamped a primitive left exactly one Text child.
 		for (let idx of shell.nodesPathIdx) {
@@ -3814,14 +5021,8 @@ class NodeGroup {
 	/**
 	 * Get the root element of the NodeGroup's RootNodeGroup.
 	 * @returns {HTMLElement|DocumentFragment} */
-	getRootNode() {
-		return this.rootNg.root;
-	}
-
-	/**
-	 * @returns {RootNodeGroup} */
-	getRootNodeGroup() {
-		return this.rootNg;
+	getRootEl() {
+		return this.rootNg.rootEl;
 	}
 
 	/**
@@ -3832,9 +5033,6 @@ class NodeGroup {
 	 * @param isRootClone {boolean} True when fragment is a direct clone of a singleRoot
 	 * shell's root element: it fills slot 1 itself and the first op pair is skipped. */
 	setPathsFromFragment(fragment, shell, startingPathDepth=0, isRootClone=false) {
-		let paths = shell.paths;
-		let pathLength = paths.length; // For faster iteration
-		let result = this.paths = new Array(pathLength);
 
 		// Fast path: run the shell's precomputed resolve program (see Shell.buildResolveProgram).
 		// Each Path.clone() would walk childNodes from the fragment root to its target node,
@@ -3846,37 +5044,45 @@ class NodeGroup {
 		// attribPaths behavior; pathOffset!==0 (root grafting) also uses the fallback.
 		let ops = shell.resolveOps;
 		if (ops && startingPathDepth === 0) {
-			let slots = shell.resolveSlots;
-			let i = 0, s = 1;
-			if (isRootClone) { // Slot 1 is the root element itself; skip its op pair.
-				slots[1] = fragment;
-				i = 2;
-				s = 2;
-			}
-			else
+			let slots;
+			if (isRootClone) // The root element is also this.startNode, so it seeds slot 1 itself.
+				slots = this.resolveStampSlots(shell);
+			else {
+				slots = shell.resolveSlots;
 				slots[0] = fragment;
-			// Resolve each node via firstChild/nextSibling pointer walks instead of
-			// childNodes[index]; the live NodeList indexing is markedly slower, and indices
-			// are small (markers are elements, often the first child after whitespace stripping).
-			for (; i<ops.length; i+=2, s++) {
-				let node = slots[ops[i]].firstChild;
-				for (let k=ops[i+1]; k>0; k--)
-					node = node.nextSibling;
-				slots[s] = node;
-			}
-			for (let i=0; i<pathLength; i++) {
-				let p = paths[i];
-				let path = p.cloneWithNodes(p.beforeSlot >= 0 ? slots[p.beforeSlot] : null, slots[p.markerSlot]);
-				path.parentNg = this;
-				result[i] = path;
+				runResolveOps(slots, ops, 0, 1);
 			}
+			this.clonePathsFromSlots(shell, slots);
 		}
-		else
+		else {
+			let paths = shell.paths;
+			let pathLength = paths.length; // For faster iteration
+			let result = this.paths = new Array(pathLength);
 			for (let i=0; i<pathLength; i++) {
 				let path = paths[i].clone(fragment, startingPathDepth);
 				path.parentNg = this;
 				result[i] = path;
 			}
+		}
+	}
+
+	/**
+	 * Copy the shell's Paths onto this NodeGroup's own nodes, taking each path's marker and
+	 * before-node from the slots the resolve program just filled.
+	 * @param shell {Shell}
+	 * @param slots {Node[]} The shell's shared scratch slots, already resolved.
+	 * @return {Path[]} */
+	clonePathsFromSlots(shell, slots) {
+		let paths = shell.paths;
+		let pathLength = paths.length;
+		let result = this.paths = new Array(pathLength);
+		for (let i=0; i<pathLength; i++) {
+			let p = paths[i];
+			let path = p.cloneWithNodes(p.beforeSlot >= 0 ? slots[p.beforeSlot] : null, slots[p.markerSlot]);
+			path.parentNg = this;
+			result[i] = path;
+		}
+		return result;
 	}
 
 	updateStyles() {
@@ -3884,7 +5090,7 @@ class NodeGroup {
 			for (let [style, oldText] of this.styles) {
 				let newText = style.textContent;
 				if (oldText !== newText)
-					Util.bindStyles(style, this.getRootNodeGroup().root);
+					Util.bindStyles(style, this.rootNg.rootEl);
 			}
 	}
 
@@ -3894,16 +5100,14 @@ class NodeGroup {
 	 * @param pathOffset {int} */
 	activateEmbeds(root, shell, pathOffset=0) {
 
-		let rootEl = this.rootNg.root;
+		let rootEl = this.rootNg.rootEl;
 		if (rootEl) {
-			let options = this.rootNg.options;
+			let options = this.rootNg.renderOptions;
 
 			// ids
 			if (options?.ids !== false) {
 				for (let path of shell.ids) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-					let el = Path.resolve(root, path);
+					let el = Path.resolve(root, path, pathOffset);
 					Util.bindId(rootEl, el);
 				}
 			}
@@ -3913,11 +5117,8 @@ class NodeGroup {
 				if (shell.styles.length)
 					this.styles = new Map();
 				for (let path of shell.styles) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-
 					/** @type {HTMLStyleElement} */
-					let style = Path.resolve(root, path);
+					let style = Path.resolve(root, path, pathOffset);
 					if (rootEl.nodeType === 1) {
 						Util.bindStyles(style, rootEl);
 						this.styles.set(style, style.textContent);
@@ -3928,9 +5129,7 @@ class NodeGroup {
 			// scripts
 			if (options?.scripts !== false) {
 				for (let path of shell.scripts) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-					let script = Path.resolve(root, path);
+					let script = Path.resolve(root, path, pathOffset);
 					// Indirect eval runs in global scope (correct for a <script> tag) and, unlike a direct
 					// eval, doesn't force terser to keep every top-level name in the bundle unmangled.
 					(0, eval)(script.textContent);
@@ -3939,7 +5138,7 @@ class NodeGroup {
 		}
 	}
 
-	//#IFDEV
+	//#IFDEBUG
 	getParentNode() {
 		return this.startNode?.parentNode
 	}
@@ -4009,8 +5208,8 @@ class NodeGroup {
  * Has these properties not present on NodeGroup, assigned by instantiate():
  * They're not declared as fields because subclass field initializers run after the
  * super constructor and would overwrite the assigned values.
- * @property {HTMLElement} root - Root node at the top of the hierarchy.
- * @property {?object} options - RenderOptions */
+ * @property {HTMLElement} rootEl - Root node at the top of the hierarchy.
+ * @property {?object} renderOptions - RenderOptions */
 class RootNodeGroup extends NodeGroup {
 
 	/**
@@ -4019,37 +5218,54 @@ class RootNodeGroup extends NodeGroup {
 	 * Called by the NodeGroup constructor. */
 	instantiate(shell, shellFragment, el, options) {
 		let startingPathDepth = 0;
-		this.options = options;
+		this.renderOptions = options;
 		if (shellFragment instanceof Text) {
 			if (!el)
-				throw new Error('Cannot create a standalone text node');
+				throw new Error('Text node needs an element.');
 
-			this.root = el;
+			this.rootEl = el;
 			if (shellFragment.nodeValue.length)
-				this.root.append(shellFragment);
+				this.rootEl.append(shellFragment);
 		}
 
 		else {
 			if (el) {
-				this.root = el;
+				this.rootEl = el;
+
+				// 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);
 
-				// 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.
 				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.
-				if (isReplaceEl(shellFragment, this.root.tagName)) {
-					this.root.append(...shellFragment.children[0].childNodes);
+				if (isReplaceEl(shellFragment, this.rootEl.tagName)) {
+					this.rootEl.append(...shellFragment.children[0].childNodes);
 
 					// Copy attributes
 					for (let attrib of shellFragment.children[0].attributes)
-						if (!this.root.hasAttribute(attrib.name))
-							this.root.setAttribute(attrib.name, attrib.value);
+						if (!this.rootEl.hasAttribute(attrib.name))
+							this.rootEl.setAttribute(attrib.name, attrib.value);
 
 					// Go one level deeper into all of shell's paths.
 					startingPathDepth = 1;
@@ -4058,7 +5274,7 @@ class RootNodeGroup extends NodeGroup {
 				else {
 					let isEmpty = shellFragment.childNodes.length === 1 && shellFragment.childNodes[0].nodeType === 3 && shellFragment.childNodes[0].textContent === '';
 					if (!isEmpty)
-						this.root.append(...shellFragment.childNodes);
+						this.rootEl.append(...shellFragment.childNodes);
 				}
 
 
@@ -4084,34 +5300,26 @@ class RootNodeGroup extends NodeGroup {
 
 			// Instantiate as a standalone element.
 			else {
-				let onlyChild = getSingleEl(shellFragment);
-				this.root = onlyChild || shellFragment; // We return the whole fragment when calling h() with a collection of nodes.
+				// Trimming the whitespace and comment nodes off both ends leaves a list of exactly
+				// one node only when the fragment has exactly one node worth keeping, which is the
+				// question being asked here.
+				let relevantNodes = Util.trimEmptyNodes(shellFragment.childNodes);
+				let onlyChild = relevantNodes.length === 1 ? relevantNodes[0] : null;
+				this.rootEl = onlyChild || shellFragment; // We return the whole fragment when calling h() with a collection of nodes.
 				if (onlyChild)
 					startingPathDepth = 1;
 			}
 
-			this.setPathsFromFragment(this.root, shell, startingPathDepth);
-			this.activateEmbeds(this.root, shell, startingPathDepth);
+			this.setPathsFromFragment(this.rootEl, shell, startingPathDepth);
+			this.activateEmbeds(this.rootEl, shell, startingPathDepth);
 		}
-		this.startNode = this.endNode = this.root;
+		this.startNode = this.endNode = this.rootEl;
 
-		Globals$1.rootNodeGroups.set(this.root, this);
+		Globals$1.rootNodeGroups.set(this.rootEl, this);
 	}
 }
 
 
-function getSingleEl(fragment) {
-	let nonempty = [];
-	for (let n of fragment.childNodes) {
-		if (n.nodeType === 1 || n.nodeType === 3 && n.textContent.trim().length) {
-			if (nonempty.length)
-				return null;
-			nonempty.push(n);
-		}
-	}
-	return nonempty[0];
-}
-
 /**
  * Does the fragment have one child that's an element matching the tagname of el?
  * @param fragment {DocumentFragment}
@@ -4174,7 +5382,7 @@ class Template {
 
 		//this.trace = new Error().stack.split(/\n/g)
 
-		//#IFDEV
+		//#IFDEBUG
 		assert(Array.isArray(htmlStrings));
 		assert(Array.isArray(exprs));
 
@@ -4199,8 +5407,12 @@ class Template {
 		if (!ng) {
 			ng = new RootNodeGroup(this, null, el, options);
 			if (!el) // null if it's a standalone elment.
-				el = ng.getRootNode();
-			Globals$1.rootNodeGroups.set(el, ng); // All tests still pass if this is commented out!
+				el = ng.getRootEl();
+
+			// RootNodeGroup.instantiate() ends by registering itself under its own rootEl, which
+			// is the element we were given, or -- when we were given none -- the very element
+			// getRootEl() just handed back.  Registering it a second time here stored the same
+			// group under the same key.
 		}
 
 		// Make sure the expresion count matches match the Path "hole" count.
@@ -4215,8 +5427,13 @@ class Template {
 		// If we didn't just create it, we need to render it.
 		if (this.html?.length === 1 && !this.html[0]) // An empty string.
 			el.innerHTML = ''; // Fast path for empty component.
-		else
-			ng.applyExprs(this.exprs);
+		else {
+			// A component renders the same template every time, so hand over the expressions it
+			// applied last time; paths that can prove an unchanged expression is a no-op skip.
+			let last = ng.template;
+			ng.applyExprs(this.exprs, true, last !== this && last.html === this.html ? last.exprs : null);
+			ng.template = this;
+		}
 
 		return el;
 	}
@@ -4246,9 +5463,13 @@ class Template {
 function templatesSame(a, b) {
 	if (a.html === b.html && a.svgMode === b.svgMode) {
 		let ae = a.exprs, be = b.exprs;
-		for (let i=0; i<ae.length; i++)
-			if (!exprSame(ae[i], be[i]))
+		// Most expressions are identical between renders, so test that here rather than paying
+		// a call into exprSame() to learn it.
+		for (let i=0; i<ae.length; i++) {
+			let x = ae[i], y = be[i];
+			if (x !== y && !exprSame(x, y))
 				return false;
+		}
 		return true;
 	}
 
@@ -4354,7 +5575,7 @@ function toEl(arg) {
 		let obj = arg;
 
 		if (obj.constructor.name !== 'Object')
-			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
+			throw new Error(`Solarite web component class ${obj.constructor?.name} must extend HTMLElement.`);
 
 		// Normal path
 		if (!Globals$1.objToEl.has(obj)) {
@@ -4442,7 +5663,11 @@ const renderTemplateKey = Symbol('solariteRender');
 // Using `arguments` alongside rest params would force the engine to materialize both per call.
 const noArg = Symbol();
 
-function h(htmlStrings=noArg, ...exprs) {
+// The /** @type {*} */ cast on the default keeps TypeScript from inferring the parameter as
+// `symbol` from noArg: TS can't parse the closure-style @param type above (function() without
+// a return type under noImplicitAny), falls back to the default's type, and then flags every
+// h(this) / h`` call in the codebase as an error.  JetBrains reads the @param fine either way.
+function h(htmlStrings=/** @type {*} */(noArg), ...exprs) {
 
 	// 1. Tagged template: h`<div>...</div>`
 	if (Array.isArray(htmlStrings)) {
@@ -4495,11 +5720,14 @@ function h(htmlStrings=noArg, ...exprs) {
 			let parent = htmlStrings, options = exprs[0];
 
 			// The closure is cached on the element so repeated renders don't recreate it.
-			if (options === undefined) {
-				let cached = parent[renderTemplateKey];
-				if (cached)
-					return cached;
-			}
+			// Options are cached with it: they only take effect when the element's
+			// RootNodeGroup is first created, so a later render passing different ones is
+			// ignored either way, and caching regardless of them saves an allocation on every
+			// render of a component that passes an options object — which is how render() is
+			// usually written.
+			let cached = parent[renderTemplateKey];
+			if (cached)
+				return cached;
 
 			// Return a tagged template function that applies the tagged template to parent.
 			let renderTemplate = (htmlStrings, ...exprs) => {
@@ -4511,8 +5739,7 @@ function h(htmlStrings=noArg, ...exprs) {
 				let template = new Template(htmlStrings, exprs);
 				return template.render(parent, options);
 			};
-			if (options === undefined)
-				parent[renderTemplateKey] = renderTemplate;
+			parent[renderTemplateKey] = renderTemplate;
 			return renderTemplate;
 		}
 	}
@@ -4529,11 +5756,11 @@ function h(htmlStrings=noArg, ...exprs) {
 	// Intercepts the main h(this)`...` function call inside render().
 	// TODO: This path doesn't handle embeds like data-id="..."
 	else if (typeof htmlStrings === 'object' && Globals$1.objToEl.has(htmlStrings)) {
+		// The only thing that ever puts an object into objToEl is toEl(), and it rejects anything
+		// that isn't a plain object before it does so, so an object that reaches here has already
+		// been checked and re-checking it can never report anything.
 		let obj = htmlStrings;
 
-		if (obj.constructor.name !== 'Object')
-			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
-
 		// Jsx with h(this, <jsx>)
 		if (exprs[0] instanceof Template) {
 			let template = exprs[0];
@@ -4557,14 +5784,6 @@ function h(htmlStrings=noArg, ...exprs) {
 		throw new Error('h() does not support argument of type: ' + (htmlStrings ? typeof htmlStrings : htmlStrings))
 }
 
-// h.map caches each item's Template keyed by the item's identity, so a re-render returns
-// the SAME Template instance for any item whose reference is unchanged.  The reconciler's
-// `ng.template === item` fast path (PathToNodes.applyKeyed/applyDiff) then skips rebuilding
-// and comparing that row.  A WeakMap is used instead of a symbol property so the idiomatic
-// immutable update `{...item, x}` yields a fresh object that ISN'T in the cache and re-renders;
-// a symbol property would be copied by spread and silently reuse the stale Template.
-const mapCache = new WeakMap();
-
 /**
  * Render a list, reusing each item's DOM for as long as the item is the SAME object.
  *
@@ -4581,37 +5800,73 @@ const mapCache = new WeakMap();
  *
  * ${h.map(this.rows, row => h`<tr key=${row.id}>${row.label}</tr>`)}
  *
+ * What comes back is a MappedList, not an array: it carries the items and the callback so
+ * the reconciler can match a row to its item by identity and call the callback only for the
+ * rows it can't match.  Put it straight into a template expression, as above; nested inside
+ * an array, or returned from a function, it expands to Templates just the same.
+ *
  * @param items {Array} The list to render.
  * @param fn {function(item:*):Template} Builds an item's Template; called only for new items.
- * @return {Template[]} */
-h.map = (items, fn) => {
-	let result = new Array(items.length);
-	for (let i=0; i<items.length; i++) {
-		let item = items[i];
-		if (item !== null && typeof item === 'object') {
-			let template = mapCache.get(item);
-			if (template === undefined) {
-				template = fn(item);
-				mapCache.set(item, template);
-			}
-			result[i] = template;
-		}
-		else
-			result[i] = fn(item);
-	}
-	return result;
-};
+ * @return {MappedList} */
+h.map = (items, fn) => new MappedList(items, fn);
 
 h.immutableMap = h.map;
 
-/*
-┏┓  ┓    •
-┗┓┏┓┃┏┓┏┓┓╋▗▖
-┗┛┗┛┗┗┻╹ ╹╹┗
-JavaScript UI library
-@license MIT
-@copyright Vorticode LLC
-https://vorticode.github.io/solarite/ */
+/**
+ * Create a selection that updates only the rows it affects.
+ *
+ * A highlight that moves from one row of a thousand to another changes two attributes.
+ * Expressing it as ordinary state means calling render() and letting the reconciler walk the
+ * list to rediscover that.  A selector writes those two attributes directly instead:
+ *
+ *	 class Table extends Solarite {
+ *		 selected = h.selector();
+ *
+ *		 pick(row) {
+ *			 this.selected.set(row.id);   // no render() call
+ *		 }
+ *
+ *		 render() {
+ *			 h(this)`<tbody>${h.map(this.rows, row =>
+ *				 h`<tr key=${row.id} class=${this.selected.when(row.id, 'danger')}
+ *					 onclick=${[this.pick, row]}>${row.label}</tr>`)}</tbody>`;
+ *		 }
+ *	 }
+ *
+ * when() must be a whole attribute value, not part of one and not element content, since it
+ * owns that attribute for as long as the row exists.  An off value of '' leaves no attribute
+ * behind at all.  Selection state lives on the selector, so it survives re-renders, and
+ * set() is safe to call whether or not the rows are currently rendered.
+ *
+ * Two rules follow from how set() finds a row, and both throw a clear error rather than
+ * misbehaving quietly.  **The rows must be keyed** — set() locates a row by looking its key
+ * up in the list, so the row template needs a key=${...}.  And **the attribute must sit on
+ * the row's own root element**, the same one that carries the key, because that is the
+ * element set() writes.  Drawing a row costs nothing either way: when() hands back one of
+ * two shared objects rather than allocating anything per row, so a selector is free to
+ * render over a list of any size and only a change of selection does any work.
+ *
+ * @param key {*} The initially selected key, or null for none.
+ * @return {Selector} */
+h.selector = (key = null) => new Selector(key);
+
+/**
+ * Convert an attribute string with the given converter: Number, Boolean, String, Date,
+ * or any function taking the string and returning a value.  Boolean is true for any string
+ * except 'false' and '0', so a bare attribute like `<my-timer auto-start>` reads as true.
+ * Date uses new Date(value).  No converter returns the string unchanged. */
+function convertType(value, type) {
+	if (type === Date)
+		return new Date(value);
+	if (type === Boolean)
+		return !['false', '0'].includes(value);
+	// Number and String need no cases of their own: they're plain functions, so the custom
+	// branch below calls them correctly.  Date and Boolean are the ones that can't fall through
+	// (Date without `new` returns a string; Boolean('false') is true).
+	if (type) // Number, String, or a custom string=>value function
+		return type(value);
+	return value;
+}
 
 /**
  * Read an element's html attributes onto fields that already exist on the element.
@@ -4647,16 +5902,8 @@ function assignAttributes(dest, types={}, ignore=[]) {
 			dest[name] = JSON.parse(value.slice(2, -1));
 
 		// 2. Cast the string with the converter named in `types`, if any.
-		else if (type === Date)
-			dest[name] = new Date(value);
-		else if (type === Boolean)
-			dest[name] = !['false', '0'].includes(value);
-		else if (type === Number)
-			dest[name] = Number(value);
-		else if (type === String)
-			dest[name] = String(value);
-		else if (type) // custom string=>value function
-			dest[name] = type(value);
+		else if (type)
+			dest[name] = convertType(value, type);
 
 		// 3. No converter named: assign the raw string.  But an empty value over a function/object
 		// field is just the serialization residue of a template expression (functions render as
@@ -4706,42 +5953,46 @@ let HTMLElementAutoDefine = new Proxy(HTMLElement, {
 class Solarite extends HTMLElementAutoDefine {
 
 	/**
-	 * @param attribs {?Record<string, any>} */
-	constructor(attribs=null) {
+	 * Fill in and fix up the attribs object a component's constructor receives, so the component
+	 * can then copy those values onto its own fields, e.g. with ObjectUtil.assign(this, attribs).
+	 *
+	 * 1.  If attribs is an empty object, fill it with the attributes on the DOM element.
+	 *     This happens when the browser creates the element from plain html, because then nothing
+	 *     calls the constructor with arguments.  Attribute names convert from dash-case to
+	 *     camelCase, and `${...}` values are parsed from JSON.
+	 * 2.  If types is given, convert attribs values from strings to those types.  Attribute values
+	 *     written as literal text always arrive as strings, whether from plain html or from an h()
+	 *     template.  types maps a field name to Number, Boolean, String, Date, or any function
+	 *     taking the string and returning a value.  Boolean is true for every string except
+	 *     'false' and '0', so a bare attribute like `<select-box-3 editable>` becomes true.
+	 *     Values that are already not strings, like a `${true}` template expression, are left alone.
+	 *
+	 * This runs before the subclass initializes its fields and renders, so converted values are
+	 * right the first time, even for fields that change what render() builds.  This constructor
+	 * can't copy attribs onto fields itself, because subclass field initializers run after it
+	 * finishes and would overwrite them; that's why the subclass does the final assign.
+	 * @param attribs {?Record<string, any>}
+	 * @param types {?Record<string, Function>} */
+	constructor(attribs=null, types=null) {
 		super();
 
 		if (attribs) {
 			if (typeof attribs !== 'object')
-				throw new Error('First argument to custom element constructor must be an object.');
+				throw new Error('First argument must be an object.');
 
 			// 1. Populate attribs if it's an empty object.
-			if (attribs && !Object.keys(attribs).length) {
+			if (!Object.keys(attribs).length) {
 				let attribs2 =  Solarite.getAttribs(this);
 				for (let name in attribs2) {
 					attribs[name] = attribs2[name];
 				}
 			}
 
-			// 2. Populate fields from attribs.
-			// This does nothing because the fields are overwritten by the child class after this super() constructor executes.
-			//for (let name in attribs || {}) {
-			//	if (name in this) {
-			//		const descriptor = Object.getOwnPropertyDescriptor(this, name);
-			//		if (!descriptor || descriptor.writable || descriptor.set)
-			//			this[name] = attribs[name];
-			//	}
-			//}
+			// 2. Convert string values to the types the component declares.
+			for (let name in types || {})
+				if (typeof attribs[name] === 'string')
+					attribs[name] = convertType(attribs[name], types[name]);
 		}
-
-		// 3. Wrap render function so it always provides the attribs argument.
-		// Disabled because this gives us strings for attribute values when we call render manually.
-		// Instead of values given from ${...} expressions.
-		// let originalRender = this.render;
-		// this.render = (attribs, changed=true) => {
-		// 	if (!attribs) // If we have to look up the attribs, we don't know if they changed or not.
-		// 		attribs = Solarite.getAttribs(this);
-		// 	originalRender.call(this, attribs, changed);
-		// }
 	}
 
 	'render'() {
@@ -4884,4 +6135,4 @@ class Solarite extends HTMLElementAutoDefine {
 }
 
 export default h;
-export { Fragment, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, assignAttributes, delve, getEventBinding, h, svg, toEl };
+export { Fragment, Globals$1 as Globals, JsxAttr as InternalJsxAttr, MappedList, Selector, SelectorRef, Solarite, Util as SolariteUtil, Template, assignAttributes, convertType, delve, getEventBinding, h, jsxToTemplate as internalJsxToTemplate, svg, toEl };