solarite 0.4.0 → 0.5.1

package/dist/Solarite-debug.js

@@ -1,13 +1,12 @@
-//#IFDEV
 /*@__NO_SIDE_EFFECTS__*/
 function assert(val) {
+	//#IFDEV
 	if (!val) {
-		debugger;
+		//debugger;
 		throw new Error('Assertion failed: ' + val);
 	}
-}
-
-//#ENDIF
+	//#ENDIF
+}
 
 let lastObjectId = 1>>>0; // Is a 32-bit int faster to increment than JavaScript's Number, which is a 64-bit float?
 let objectIds = new WeakMap();
@@ -20,8 +19,8 @@ function getObjectId(obj) {
 	// 	return obj.toString(); // This fails to detect when a function's bound variables changes.
 	
 	let result = objectIds.get(obj);
-	if (!result) { // convert to string, store in result, then add 1 to lastObjectId.
-		result = '~\f' + (lastObjectId++); // We use a unique, 2-byte prefix to ensure it doesn't collide w/ strings not from getObjectId()
+	if (result===undefined) { // convert to string, store in result, then add 1 to lastObjectId.
+		result = '~@' + (lastObjectId++); // We use a unique, 2-byte prefix to ensure it doesn't collide w/ strings not from getObjectId()
 		objectIds.set(obj, result);
 	}
 	return result;
@@ -31,7 +30,8 @@ function getObjectId(obj) {
  * Control how JSON.stringify() handles Nodes and Functions.
  * Normally, we'd pass a replacer() function argument to JSON.stringify() to handle Nodes and Functions.
  * But that makes JSON.stringify() take twice as long to run.
- * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty. */
+ * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty.
+ * TODO: This needs to be benchmarked again after the json rewrite in Chrome 138. */
 let isHashing = true;
 function toJSON() {
 	return isHashing ? getObjectId(this) : this
@@ -59,26 +59,27 @@ function getObjectHash(obj) {
 	// Sometimes these get unassigned by Chrome and Brave 119, as well as Firefox, seemingly randomly!
 	// The same tests sometimes pass, sometimes fail, even after browser and OS restarts.
 	// So we check the assignments on every run of getObjectHash()
+	// TODO: Cache references to Node.prototype and Function.prototype:
 	if (Node.prototype.toJSON !== toJSON) {
 		Node.prototype.toJSON = toJSON;
 		if (Function.prototype.toJSON !== toJSON) // Will it only unmap one but not the other?
 			Function.prototype.toJSON = toJSON;
 	}
 
-	let result;
 	isHashing = true;
 	try {
-		result = JSON.stringify(obj);
+		return JSON.stringify(obj);
 	}
 	catch(e) {
-		result = getObjectHashCircular(obj);
+		return getObjectHashCircular(obj);
+	}
+	finally {
+		isHashing = false;
 	}
-	isHashing = false;
-	return result;
 }
 
 /**
- * Slower hashing method that supports.
+ * Slower hashing method that supports circular references.
  * @param obj
  * @returns {string} */
 function getObjectHashCircular(obj) {
@@ -104,25 +105,25 @@ var Globals;
 function reset() {
 	Globals = {
 
-		/**
-		 * Dynamic values that should be passed to a Component's constructor and render() function.
-		 * @type {Map<HTMLElement, any[]>} */
-		componentArgs: new Map(),
-
 		/**
 		 * Store which instances of Solarite have already been added to the DOM.
 		 * @type {WeakSet<HTMLElement>} */
 		connected: new WeakSet(),
 
 		/**
-		 * ExprPath.applyExactNodes() sets this property when an expression is being accessed.
-		 * watch() then adds the ExprPath to the list of ExprPaths that should be re-rendered when the value changes.
-		 * @type {ExprPath}*/
-		currentExprPath: null,
+		 * Path.applyExactNodes() sets this property when an expression is being accessed.
+		 * watch() then adds the Path to the list of Paths that should be re-rendered when the value changes.
+		 * @type {Path}*/
+		currentPath: null,
+
+		/**
+		 * Set by NodeGroup.instantiateComponent()
+		 * Used by RootNodeGroup.getSlotChildren(). */
+		currentSlotChildren: null,
 
 		div: document.createElement("div"),
 
-		/** @type {HTMLDocument} */
+		/** @type {HTMLDocument} The global document. */
 		doc: document,
 
 		/**
@@ -133,33 +134,25 @@ function reset() {
 		htmlProps: {},
 
 		/**
-		 * Used by ExprPath.applyEventAttrib()
+		 * Used by Path.applyEventAttrib()
 		 * @type {WeakMap<Node, Record<eventName:string, [original:function, bound:function, args:*[]]>>} */
 		nodeEvents: new WeakMap(),
 
 		/**
 		 * Get the RootNodeGroup for an element.
 		 * @type {WeakMap<HTMLElement, RootNodeGroup>} */
-		nodeGroups: new WeakMap(),
+		rootNodeGroups: new WeakMap(),
 
 		/**
 		 * Used by h() path 9. */
 		objToEl: new WeakMap(),
 
-		//pendingChildren: [],
-
-
 		/**
 		 * Elements that have been rendered to by h() at least once.
 		 * This is used by the Solarite class to know when to call onFirstConnect()
 		 * @type {WeakSet<HTMLElement>} */
 		rendered: new WeakSet(),
 
-		/**
-		 * Elements that are currently rendering via the h() function.
-		 * @type {WeakSet<HTMLElement>} */
-		rendering: new WeakSet(),
-
 		/**
 		 * Map from array of Html strings to a Shell created from them.
 		 * @type {WeakMap<string[], Shell>} */
@@ -168,13 +161,11 @@ function reset() {
 		/**
 		 * A map of individual untagged strings to their Templates.
 		 * This way we don't keep creating new Templates for the same string when re-rendering.
-		 * This is used by ExprPath.applyExactNodes()
+		 * This is used by Path.applyExactNodes()
 		 * @type {Record<string, Template>} */
 		//stringTemplates: {},
 
-		reset,
-
-		count: 0
+		reset
 	};
 }
 reset();
@@ -245,6 +236,8 @@ let Util = {
 
 	/**
 	 * Convert HTMLElement attributes to an object.
+	 * Converts dash (kebob-case) attribute names to camelCase.
+	 * See also Solarite.getAttribs()
 	 * @param el {HTMLElement}
 	 * @param ignore {?string} Optionally ignore this attribute.
 	 * @return {Object} */
@@ -360,43 +353,14 @@ let Util = {
 		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
 	},
 
-	/**
-	 * A generator function that recursively traverses and flattens a value.
-	 *
-	 * - If the input is an array, it recursively traverses and flattens the array.
-	 * - If the input is a function, it calls the function, replaces the function
-	 *   with its result, and flattens the result if necessary. It will recursively
-	 *   call functions that return other functions.
-	 * - Otherwise it yields the value as is.
-	 *
-	 * This function does not create a new array for the flattened values. Instead,
-	 * it lazily yields each item as it is encountered. This can be more memory-efficient
-	 * for large or deeply nested structures.
-	 *
-	 * @param {any} value - The value to flatten. Can be an array, object, function, or primitive.
-	 * @yields {any} - The next item in the flattened structure.
-	 *
-	 * @example
-	 * const complexArray = [
-	 *     1,
-	 *     [2, () => 3, [4, () => [5, 6]], { a: 'object' }],
-	 *     () => () => 7,
-	 *     () => [() => 8, 9],
-	 * ];	 *
-	 * for (const item of flatten(complexArray))
-	 *     console.log(item);  // Outputs: 1, 2, 3, 4, 5, 6, { a: 'object' }, 7, 8, 9
-	 */
-	// *flatten(value) {
-	// 	if (Array.isArray(value)) {
-	// 		for (const item of value) {
-	// 			yield* Util.flatten(item);  // Recursively flatten arrays
-	// 		}
-	// 	} else if (typeof value === 'function') {
-	// 		const result = value();
-	// 		yield* Util.flatten(result);  // Recursively flatten the result of a function
-	// 	} else
-	// 		yield value;  // Yield primitive values as is
-	// },
+	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);
+		}
+	},
 
 	/**
 	 * Get the value of an input as the most appropriate JavaScript type.
@@ -486,7 +450,7 @@ let Util = {
 
 	/**
 	 * Use an array as the value of a map, appending to it when we add.
-	 * Used by watch.js.
+	 * Used only by watch.js.
 	 * @param map {Map|WeakMap|Object}
 	 * @param key
 	 * @param value */
@@ -500,6 +464,11 @@ let Util = {
 			result.push(value);
 	},
 
+	saveOrphans(nodes) {
+		let fragment = Globals$1.doc.createDocumentFragment();
+		fragment.append(...nodes);
+	},
+
 	/**
 	 * Remove nodes from the beginning and end that are not:
 	 * 1.  Elements.
@@ -528,9 +497,15 @@ let Util = {
 
 
 
+// Trick to prevent minifier from renaming these methods.
+let define = 'define';
+let getName = 'getName';
+
+
+
 // For debugging only
 //#IFDEV
-function setIndent(items, level=1) {
+function setIndent$1(items, level=1) {
 	if (typeof items === 'string')
 		items = items.split(/\r?\n/g);
 
@@ -590,307 +565,309 @@ function flattenAndIndent(inputArray, indent = "") {
 }
 //#ENDIF
 
-class MultiValueMap {
+/**
+ * Path to where an expression should be evaluated within a Shell or NodeGroup. */
+class Path {
 
-	/** @type {Record<string, Set>} */
-	data = {};
+	// Used for attributes:
 
-	// Set a new value for a key
-	add(key, value) {
-		let data = this.data;
-		let set = data[key];
-		if (!set) {
-			set = new Set();
-			data[key] = set;
-		}
-		set.add(value);
-	}
+	/**
+	 * @type {Node} Node that occurs before this Path's first Node.
+	 * This is necessary because udomdiff() can steal nodes from another Path.
+	 * If we had a pointer to our own startNode then that node could be moved somewhere else w/o us knowing it.
+	 * Used only for type='content'
+	 * Will be null if Path has no Nodes. */
+	nodeBefore;
 
-	isEmpty() {
-		for (let key in this.data)
-			return true;
-		return false;
+	/**
+	 * If type is AttribType.Multiple or AttribType.Value, points to the node having the attribute.
+	 * If type is 'content', points to a node that never changes that this NodeGroup should always insert its nodes before.
+	 *	 An empty text node will be created to insertBefore if there's no other NodeMarker and this isn't at the last position.
+	 * @type {Node|HTMLElement} */
+	nodeMarker;
+
+
+	// These are set after an expression is assigned:
+
+	/** @type {NodeGroup} */
+	parentNg;
+
+	/** @type {NodeGroup[]} */
+	nodeGroups = [];
+
+	// Caches to make things faster
+
+	/**
+	 * @private
+	 * @type {Node[]} Cached result of getNodes() */
+	nodesCache;
+
+	/**
+	 * @type {int} Index of nodeBefore among its parentNode's children. */
+	nodeBeforeIndex;
+
+	/**
+	 * @type {int[]} Path to the node marker, in reverse for performance reasons. */
+	nodeMarkerPath;
+
+	/** @type {?function} A function called by renderWatched() to update the value of this expression. */
+	watchFunction
+
+
+	/**
+	 * @param nodeBefore {Node}
+	 * @param nodeMarker {?Node}*/
+	constructor(nodeBefore, nodeMarker) {
+		this.nodeBefore = nodeBefore;
+		this.nodeMarker = nodeMarker;
+		/*#IFDEV*/this.verify();/*#ENDIF*/
 	}
 
 	/**
-	 * Get all values for a key.
-	 * @param key {string}
-	 * @returns {Set|*[]} */
-	getAll(key) {
-		return this.data[key] || [];
+	 * Apply expressions to a path.
+	 * This is called by NodeGroup.applyExprs() when it's time to put the expression values into the DOM.
+	 *
+	 * @param exprs {Expr[]}
+	 * Suppose we have the following tagged template:
+	 * `<div title=${expr1} class="big ${expr2} muted ${expr3}">
+	 *    ${expr4}
+	 *    <my-component></my-component>
+	 *    <my-component user=${expr5} roles="${expr6},${expr7}"></my-component>
+	 * </div>`
+	 * The exprs arrays will look like this, with each being passed to a path.
+	 * [expr1]                   // title attribute value.
+	 * [expr2, expr3]            // class attribute values.
+	 * [expr4]                   // children of div.
+	 * []                        // arguments to first my-component constructor.
+	 * [[expr5], [expr6, expr7]] // arguments to second my-component constructor.
+	 * [expr5]                   // user attribute value.
+	 * [expr6, expr7]            // role attribute value.
+	 * @param freeNodeGroups {boolean} Used only by watch. */
+	apply(exprs, freeNodeGroups=true) {}
+
+	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;
 	}
 
+
 	/**
-	 * Remove one value from a key, and return it.
-	 * @param key {string}
-	 * @param val If specified, make sure we delete this specific value, if a key exists more than once.
-	 * @returns {*|undefined} The deleted item. */
-	delete(key, val=undefined) {
-		let data = this.data;
-		let result;
-		let set = data[key];
-		if (!set)
-			return undefined;
+	 * @param newRoot {HTMLElement}
+	 * @param pathOffset {int}
+	 * @return {Path} */
+	clone(newRoot, pathOffset=0) {
+		/*#IFDEV*/this.verify();/*#ENDIF*/
 
-		// Delete any value.
-		if (val === undefined) {
-			[result] = set; // Does the same as above and seems to be about the same speed.
-			set.delete(result);
+		// 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;
+		if (this.nodeBefore) {
+			//#IFDEV
+			assert(childNodes[this.nodeBeforeIndex]);
+			//#ENDIF
+			nodeBefore = childNodes[this.nodeBeforeIndex];
 
-		// Delete a specific value.
-		else {
-			set.delete(val);
-			result = val;
 		}
 
-		if (set.size === 0)
-			delete data[key];
+		let result = new this.constructor(nodeBefore, nodeMarker, this.attrName, this.attrValue);
+
+		result.isComponentAttrib = this.isComponentAttrib;
+
+		// TODO: Put this in PathToAttribValue.clone().
+		result.isHtmlProperty = this.isHtmlProperty;
+
+		//#IFDEV
+		result.verify();
+		//#ENDIF
 
 		return result;
 	}
 
-	/**
-	 * Remove one value from a key, and return it.
-	 * @param key {string}
-	 * @returns {*|undefined} The deleted item. */
-	deleteAny(key) {
-		let data = this.data;
-		let result;
-		let set = data[key];
-		if (!set) // slower than pre-check.
-			return undefined;
+	// Only used for watch.js
+	getNodes() {
+		return [this.nodeMarker];
+	}
 
-		[result] = set; // Does the same as above and seems to be about the same speed.
-		set.delete(result);
+	/** @return {int[]} Returns indices in reverse order, because doing it that way is faster. */
+	static get(node) {
+		let result = [];
+		while(true) {
+			let parent = node.parentNode;
+			if (!parent)
+				break;
+			result.push(Array.prototype.indexOf.call(node.parentNode.childNodes, node));
+			node = parent;
+		}
+		return result;
+	}
 
-		if (set.size === 0)
-			delete data[key];
+	/**
+	 * Note that the path is backward, with the outermost element at the end.
+	 * @param root {HTMLElement|Document|DocumentFragment|ParentNode}
+	 * @param path {int[]}
+	 * @returns {Node|HTMLElement|HTMLStyleElement} */
+	static resolve(root, path) {
+		for (let i=path.length-1; i>=0; i--)
+			root = root.childNodes[path[i]];
+		return root;
+	}
 
-		return result;
+	//#IFDEV
+
+	/** @return {HTMLElement|ParentNode} */
+	getParentNode() {
+		return this.nodeMarker.parentNode
 	}
 
-	deleteSpecific(key, val) {
-		let data = this.data;
-		let result;
-		let set = data[key];
-		if (!set)
-			return undefined;
+	verify() {
+		if (!window.verify)
+			return;
 
-		set.delete(val);
-		result = val;
+		// Need either nodeMarker or parentNode
+		assert(this.nodeMarker);
 
-		if (set.size === 0)
-			delete data[key];
+		// nodeMarker must be attached.
+		assert(!this.nodeMarker || this.nodeMarker.parentNode);
 
-		return result;
-	}
+		assert(this.nodeBefore !== this.nodeMarker);
 
-	hasValue(val) {
-		let data = this.data;
-		let names = [];
-		for (let name in data)
-			if (data[name].has(val)) // TODO: iterate twice to pre-size array?
-				names.push(name);
-		return names;
+		// Detect cyclic parent and grandparent references.
+		assert(this.parentNg?.parentPath !== this);
+		assert(this.parentNg?.parentPath?.parentNg?.parentPath !== this);
+		assert(this.parentNg?.parentPath?.parentNg?.parentPath?.parentNg?.parentPath !== this);
+
+		for (let ng of this.nodeGroups)
+			ng.verify();
+
+		// Make sure the nodesCache matches the nodes.
+		//this.checkNodesCache();
 	}
+	//#ENDIF
 }
 
-/**
- * ISC License
- *
- * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
- *
- * Permission to use, copy, modify, and/or distribute this software for any
- * purpose with or without fee is hereby granted, provided that the above
- * copyright notice and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
- * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
- * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
- * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
- * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
- * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
- * PERFORMANCE OF THIS SOFTWARE.
- */
+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};
+	}
 
-/**
- * @param {Node} parentNode The container where children live
- * @param {Node[]} a The list of current/live children
- * @param {Node[]} b The list of future children
- * @param {(entry: Node, action: number) => Node} get
- * The callback invoked per each entry related DOM operation.
- * @param {Node} [before] The optional node used as anchor to insert before.
- * @returns {Node[]} The same list of future children.
- */
-const udomdiff = (parentNode, a, b, before) => {
-	const bLength = b.length;
-	let aEnd = a.length;
-	let bEnd = bLength;
-	let aStart = 0;
-	let bStart = 0;
-	let map = null;
-	while (aStart < aEnd || bStart < bEnd) {
-		// append head, tail, or nodes in between: fast path
-		if (aEnd === aStart) {
-			// we could be in a situation where the rest of nodes that
-			// need to be added are not at the end, and in such case
-			// the node to `insertBefore`, if the index is more than 0
-			// must be retrieved, otherwise it's gonna be the first item.
-			const node = bEnd < bLength
-				? (bStart
-					? (b[bStart - 1].nextSibling)
-					: b[bEnd - bStart])
-				: before;
-			while (bStart < bEnd) {
-				let bNode = b[bStart++];
-				parentNode.insertBefore(bNode, node);
-			}
-		}
-		// remove head or tail: fast path
-		else if (bEnd === bStart) {
-			while (aStart < aEnd) {
-				// remove the node only if it's unknown or not live
-				let aNode = a[aStart];
-				if (!map || !map.has(aNode)) {
-					parentNode.removeChild(aNode);
-				}
-				aStart++;
-			}
-		}
-		// same node: fast path
-		else if (a[aStart] === b[bStart]) {
-			aStart++;
-			bStart++;
-		}
-		// same tail: fast path
-		else if (a[aEnd - 1] === b[bEnd - 1]) {
-			aEnd--;
-			bEnd--;
-		}
-			// The once here single last swap "fast path" has been removed in v1.1.0
-			// https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
-		// reverse swap: also fast path
-		else if (
-			a[aStart] === b[bEnd - 1] &&
-			b[bStart] === a[aEnd - 1]
-		) {
-			// this is a "shrink" operation that could happen in these cases:
-			// [1, 2, 3, 4, 5]
-			// [1, 4, 3, 2, 5]
-			// or asymmetric too
-			// [1, 2, 3, 4, 5]
-			// [1, 2, 3, 5, 6, 4]
-			const node = a[--aEnd].nextSibling;
-
-
-			let a2 = b[bStart++];
-			let b2 = a[aStart++];
-			parentNode.insertBefore(
-				a2,
-				b2.nextSibling
-			);
+	reset() {
+		this.state = {...this.defaultState};
+		return this.state.context;
+	}
 
-			let bNode = b[--bEnd];
-			parentNode.insertBefore(bNode, node);
+	/**
+	 * 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();
 
-			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
-			// The main reason to do this, is that when a[aEnd] will be reached,
-			// the loop will likely be on the fast path, as identical to b[bEnd].
-			// In the best case scenario, the next loop will skip the tail,
-			// but in the worst one, this node will be considered as already
-			// processed, bailing out pretty quickly from the map index check
-			a[aEnd] = b[bEnd];
-		}
-		// map based fallback, "slow" path
-		else {
-			// the map requires an O(bEnd - bStart) operation once
-			// to store all future nodes indexes for later purposes.
-			// In the worst case scenario, this is a full O(N) cost,
-			// and such scenario happens at least when all nodes are different,
-			// but also if both first and last items of the lists are different
-			if (!map) {
-				map = new Map;
-				let i = bStart;
-				while (i < bEnd)
-					map.set(b[i], i++);
-			}
-			// if it's a future node, hence it needs some handling
-			if (map.has(a[aStart])) {
-				// grab the index of such node, 'cause it might have been processed
-				const index = map.get(a[aStart]);
-				// if it's not already processed, look on demand for the next LCS
-				if (bStart < index && index < bEnd) {
-					let i = aStart;
-					// counts the amount of nodes that are the same in the future
-					let sequence = 1;
-					while (++i < aEnd && i < bEnd && map.get(a[i]) === (index + sequence))
-						sequence++;
-					// effort decision here: if the sequence is longer than replaces
-					// needed to reach such sequence, which would brings again this loop
-					// to the fast path, prepend the difference before a sequence,
-					// and move only the future list index forward, so that aStart
-					// and bStart will be aligned again, hence on the fast path.
-					// An example considering aStart and bStart are both 0:
-					// a: [1, 2, 3, 4]
-					// b: [7, 1, 2, 3, 6]
-					// this would place 7 before 1 and, from that time on, 1, 2, and 3
-					// will be processed at zero cost
-					if (sequence > (index - bStart)) {
-						const node = a[aStart];
-						while (bStart < index) {
-							let bNode = b[bStart++];
-							parentNode.insertBefore(bNode, node);
-						}
+		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 = '';
 					}
-						// if the effort wasn't good enough, fallback to a replace,
-						// moving both source and target indexes forward, hoping that some
-					// similar node will be found later on, to go back to the fast path
-					else {
-						let aNode = a[aStart++];
-						let bNode = b[bStart++];
-						parentNode.replaceChild(
-							bNode,
-							aNode
-						);
+					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 = '';
 					}
-				}
-				// otherwise move the source forward, 'cause there's nothing to do
-				else
-					aStart++;
-			}
-				// this node has no meaning in the future list, so it's more than safe
-				// to remove it, and check the next live node out instead, meaning
-			// that only the live list index should be forwarded
-			else {
-				let aNode = a[aStart++];
-				parentNode.removeChild(aNode);
+					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;
 			}
 		}
+		onContextChange?.(html, html.length, this.state.context, null);
+		return this.state.context;
 	}
-	return b;
-};
-
-//import {ArraySpliceOp} from "./watch.js";
-//#IFDEV
-var exprPathId = 0;
-//#ENDIF
-
-/**
- * Path to where an expression should be evaluated within a Shell or NodeGroup.
- * Path is only valid until the expressions before it are evaluated.
- * TODO: Make this based on parent and node instead of path? */
-class ExprPath {
-
-	//#IFDEV
-	eid = exprPathId++;
-	//#ENDIF
-
-	/**
-	 * @type {ExprPathType} */
-	type;
+}
 
-	// Used for attributes:
+HtmlParser.Attribute = 'Attribute';
+HtmlParser.Text = 'Text';
+HtmlParser.Tag = 'Tag';
+
+class PathToAttribValue extends Path {
 
 	/** @type {?string} Used only if type=AttribType.Value. */
 	attrName;
@@ -899,748 +876,943 @@ class ExprPath {
 	 * @type {?string[]} Used only if type=AttribType.Value. If null, use one expr to set the whole attribute value. */
 	attrValue;
 
-	/**
-	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
-	attrNames;
+	isHtmlProperty;
 
-	/**
-	 * @type {Node} Node that occurs before this ExprPath's first Node.
-	 * This is necessary because udomdiff() can steal nodes from another ExprPath.
-	 * If we had a pointer to our own startNode then that node could be moved somewhere else w/o us knowing it.
-	 * Used only for type='content'
-	 * Will be null if ExprPath has no Nodes. */
-	nodeBefore;
+	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
+		super(null, nodeMarker);
+		this.attrName = attrName;
+		this.attrValue = attrValue;
+	}
 
 	/**
-	 * If type is AttribType.Multiple or AttribType.Value, points to the node having the attribute.
-	 * If type is 'content', points to a node that never changes that this NodeGroup should always insert its nodes before.
-	 *	 An empty text node will be created to insertBefore if there's no other NodeMarker and this isn't at the last position.
-	 * @type {Node|HTMLElement} */
-	nodeMarker;
+	 * Set the value of an attribute.  This can be for any attribute, not just attributes named "value".
+	 * @param exprs {Expr[]} */
+	apply(exprs) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
 
+		let node = this.nodeMarker;
+		let expr = exprs[0];
 
-	// These are set after an expression is assigned:
+		let multiple = this.attrValue;
 
-	/** @type {NodeGroup} */
-	parentNg;
+		// Two-way binding between attributes
+		// Passing a path to the value attribute.
+		// Copies the attribute to the property when the input event fires.
+		// value=${[this, 'value]'}
+		// checked=${[this, 'isAgree']}
+		// This same logic is in NodeGroup.instantiateComponent() for components.
+		if (!multiple && Util.isPath(expr)) {
 
-	/** @type {NodeGroup[]} */
-	nodeGroups = [];
+			// Don't bind events to component placeholders.
+			// PathToComponent will do the binding later when it instantiates the component.
+			if (this.isComponentAttrib && node.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
+				return;
 
+			/** @type {[Object, string[]]} */
+			let [obj, path] = [expr[0], expr.slice(1)];
 
-	// Caches to make things faster
+			if (!obj)
+				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
 
-	/**
-	 * @private
-	 * @type {Node[]} Cached result of getNodes() */
-	nodesCache;
-
-	/**
-	 * @type {int} Index of nodeBefore among its parentNode's children. */
-	nodeBeforeIndex;
-
-	/**
-	 * @type {int[]} Path to the node marker, in reverse for performance reasons. */
-	nodeMarkerPath;
-
-
-	/** @type {?function} A function called by renderWatched() to update the value of this expression. */
-	watchFunction
+			let value = delve(obj, path);
 
-	/**
-	 * @type {?function} The most recent callback passed to a .map() function in this ExprPath.
-	 * TODO: What if one ExprPath has two .map() calls?  Maybe we just won't support that. */
-	mapCallback
+			// Special case to allow setting select-multiple value from an array
+			if (this.attrName === '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)
+					option.selected = strValues.includes(option.value);
+			}
+			else {
+				// TODO: should we remove isFalsy, since these are always props?
+				const strValue = Util.isFalsy(value) ? '' : value;
 
-	isHtmlProperty = undefined;
+				// Special case for contenteditable
+				if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
+					const existingValue = node.innerHTML;
+					if (strValue !== existingValue)
+						node.innerHTML = strValue;
+				}
+				else {
 
-	/**
-	 * @param nodeBefore {Node}
-	 * @param nodeMarker {?Node}
-	 * @param type {ExprPathType}
-	 * @param attrName {?string}
-	 * @param attrValue {string[]} */
-	constructor(nodeBefore, nodeMarker, type=ExprPathType.Content, attrName=null, attrValue=null) {
+					// 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 path is a node.
-		this.nodeBefore = nodeBefore;
-		this.nodeMarker = nodeMarker;
-		this.type = type;
-		this.attrName = attrName;
-		this.attrValue = attrValue;
-		if (type === ExprPathType.AttribMultiple)
-			this.attrNames = new Set();
-	}
+			// TODO: We need to remove any old listeners, like in bindEventAttribute.
+			// Does bindEvent() now handle that?
+			let func = () => {
+				let value = (this.attrName === 'value')
+					? Util.getInputValue(node)
+					: node[this.attrName];
+				delve(obj, path, value);
+			};
 
-	/**
-	 * Apply any type of expression.
-	 * This calls other apply functions.
-	 *
-	 * One very messy part of this function is that it may apply multiple expressions if they're all part
-	 * of the same attribute value.
-	 *
-	 * We should modify path.applyValueAttrib so it stores the procssed parts and then only calls
-	 * setAttribute() once all the pieces are in place.
-	 *
-	 * @param exprs {Expr[]}
-	 * @param freeNodeGroups {boolean} */
-	apply(exprs, freeNodeGroups=true) {
-		switch (this.type) {
-			case 1: // PathType.Content:
-				this.applyNodes(exprs[0], freeNodeGroups);
-				break;
-			case 2: // PathType.Multiple:
-				this.applyMultipleAttribs(this.nodeMarker, exprs[0]);
-				break;
-			case 4: // PathType.Comment:
-				// Expressions inside Html comments.  Deliberately empty because we won't waste time updating them.
-				break;
-			case 5: // PathType.Event:
-				this.applyEventAttrib(this.nodeMarker, exprs[0], this.parentNg.rootNg.root);
-				break;
-			default: // 3 PathType.Attribute
-				// One attribute value may have multiple expressions.  Here we apply them all at once.
-				this.applyValueAttrib(this.nodeMarker, exprs);
-				break;
+			// 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, [], true);
 		}
-	}
 
-	/**
-	 * Insert/replace the nodes created by a single expression.
-	 * Called by applyExprs()
-	 * This function is recursive.  It calls functions that call applyNodes().
-	 * @param expr {Expr}
-	 * @param freeNodeGroups {boolean}
-	 * @return {Node[]} New Nodes created. */
-	applyNodes(expr, freeNodeGroups=true) {
-		let path = this;
+		// Regular attribute
+		else {
+			// Cache this on Path.isHtmlProperty when Shell creates the props.
+			// Have Path.clone() copy .isHtmlProperty?
+			let isProp = this.isHtmlProperty;
 
-		// This can be done at the beginning or the end of this function.
-		// If at the end, we may get rendering done faster.
-		// But when at the beginning, it leaves all the nodes in-use so we can do a renderWatched().
-		if (freeNodeGroups)
-			path.freeNodeGroups();
+			// Values to toggle an attribute
+			if (!multiple) {
+				Globals$1.currentPath = this; // Used by watch()
+				if (typeof expr === 'function') {
+					if (this.isComponentAttrib)
+						return;
 
-		/*#IFDEV*/path.verify();/*#ENDIF*/
+					this.watchFunction = expr; // The function that gets the expression, used for renderWatched()
+					expr = expr();
+				}
+				else
+					expr = Util.makePrimitive(expr);
+				Globals$1.currentPath = null;
+			}
 
-		/** @type {(Node|NodeGroup|Expr)[]} */
-		let newNodes = [];
-		let oldNodeGroups = path.nodeGroups;
-		/*#IFDEV*/assert(!oldNodeGroups.includes(null));/*#ENDIF*/
-		let secondPass = []; // indices
 
-		path.nodeGroups = []; // Reset before applyExactNodes and the code below rebuilds it.
-		path.applyExactNodes(expr, newNodes, secondPass);
+			if (!multiple && (expr === undefined || expr === false || expr === null)) { // Util.isFalsy() inlined.
+				if (isProp)
+					node[this.attrName] = false;
+				node.removeAttribute(this.attrName);
+			}
+			else if (!multiple && expr === true) {
+				if (isProp)
+					node[this.attrName] = true;
+				node.setAttribute(this.attrName, '');
+			}
 
-		//this.existingTextNodes = null;
+			// A non-toggled attribute
+			else {
 
-		// TODO: Create an array of old vs Nodes and NodeGroups together.
-		// If they're all the same, skip the next steps.
-		// Or calculate it in the loop above as we go?  Have a path.lastNodeGroups property?
+				// If it's a series of expressions among strings, join them together.
+				let joinedValue = multiple // avoid function call if there are no strings
+					? this.getValue(exprs)
+					: expr; 	// If the attribute is one expression with no strings
 
-		// Second pass to find close-match NodeGroups.
-		let flatten = false;
-		if (secondPass.length) {
-			for (let [nodesIndex, ngIndex] of secondPass) {
-				let ng = path.getNodeGroup(newNodes[nodesIndex], false);
-				let ngNodes = ng.getNodes();
+				// 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);
+				if (oldVal !== joinedValue) {
 
-				/*#IFDEV*/assert(!(newNodes[nodesIndex] instanceof NodeGroup));/*#ENDIF*/
+					// <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] = joinedValue;
 
-				if (ngNodes.length === 1) // flatten manually so we can skip flattening below.
-					newNodes[nodesIndex] = ngNodes[0];
+						// 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')) {
+						node.innerHTML = joinedValue;
+					}
 
-				else {
-					newNodes[nodesIndex] = ngNodes;
-					flatten = true;
+					// TODO: Putting an 'else' here would be more performant
+					node.setAttribute(this.attrName, joinedValue);
 				}
-				path.nodeGroups[ngIndex] = ng;
 			}
-
-			if (flatten)
-				newNodes = newNodes.flat(); // Only if second pass happens.
 		}
+	}
 
-		/*#IFDEV*/assert(!path.nodeGroups.includes(null));/*#ENDIF*/
-
-		let oldNodes = path.getNodes();
-
-		// This pre-check makes it a few percent faster?
-		let same = Util.arraySame(oldNodes, newNodes);
-		if (!same) {
 
-			path.nodesCache = newNodes; // Replaces value set by path.getNodes()
+	getExpressionCount() { return this.attrValue ? this.attrValue.length-1 : 1 }
 
-			if (this.parentNg.parentPath)
-				this.parentNg.parentPath.clearNodesCache();
+	/**
+	 * @param exprs {Expr|Expr[]} // TODO: Why is this sometimes not an array?
+	 * @return {string} The joined values of the expressions, or the first expression if there are no strings. */
+	getValue(exprs) {
 
-			// Fast clear method
-			let isNowEmpty = oldNodes.length && !newNodes.length;
-			if (!isNowEmpty || !path.fastClear())
-				// Rearrange nodes.
-				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
+		//if (!Array.isArray(exprs))
+		//	return exprs;
 
-			// TODO: Put this in a remove() function of NodeGroup.
-			// Then only run it on the old nodeGroups that were actually removed.
-			//Util.saveOrphans(oldNodeGroups, oldNodes);
+		if (!this.attrValue) {// If it's not multiple paths inside a single attribute, return first (and only) expression.
+			//#IFDEV
+			assert(exprs.length === 1);
+			//#ENDIF
+			return exprs[0];
+		}
 
-			for (let ng of oldNodeGroups)
-				if (!ng.startNode.parentNode)
-					ng.removeAndSaveOrphans();
-
-			// Instantiate components created within ${...} expressions.
-			// Also see this.applyExactNodes() which handles calling render() on web components even if they are unchanged.
-			for (let el of newNodes) {
-				if (el?.nodeType === 1) { // HTMLElement
-					if (el.hasAttribute('solarite-placeholder'))
-						this.parentNg.handleComponent(el, null, true);
-					for (let child of el.querySelectorAll('[solarite-placeholder]'))
-						this.parentNg.handleComponent(child, null, true);
-				}
+		let result = [];
+		let values = this.attrValue;
+		for (let i = 0; i < values.length; i++) {
+			result.push(values[i]);
+			if (i < values.length - 1) {
+				Globals$1.currentPath = this; // Used by watch()
+				let val = Util.makePrimitive(exprs[i]);
+				Globals$1.currentPath = null;
+				if (!Util.isFalsy(val))
+					result.push(val);
 			}
 		}
-
-		/*#IFDEV*/path.verify();/*#ENDIF*/
+		return result.join('')
 	}
 
 	/**
-	 * Used by watch() for inserting/removing/replacing individual loop items.
-	 * @param op {ArraySpliceOp} */
-	applyArrayOp(op) {
+	 * Call function when eventName is triggerd on node.
+	 * @param node {HTMLElement}
+	 * @param root {HTMLElement}
+	 * @param key {string}
+	 * @param eventName {string}
+	 * @param func {function}
+	 * @param args {array}
+	 * @param capture {boolean} */
+	bindEvent(node, root, key, eventName, func, args, capture=false) {
+		let nodeEvents = Globals$1.nodeEvents.get(node);
+		if (!nodeEvents) {
+			nodeEvents = {[key]: new Array(3)};
+			Globals$1.nodeEvents.set(node, nodeEvents);
+		}
+		let nodeEvent = nodeEvents[key];
+		if (!nodeEvent)
+			nodeEvents[key] = nodeEvent = new Array(3);
 
-		// Replace NodeGroups
-		let replaceCount = Math.min(op.deleteCount, op.items.length);
-		let deleteCount = op.deleteCount - replaceCount;
-		for (let i=0; i<replaceCount; i++) {
-			let oldNg = this.nodeGroups[op.index + i]; // TODO: One expr can create multiple nodegroups.
+		if (typeof func !== 'function')
+			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
 
-			// Try to find an exact match
-			let func = this.mapCallback || this.watchFunction;
-			let expr = func(op.items[i]);
+		// If function has changed, remove and rebind the event.
+		if (nodeEvent[0] !== func) {
 
-			// If the result of func isn't a template, conver it to one or more templates.
-			this.exprToTemplates(expr, template => { // TODO: An expr can create multiple NodeGroups.  I need a way to group them.
+			// TODO: We should be removing event listeners when calling getNodeGroup(),
+			// when we get the node from the list of nodeGroupsAttached/nodeGroupsDetached,
+			// instead of only when we rebind an event.
+			let [existing, existingBound, _] = nodeEvent;
+			if (existing)
+				node.removeEventListener(eventName, existingBound, capture);
 
-				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
-				if (ng && ng === oldNg) ; else {
+			let originalFunc = func;
 
-					// Find a close match or create a new node group
-					if (!ng)
-						ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
-					this.nodeGroups[op.index + i] = ng; // TODO: Remove old one to nodeGroupsDetached?
+			// BoundFunc sets the "this" variable to be the current Solarite component.
+			let boundFunc = (event) => {
+				let args = nodeEvent[2];
+				return originalFunc.call(root, ...args, event, node);
+			};
 
-					// Splice in the new nodes.
-					let insertBefore = oldNg.startNode;
-					for (let node of ng.getNodes())
-						insertBefore.parentNode.insertBefore(node, insertBefore);
+			// Save both the original and bound functions.
+			// Original so we can compare it against a newly assigned function.
+			// Bound so we can use it with removeEventListner().
+			nodeEvent[0] = originalFunc;
+			nodeEvent[1] = boundFunc;
 
-					// Remove the old nodes.
-					if (ng !== oldNg)
-						oldNg.removeAndSaveOrphans();
-				}
-			});
-		}
+			node.addEventListener(eventName, boundFunc, capture);
 
-		// Delete extra at the end.
-		if (deleteCount > 0) {
-			for (let i=0; i<deleteCount; i++) {
-				let oldNg = this.nodeGroups[op.index + replaceCount +  i];
-				oldNg.removeAndSaveOrphans();
-			}
-			this.nodeGroups.splice(op.index + replaceCount, deleteCount);
+			// TODO: classic event attribs?
+			//el[attr.name] = e => // e.g. el.onclick = ... // put "event", "el", and "this" in scope for the event code.
+			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el)
 		}
 
-		// Add extra at the end.
-		else {
-			let newItems = op.items.slice(replaceCount);
+		//  Otherwise just update the args to the function.
+		nodeEvents[key][2] = args;
+	}
+}
+
+// TODO: Merge this into PathToAttribValue?
+class PathToEvent extends PathToAttribValue {
 
-			let insertBefore = this.nodeGroups[op.index + replaceCount]?.startNode || this.nodeMarker;
-			for (let i = 0; i < newItems.length; i++) { // We use nodeMarker if the subequent (or all) nodeGroups have been removed.
+	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
+		super(null, nodeMarker, attrName, attrValue);
+	}
 
+	/**
+	 * Handle attributes for event binding, such as:
+	 * onclick=${(e, el) => this.doSomething(el, 'meow')}
+	 * oninput=${[this.doSomething, 'meow']}
+	 * onclick=${[this, 'doSomething', 'meow']}
+	 *
+	 * @param exprs {Expr[]} Only the first is used.*/
+	apply(exprs) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
 
-				// Try to find exact match
-				let template = this.mapCallback(newItems[i]);
-				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
-				if (!ng) 	// Find a close match or create a new node group
-					ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
+		// Tested by Solariate.events.classicWithExpr
+		// 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);
+			return;
+		}
 
-				this.nodeGroups.push(ng);
+		// 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;
 
-				// Splice in the new nodes.
-				for (let node of ng.getNodes())
-					insertBefore.parentNode.insertBefore(node, insertBefore);
+		let expr = exprs[0];
+		let root = this.parentNg.rootNg.root;
+
+		/*#IFDEV*/
+		assert(root?.nodeType === 1);
+		/*#ENDIF*/
+
+		let node = this.nodeMarker;
+
+		let eventName = this.attrName.slice(2); // remove "on-" prefix.
+		let func;
+		let args = [];
+
+		// Convert array to function.
+		// oninput=${[this.doSomething, 'meow']}
+		if (Array.isArray(expr) && typeof expr[0] === 'function') {
+			func = expr[0];
+			args = expr.slice(1);
+		}
+		else if (typeof expr === 'function')
+			func = expr;
+		else
+			throw new Error(`Invalid event binding: <${node.tagName.toLowerCase()} ${this.attrName}=\${${JSON.stringify(expr)}}>`);
+
+		this.bindEvent(node, root, eventName, eventName, func, args);
+	}
+
+
+
+}
+
+class PathToAttribs extends Path {
+
+	/**
+	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
+	attrNames;
+
+	constructor(nodeBefore, nodeMarker) {
+		super(null, null);
+		this.nodeMarker = nodeMarker;
+		this.attrNames = new Set();
+	}
+
+	/**
+	 * @param exprs {Expr[][]} Only the first is used.
+	 * @param freeNodeGroups {boolean} Used only for watch. */
+	apply(exprs, freeNodeGroups) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
+
+		let expr = exprs[0];
+		let node = this.nodeMarker;
+
+		if (Array.isArray(expr))
+			expr = expr.flat().join(' ');  // flat and join so we can accept arrays of arrays of strings.
+
+		// Add new attributes
+		let oldNames = this.attrNames;
+		this.attrNames = new Set();
+		if (expr) {
+			if (typeof expr === 'function') {
+				Globals$1.currentPath = this; // Used by watch()
+				this.watchFunction = expr; // used by renderWatched()
+				expr = expr();
+				Globals$1.currentPath = null;
+			}
+
+			// Attribute as name: value object.
+			if (typeof expr === 'object') {
+				for (let name in expr) {
+					let value = expr[name];
+					if (value === undefined || value === false || value === null)
+						continue;
+					node.setAttribute(name, value);
+					this.attrNames.add(name);
+				}
+			}
+
+			// Attributes as string
+			else {
+				let attrs = (expr + '') // 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.
+					node.setAttribute(name, value);
+					this.attrNames.add(name);
+				}
+			}
+		}
+
+		// Remove old attributes.
+		for (let oldName of oldNames)
+			if (!this.attrNames.has(oldName))
+				node.removeAttribute(oldName);
+	}
+
+
+	getExpressionCount() { return 1 }
+}
+
+/**
+ * ISC License
+ *
+ * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+ * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ */
+
+/**
+ * @param {Node} parentNode The container where children live
+ * @param {Node[]} a The list of current/live children
+ * @param {Node[]} b The list of future children
+ * @param {(entry: Node, action: number) => Node} get
+ * The callback invoked per each entry related DOM operation.
+ * @param {Node} [before] The optional node used as anchor to insert before.
+ * @returns {Node[]} The same list of future children.
+ */
+const udomdiff = (parentNode, a, b, before) => {
+	const bLength = b.length;
+	let aEnd = a.length;
+	let bEnd = bLength;
+	let aStart = 0;
+	let bStart = 0;
+	let map = null;
+	while (aStart < aEnd || bStart < bEnd) {
+		// append head, tail, or nodes in between: fast path
+		if (aEnd === aStart) {
+			// we could be in a situation where the rest of nodes that
+			// need to be added are not at the end, and in such case
+			// the node to `insertBefore`, if the index is more than 0
+			// must be retrieved, otherwise it's gonna be the first item.
+			const node = bEnd < bLength
+				? (bStart
+					? (b[bStart - 1].nextSibling)
+					: b[bEnd - bStart])
+				: before;
+			while (bStart < bEnd) {
+				let bNode = b[bStart++];
+				parentNode.insertBefore(bNode, node);
+			}
+		}
+		// remove head or tail: fast path
+		else if (bEnd === bStart) {
+			while (aStart < aEnd) {
+				// remove the node only if it's unknown or not live
+				let aNode = a[aStart];
+				if (!map || !map.has(aNode)) {
+					parentNode.removeChild(aNode);
+				}
+				aStart++;
+			}
+		}
+		// same node: fast path
+		else if (a[aStart] === b[bStart]) {
+			aStart++;
+			bStart++;
+		}
+		// same tail: fast path
+		else if (a[aEnd - 1] === b[bEnd - 1]) {
+			aEnd--;
+			bEnd--;
+		}
+			// The once here single last swap "fast path" has been removed in v1.1.0
+			// https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+		// reverse swap: also fast path
+		else if (
+			a[aStart] === b[bEnd - 1] &&
+			b[bStart] === a[aEnd - 1]
+		) {
+			// this is a "shrink" operation that could happen in these cases:
+			// [1, 2, 3, 4, 5]
+			// [1, 4, 3, 2, 5]
+			// or asymmetric too
+			// [1, 2, 3, 4, 5]
+			// [1, 2, 3, 5, 6, 4]
+			const node = a[--aEnd].nextSibling;
+
+
+			let a2 = b[bStart++];
+			let b2 = a[aStart++];
+			parentNode.insertBefore(
+				a2,
+				b2.nextSibling
+			);
+
+			let bNode = b[--bEnd];
+			parentNode.insertBefore(bNode, node);
+
+			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
+			// The main reason to do this, is that when a[aEnd] will be reached,
+			// the loop will likely be on the fast path, as identical to b[bEnd].
+			// In the best case scenario, the next loop will skip the tail,
+			// but in the worst one, this node will be considered as already
+			// processed, bailing out pretty quickly from the map index check
+			a[aEnd] = b[bEnd];
+		}
+		// map based fallback, "slow" path
+		else {
+			// the map requires an O(bEnd - bStart) operation once
+			// to store all future nodes indexes for later purposes.
+			// In the worst case scenario, this is a full O(N) cost,
+			// and such scenario happens at least when all nodes are different,
+			// but also if both first and last items of the lists are different
+			if (!map) {
+				map = new Map;
+				let i = bStart;
+				while (i < bEnd)
+					map.set(b[i], i++);
+			}
+			// if it's a future node, hence it needs some handling
+			if (map.has(a[aStart])) {
+				// grab the index of such node, 'cause it might have been processed
+				const index = map.get(a[aStart]);
+				// if it's not already processed, look on demand for the next LCS
+				if (bStart < index && index < bEnd) {
+					let i = aStart;
+					// counts the amount of nodes that are the same in the future
+					let sequence = 1;
+					while (++i < aEnd && i < bEnd && map.get(a[i]) === (index + sequence))
+						sequence++;
+					// effort decision here: if the sequence is longer than replaces
+					// needed to reach such sequence, which would brings again this loop
+					// to the fast path, prepend the difference before a sequence,
+					// and move only the future list index forward, so that aStart
+					// and bStart will be aligned again, hence on the fast path.
+					// An example considering aStart and bStart are both 0:
+					// a: [1, 2, 3, 4]
+					// b: [7, 1, 2, 3, 6]
+					// this would place 7 before 1 and, from that time on, 1, 2, and 3
+					// will be processed at zero cost
+					if (sequence > (index - bStart)) {
+						const node = a[aStart];
+						while (bStart < index) {
+							let bNode = b[bStart++];
+							parentNode.insertBefore(bNode, node);
+						}
+					}
+						// if the effort wasn't good enough, fallback to a replace,
+						// moving both source and target indexes forward, hoping that some
+					// similar node will be found later on, to go back to the fast path
+					else {
+						let aNode = a[aStart++];
+						let bNode = b[bStart++];
+						parentNode.replaceChild(
+							bNode,
+							aNode
+						);
+					}
+				}
+				// otherwise move the source forward, 'cause there's nothing to do
+				else
+					aStart++;
 			}
+				// this node has no meaning in the future list, so it's more than safe
+				// to remove it, and check the next live node out instead, meaning
+			// that only the live list index should be forwarded
+			else {
+				let aNode = a[aStart++];
+				parentNode.removeChild(aNode);
+			}
+		}
+	}
+	return b;
+};
+
+class MultiValueMap {
+
+	/** @type {Record<string, Set>} */
+	data = {};
+
+	// Set a new value for a key
+	add(key, value) {
+		let data = this.data;
+		let set = data[key];
+		if (!set) {
+			set = new Set();
+			data[key] = set;
+		}
+		set.add(value);
+	}
+
+	isEmpty() {
+		for (let key in this.data)
+			return true;
+		return false;
+	}
+
+	/**
+	 * Get all values for a key.
+	 * @param key {string}
+	 * @returns {Set|*[]} */
+	getAll(key) {
+		return this.data[key] || [];
+	}
+
+	/**
+	 * Remove one value from a key, and return it.
+	 * @param key {string}
+	 * @param val If specified, make sure we delete this specific value, if a key exists more than once.
+	 * @returns {*|undefined} The deleted item. */
+	delete(key, val=undefined) {
+		let data = this.data;
+		let result;
+		let set = data[key];
+		if (!set)
+			return undefined;
+
+		// Delete any value.
+		if (val === undefined) {
+			[result] = set; //  Get the first value from the set.
+			set.delete(result);
+		}
+
+		// Delete a specific value.
+		else {
+			set.delete(val);
+			result = val;
 		}
 
-		//#IFDEV
-		assert(this.nodeGroups.length === op.array.length);
-		//#ENDIF
+		if (set.size === 0)
+			delete data[key];
 
-		// TODO: update or invalidate the nodes cache?
-		this.nodesCache = null;
+		return result;
 	}
 
 	/**
-	 * Recursively traverse expr.
-	 * If a value is a function, evaluate it.
-	 * If a value is an array, recurse on each item.
-	 * If it's a primitive, convert it to a Template.
-	 * Otherwise pass the item (which is now either a Template or a Node) to callback.
-	 * @param expr
-	 * @param callback {function(Node|Template)}
-	 *
-	 * TODO: have applyExactNodes() use this function. */
-	exprToTemplates(expr, callback) {
-		if (Array.isArray(expr))
-			for (let subExpr of expr)
-				this.exprToTemplates(subExpr, callback);
+	 * Remove any one value from a key, and return it.
+	 * @param key {string}
+	 * @returns {*|undefined} The deleted item. */
+	deleteAny(key) {
+		let data = this.data;
+		let result;
+		let set = data[key];
+		if (!set) // slower than pre-check.
+			return undefined;
 
-		else if (typeof expr === 'function') {
-			// TODO: One ExprPath can have multiple expr functions.
-			// But if using it as a watch, it should only have one at the top level.
-			// So maybe this is ok.
-			Globals$1.currentExprPath = this; // Used by watch()
+		[result] = set; // Get the first value from the set.
+		set.delete(result);
 
-			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
-			expr = expr(); // As expr accesses watched variables, watch() uses Globals.currentExprPath to mark where those watched variables are being used.
-			Globals$1.currentExprPath = null;
+		if (set.size === 0)
+			delete data[key];
 
-			this.exprToTemplates(expr, callback);
-		}
+		return result;
+	}
 
-		// String/Number/Date/Boolean
-		else if (!(expr instanceof Template) && !(expr?.nodeType)){
-			// Convert expression to a string.
-			if (expr === undefined || expr === false || expr === null) // Util.isFalsy() inlined
-				expr = '';
-			else if (typeof expr !== 'string')
-				expr += '';
+	deleteSpecific(key, val) {
+		let data = this.data;
+		let result;
+		let set = data[key];
+		if (!set)
+			return undefined;
 
-			// Get the same Template for the same string each time.
-			// let template = Globals.stringTemplates[expr];
-			// if (!template) {
+		set.delete(val);
+		result = val;
 
-				let template = new Template([expr], []);
-				template.isText = true;
-			//	Globals.stringTemplates[expr] = template;
-			//}
+		if (set.size === 0)
+			delete data[key];
 
-			// Recurse.
-			this.exprToTemplates(template, callback);
-		}
-		else
-			callback(expr);
+		return result;
 	}
 
+	hasValue(val) {
+		let data = this.data;
+		let names = [];
+		for (let name in data)
+			if (data[name].has(val)) // TODO: iterate twice to pre-size array?
+				names.push(name);
+		return names;
+	}
+}
+
+class PathToNodes extends Path {
 
-	/**
-	 * Try to apply Nodes that are an exact match, by finding existing nodes from the last render
-	 * that have the same value as created by the expr.
-	 * This is called from ExprPath.applyNodes().
-	 *
-	 * @param expr {Template|Node|Array|function|*}
-	 * @param newNodes {(Node|Template)[]} An inout parameter; we add the nodes here as we go.
-	 * @param secondPass {[int, int][]} Locations within newNodes for ExprPath.applyNodes() to evaluate later,
-	 *   when it tries to find partial matches. */
-	applyExactNodes(expr, newNodes, secondPass) {
-
-		if (expr instanceof Template) {
-			let ng = this.getNodeGroup(expr, true);
-
-			if (ng) {
-				let newestNodes = ng.getNodes();
-				newNodes.push(...newestNodes);
 
-				// New!
-				// Re-apply all expressions if there's a web component, so we can pass them to its constructor.
-				// NodeGroup.applyExprs() is used to call applyComponentExprs() on web components that have expression attributes.
-				// For those that don't, we call applyComponentExprs() directly here.
-				// Also see similar code at the end of this.applyNodes() which handles web components being instantiated the first time.
-				let apply = false;
-				for (let el of newestNodes) {
-					if (el?.nodeType === 1) { // HTMLElement
-
-						if (el.tagName.includes('-')) {
-							if (!expr.exprs.find(expr => expr?.nodeMarker === el))
-								this.parentNg.handleComponent(el, null, true);
-							else // Commenting out this "else" causes render() to be called too often, but other UI code fails if it's present.
-								apply = true;
-						}
-						for (let child of el.querySelectorAll('*')) {
-							if (child.tagName.includes('-')) {
-								if (!expr.exprs.find(expr => expr?.nodeMarker === child))
-									this.parentNg.handleComponent(child, null, true);
-								else
-									apply = true;
-							}
-						}
-					}
-				}
+	/**
+	 * @type {?function} The most recent callback passed to a .map() function in this Path.  This is only used for watch.js
+	 * TODO: What if one Path has two .map() calls?  Maybe we just won't support that. */
+	mapCallback;
 
-				// This calls render() on web components that have expressions as attributes.
-				if (apply)
-					ng.applyExprs(expr.exprs);
-				
-				this.nodeGroups.push(ng);
 
-				return ng;
-			}
 
-			// If expression, mark it to be evaluated later in ExprPath.apply() to find partial match.
-			else {
-				secondPass.push([newNodes.length, this.nodeGroups.length]);
-				newNodes.push(expr);
-				this.nodeGroups.push(null); // placeholder
-			}
-		}
+	/**
+	 * TODO: Rename this to nodeGroupsInUse, nodeGroupsAvialableAttached and nodeGroupsAvailableDetached?
+	 * Nodes that have been used during the current render().
+	 * Used with getNodeGroup() and freeNodeGroups().
+	 * TODO: Use an array of WeakRef so the gc can collect them?
+	 * TODO: Put items back in nodeGroupsInUse after applyExpr() is called, not before.
+	 * @type {NodeGroup[]} */
+	nodeGroupsRendered = [];
 
-		// Node(s) created by an expression.
-		else if (expr?.nodeType) {
+	/**
+	 * Nodes that were added to the web component during the last render(), but are available to be used again.
+	 * Used with getNodeGroup() and freeNodeGroups().
+	 * Each NodeGroup is here twice, once under an exact key, and once under the close key.
+	 * @type {MultiValueMap<key:string, value:NodeGroup>} */
+	nodeGroupsAttachedAvailable = new MultiValueMap();
 
-			// DocumentFragment created by an expression.
-			if (expr?.nodeType === 11) // DocumentFragment
-				newNodes.push(...expr.childNodes);
-			else
-				newNodes.push(expr);
-		}
+	/**
+	 * Nodes that were not added to the web component during the last render(), and available to be used again.
+	 * @type {MultiValueMap} */
+	nodeGroupsDetachedAvailable = new MultiValueMap();
 
-		// Arrays and functions.
-		// I tried iterating over the result of a generator function to avoid this recursion and simplify the code,
-		// but that consistently made the js-framework-benchmarks a few percentage points slower.
-		else
-			this.exprToTemplates(expr, template => {
-				this.applyExactNodes(template, newNodes, secondPass);
-			});
+	constructor(nodeBefore, nodeMarker) {
+		super(nodeBefore, nodeMarker);
 	}
 
-	applyMultipleAttribs(node, expr) {
-		/*#IFDEV*/assert(this.type === ExprPathType.AttribMultiple);/*#ENDIF*/
-
-		if (Array.isArray(expr))
-			expr = expr.flat().join(' ');  // flat and join so we can accept arrays of arrays of strings.
-
-		// Add new attributes
-		let oldNames = this.attrNames;
-		this.attrNames = new Set();
-		if (expr) {
-			if (typeof expr === 'function') {
-				Globals$1.currentExprPath = this; // Used by watch()
-				this.watchFunction = expr; // used by renderWatched()
-				expr = expr();
-				Globals$1.currentExprPath = null;
-			}
-
-			// Attribute as name: value object.
-			if (typeof expr === 'object') {
-				for (let name in expr) {
-					let value = expr[name];
-					if (value === undefined || value === false || value === null)
-						continue;
-					node.setAttribute(name, value);
-					this.attrNames.add(name);
-				}
-			}
+	/**
+	 * Insert/replace the nodes created by a single expression.
+	 * Called by applyExprs()
+	 * This function is recursive.  It calls functions that call applyNodes().
+	 * @param exprs {Expr[]} Only the first is used.
+	 * @param freeNodeGroups {boolean}
+	 * @return {Node[]} New Nodes created. */
+	apply(exprs, freeNodeGroups=true) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
 
-			// Attributes as string
-			else {
-				let attrs = (expr + '') // Split string into multiple attributes.
-					.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s]+))/g)
-					.map(text => text.trim())
-					.filter(text => text.length);
+		let path = this;
+		let expr = exprs[0];
 
-				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.
-					node.setAttribute(name, value);
-					this.attrNames.add(name);
-				}
-			}
-		}
+		// This can be done at the beginning or the end of this function.
+		// If at the end, we may get rendering done faster.
+		// But when at the beginning, it leaves all the nodes in-use so we can do a renderWatched().
+		if (freeNodeGroups)
+			path.freeNodeGroups();
 
-		// Remove old attributes.
-		for (let oldName of oldNames)
-			if (!this.attrNames.has(oldName))
-				node.removeAttribute(oldName);
-	}
+		/*#IFDEV*/path.verify();/*#ENDIF*/
 
-	/**
-	 * Handle attributes for event binding, such as:
-	 * onclick=${(e, el) => this.doSomething(el, 'meow')}
-	 * oninput=${[this.doSomething, 'meow']}
-	 * onclick=${[this, 'doSomething', 'meow']}
-	 *
-	 * @param node
-	 * @param expr
-	 * @param root */
-	applyEventAttrib(node, expr, root) {
-		/*#IFDEV*/
-		assert(this.type === ExprPathType.Event);
-		assert(root?.nodeType === 1);
-		/*#ENDIF*/
+		/** @type {(Node|NodeGroup|Expr)[]} */
+		let newNodes = [];
+		let oldNodeGroups = path.nodeGroups;
+		/*#IFDEV*/assert(!oldNodeGroups.includes(null));/*#ENDIF*/
+		let secondPass = []; // indices
 
-		let eventName = this.attrName.slice(2); // remove "on-" prefix.
-		let func;
-		let args = [];
+		path.nodeGroups = []; // Reset before applyExactNodes and the code below rebuilds it.
+		path.applyExactNodes(expr, newNodes, secondPass);
 
-		// Convert array to function.
-		// oninput=${[this.doSomething, 'meow']}
-		if (Array.isArray(expr) && typeof expr[0] === 'function') {
-			func = expr[0];
-			args = expr.slice(1);
-		}
-		else if (typeof expr === 'function')
-			func = expr;
-		else
-			throw new Error(`Invalid event binding: <${node.tagName.toLowerCase()} ${this.attrName}=\${${JSON.stringify(expr)}}>`);
+		//this.existingTextNodes = null;
 
-		this.bindEvent(node, root, eventName, eventName, func, args);
-	}
+		// TODO: Create an array of old vs Nodes and NodeGroups together.
+		// If they're all the same, skip the next steps.
+		// Or calculate it in the loop above as we go?  Have a path.lastNodeGroups property?
 
+		// Second pass to find close-match NodeGroups.
+		let flatten = false;
+		if (secondPass.length) {
+			for (let [nodesIndex, ngIndex] of secondPass) {
+				let ng = path.getNodeGroup(newNodes[nodesIndex], false);
+				let ngNodes = ng.getNodes();
 
-	/**
-	 * Call function when eventName is triggerd on node.
-	 * @param node {HTMLElement}
-	 * @param root {HTMLElement}
-	 * @param key {string}
-	 * @param eventName {string}
-	 * @param func {function}
-	 * @param args {array}
-	 * @param capture {boolean} */
-	bindEvent(node, root, key, eventName, func, args, capture=false) {
-		let nodeEvents = Globals$1.nodeEvents.get(node);
-		if (!nodeEvents) {
-			nodeEvents = {[key]: new Array(3)};
-			Globals$1.nodeEvents.set(node, nodeEvents);
+				/*#IFDEV*/assert(!(newNodes[nodesIndex] instanceof NodeGroup));/*#ENDIF*/
+
+				if (ngNodes.length === 1) // flatten manually so we can skip flattening below.
+					newNodes[nodesIndex] = ngNodes[0];
+
+				else {
+					newNodes[nodesIndex] = ngNodes;
+					flatten = true;
+				}
+				path.nodeGroups[ngIndex] = ng;
+			}
+
+			if (flatten)
+				newNodes = newNodes.flat(); // Only if second pass happens.
 		}
-		let nodeEvent = nodeEvents[key];
-		if (!nodeEvent)
-			nodeEvents[key] = nodeEvent = new Array(3);
 
-		if (typeof func !== 'function')
-			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
+		/*#IFDEV*/assert(!path.nodeGroups.includes(null));/*#ENDIF*/
 
-		// If function has changed, remove and rebind the event.
-		if (nodeEvent[0] !== func) {
+		let oldNodes = path.getNodes();
 
-			// TODO: We should be removing event listeners when calling getNodeGroup(),
-			// when we get the node from the list of nodeGroupsAttached/nodeGroupsDetached,
-			// instead of only when we rebind an event.
-			let [existing, existingBound, _] = nodeEvent;
-			if (existing)
-				node.removeEventListener(eventName, existingBound, capture);
+		// This pre-check makes it a few percent faster?
+		let same = Util.arraySame(oldNodes, newNodes);
+		if (!same) {
 
-			let originalFunc = func;
+			path.nodesCache = newNodes; // Replaces value set by path.getNodes()
 
-			// BoundFunc sets the "this" variable to be the current Solarite component.
-			let boundFunc = (event) => {
-				let args = nodeEvent[2];
-				return originalFunc.call(root, ...args, event, node);
-			};
+			if (this.parentNg.parentPath)
+				this.parentNg.parentPath.clearNodesCache();
 
-			// Save both the original and bound functions.
-			// Original so we can compare it against a newly assigned function.
-			// Bound so we can use it with removeEventListner().
-			nodeEvent[0] = originalFunc;
-			nodeEvent[1] = boundFunc;
+			// Fast clear method
+			let isNowEmpty = oldNodes.length && !newNodes.length;
+			if (!isNowEmpty || !path.fastClear()) {
 
-			node.addEventListener(eventName, boundFunc, capture);
+				// Rearrange nodes.
+				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
+			}
 
-			// TODO: classic event attribs?
-			//el[attr.name] = e => // e.g. el.onclick = ... // put "event", "el", and "this" in scope for the event code.
-			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el)
+			// TODO: Put this in a remove() function of NodeGroup.
+			// Then only run it on the old nodeGroups that were actually removed.
+			//Util.saveOrphans(oldNodeGroups, oldNodes);
+
+			for (let ng of oldNodeGroups)
+				if (!ng.startNode.parentNode)
+					Util.saveOrphans(ng.getNodes());
 		}
 
-		//  Otherwise just update the args to the function.
-		nodeEvents[key][2] = args;
+		/*#IFDEV*/path.verify();/*#ENDIF*/
 	}
 
+
+
+
 	/**
-	 * Set the value of an attribute.  This can be for any attribute, not just attributes named "value".
-	 * @param node
-	 * @param exprs */
-	// TODO: node is always this.nodeMarker?
-	applyValueAttrib(node, exprs) {
-		let expr = exprs[0];
+	 * Try to apply Nodes that are an exact match, by finding existing nodes from the last render
+	 * that have the same value as created by the expr.
+	 * This is called from Path.applyNodes().
+	 *
+	 * @param expr {Template|Node|Array|function|*}
+	 * @param newNodes {(Node|Template)[]} An inout parameter; we add the nodes here as we go.
+	 * @param secondPass {[int, int][]} Locations within newNodes for Path.applyNodes() to evaluate later,
+	 *   when it tries to find partial matches. */
+	applyExactNodes(expr, newNodes, secondPass) {
 
-		// Two-way binding between attributes
-		// Passing a path to the value attribute.
-		// Copies the attribute to the property when the input event fires.
-		// value=${[this, 'value]'}
-		// checked=${[this, 'isAgree']}
-		// This same logic is in NodeGroup.instantiateComponent() for components.
-		if (Util.isPath(expr)) {
-			let [obj, path] = [expr[0], expr.slice(1)];
+		if (expr instanceof Template) {
+			let ng = this.getNodeGroup(expr, true);
 
-			if (!obj)
-				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
+			if (ng) {
+				let newestNodes = ng.getNodes();
+				newNodes.push(...newestNodes);
 
-			let value = delve(obj, path);
+				// New!
+				// Call render() on web components even though none of their arguments have changed:
+				// Do we want it to work this way?  Yes, because even if this component hasn't changed,
+				// perhaps something in a sub-component has.
+				ng.applyExprs(expr.exprs, false, false);
 
-			// Special case to allow setting select-multiple value from an array
-			if (this.attrName === '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)
-					option.selected = strValues.includes(option.value);
+				this.nodeGroups.push(ng);
+				return ng;
 			}
-			else {
-				// TODO: should we remove isFalsy, since these are always props?
-				const strValue = Util.isFalsy(value) ? '' : value;
-
-				// Special case for contenteditable
-				if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
-					const existingValue = node.innerHTML;
-					if (strValue !== existingValue)
-						node.innerHTML = strValue;
-				}
-				else {
 
-					// 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 expression, mark it to be evaluated later in Path.apply() to find partial match.
+			else {
+				secondPass.push([newNodes.length, this.nodeGroups.length]);
+				newNodes.push(expr);
+				this.nodeGroups.push(null); // placeholder
 			}
+		}
+		else if (expr instanceof NodeList) {
+			newNodes.push(...expr);
+		}
 
-			// TODO: We need to remove any old listeners, like in bindEventAttribute.
-			// Does bindEvent() now handle that?
-			let func = () => {
-				let value = (this.attrName === 'value')
-					? Util.getInputValue(node)
-					: node[this.attrName];
-				delve(obj, path, value);
-			};
+		// Node(s) created by an expression.
+		else if (expr?.nodeType) {
 
-			// 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, path[0], this.attrName, 'input', func, [], true);
+			// DocumentFragment created by an expression.
+			if (expr?.nodeType === 11) // DocumentFragment
+				newNodes.push(...expr.childNodes);
+			else
+				newNodes.push(expr);
 		}
 
-		// Regular attribute
-		else {
-			// Cache this on ExprPath.isHtmlProperty when Shell creates the props.
-			// Have ExprPath.clone() copy .isHtmlProperty?
-			let isProp = this.isHtmlProperty;
-			if (isProp === undefined)
-				isProp = this.isHtmlProperty = Util.isHtmlProp(node, this.attrName);
-
-			// Values to toggle an attribute
-			let multiple = this.attrValue;
-			if (!multiple) {
-				Globals$1.currentExprPath = this; // Used by watch()
-				if (typeof expr === 'function') {
-					if (this.isComponent) { // Don't evaluate functions before passing them to components
-						return
-					}
-					this.watchFunction = expr; // The function that gets the expression, used for renderWatched()
-					expr = expr();
-				}
-				else
-					expr = Util.makePrimitive(expr);
-				Globals$1.currentExprPath = null;
-			}
-			if (!multiple && (expr === undefined || expr === false || expr === null)) { // Util.isFalsy() inlined.
-				if (isProp)
-					node[this.attrName] = false;
-				node.removeAttribute(this.attrName);
-			}
-			else if (!multiple && expr === true) {
-				if (isProp)
-					node[this.attrName] = true;
-				node.setAttribute(this.attrName, '');
-			}
+		// Arrays and functions.
+		// I tried iterating over the result of a generator function to avoid this recursion and simplify the code,
+		// but that consistently made the js-framework-benchmarks a few percentage points slower.
+		else
+			this.exprToTemplates(expr, template => {
+				this.applyExactNodes(template, newNodes, secondPass);
+			});
+	}
 
-			// A non-toggled attribute
-			else {
+	/**
+	 * Used by watch() for inserting/removing/replacing individual loop items.
+	 * @param op {ArraySpliceOp} */
+	applyWatchArrayOp(op) {
 
-				// If it's a series of expressions among strings, join them together.
-				let joinedValue;
-				if (multiple) {
-					let value = [];
-					for (let i = 0; i < this.attrValue.length; i++) {
-						value.push(this.attrValue[i]);
-						if (i < this.attrValue.length - 1) {
-							Globals$1.currentExprPath = this; // Used by watch()
-							let val = Util.makePrimitive(exprs[i]);
-							Globals$1.currentExprPath = null;
-							if (!Util.isFalsy(val))
-								value.push(val);
-						}
-					}
-					joinedValue = value.join('');
-				}
+		// Replace NodeGroups
+		let replaceCount = Math.min(op.deleteCount, op.items.length);
+		let deleteCount = op.deleteCount - replaceCount;
+		for (let i=0; i<replaceCount; i++) {
+			let oldNg = this.nodeGroups[op.index + i]; // TODO: One expr can create multiple nodegroups.
 
-				// If the attribute is one expression with no strings:
-				else
-					joinedValue = expr;
+			// Try to find an exact match
+			let func = this.mapCallback || this.watchFunction;
+			let expr = func(op.items[i]);
 
-				// Only update attributes if the value has changed.
-				// This is needed for setting input.value, .checked, option.selected, etc.
+			// If the result of func isn't a template, conver it to one or more templates.
+			this.exprToTemplates(expr, template => { // TODO: An expr can create multiple NodeGroups.  I need a way to group them.
 
-				let oldVal = isProp
-					? node[this.attrName]
-					: node.getAttribute(this.attrName);
-				if (oldVal !== joinedValue) {
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (ng && ng === oldNg) ; else {
 
-					// <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] = joinedValue;
+					// Find a close match or create a new node group
+					if (!ng)
+						ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
+					this.nodeGroups[op.index + i] = ng; // TODO: Remove old one to nodeGroupsDetached?
 
-					// 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 (node.hasAttribute('contenteditable'))
-						node.innerHTML = joinedValue;
+					// Splice in the new nodes.
+					let insertBefore = oldNg.startNode;
+					for (let node of ng.getNodes())
+						insertBefore.parentNode.insertBefore(node, insertBefore);
 
-					// TODO: Putting an 'else' here would be more performant
-					node.setAttribute(this.attrName, joinedValue);
+					// Remove the old nodes.
+					if (ng !== oldNg)
+						Util.saveOrphans(oldNg.getNodes());
 				}
+			});
+		}
+
+		// Delete extra at the end.
+		if (deleteCount > 0) {
+			for (let i=0; i<deleteCount; i++) {
+				let oldNg = this.nodeGroups[op.index + replaceCount +  i];
+				Util.saveOrphans(oldNg.getNodes());
 			}
+			this.nodeGroups.splice(op.index + replaceCount, deleteCount);
 		}
-	}
 
+		// Add extra at the end.
+		else {
+			let newItems = op.items.slice(replaceCount);
 
-	/**
-	 *
-	 * @param newRoot {HTMLElement}
-	 * @param pathOffset {int}
-	 * @return {ExprPath} */
-	clone(newRoot, pathOffset=0) {
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+			let insertBefore = this.nodeGroups[op.index + replaceCount]?.startNode || this.nodeMarker;
+			for (let i = 0; i < newItems.length; i++) { // We use nodeMarker if the subequent (or all) nodeGroups have been removed.
 
-		// Resolve node paths.
-		let nodeMarker, nodeBefore;
-		let root = newRoot;
-		let path = pathOffset ? this.nodeMarkerPath.slice(0, -pathOffset) : this.nodeMarkerPath;
-		let length = path.length-1;
-		for (let i=length; i>0; i--) // Resolve the path.
-			root = root.childNodes[path[i]];
-		let childNodes = root.childNodes;
 
-		nodeMarker = path.length ? childNodes[path[0]] : newRoot;
-		if (this.nodeBefore)
-			nodeBefore = childNodes[this.nodeBeforeIndex];
+				// Try to find exact match
+				let template = this.mapCallback(newItems[i]);
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (!ng) 	// Find a close match or create a new node group
+					ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
+
+				this.nodeGroups.push(ng);
 
-		let result = new ExprPath(nodeBefore, nodeMarker, this.type, this.attrName, this.attrValue);
-		result.isComponent = this.isComponent;
+				// Splice in the new nodes.
+				for (let node of ng.getNodes())
+					insertBefore.parentNode.insertBefore(node, insertBefore);
+			}
+		}
 
 		//#IFDEV
-		result.verify();
+		assert(this.nodeGroups.length === op.array.length);
 		//#ENDIF
 
-		return result;
+		// TODO: update or invalidate the nodes cache?
+		this.nodesCache = null;
 	}
 
 	/**
-	 * Clear the nodeCache of this ExprPath, as well as all parent and child ExprPaths that
+	 * Clear the nodeCache of this Path, as well as all parent and child Paths that
 	 * share the same DOM parent node. */
 	clearNodesCache() {
 		let path = this;
 
-		// Clear cache parent ExprPaths that have the same parentNode
+		// Clear cache parent Paths that have the same parentNode
 		let parentNode = this.nodeMarker.parentNode;
 		while (path && path.nodeMarker.parentNode === parentNode) {
 			path.nodesCache = null;
@@ -1651,9 +1823,8 @@ class ExprPath {
 		}
 	}
 
-
 	/**
-	 * Attempt to remove all of this ExprPath's nodes from the DOM, if it can be done using a special fast method.
+	 * Attempt to remove all of this Path's nodes from the DOM, if it can be done using a special fast method.
 	 * @returns {boolean} Returns false if Nodes weren't removed, and they should instead be removed manually. */
 	fastClear() {
 		let parent = this.nodeBefore.parentNode;
@@ -1672,8 +1843,8 @@ class ExprPath {
 			// 	parent.replaceWith(replacement)
 			// }
 			// else {
-				parent.innerHTML = ''; // Faster than calling .removeChild() a thousand times.
-				parent.append(this.nodeBefore, this.nodeMarker);
+			parent.innerHTML = ''; // Faster than calling .removeChild() a thousand times.
+			parent.append(this.nodeBefore, this.nodeMarker);
 			//}
 			return true;
 		}
@@ -1681,48 +1852,54 @@ class ExprPath {
 	}
 
 	/**
-	 * @return {(Node|HTMLElement)[]} */
-	getNodes() {
-
-		// Why doesn't this work?
-		// let result2 = [];
-		// for (let ng of this.nodeGroups)
-		// 	result2.push(...ng.getNodes())
-		// return result2;
+	 * Recursively traverse expr.
+	 * If a value is a function, evaluate it.
+	 * If a value is an array, recurse on each item.
+	 * If it's a primitive, convert it to a Template.
+	 * Otherwise pass the item (which is now either a Template or a Node) to callback.
+	 * TODO: This could be static if not for the watch code, which doesn't work anyway.
+	 * @param expr
+	 * @param callback {function(Node|Template)}*/
+	exprToTemplates(expr, callback) {
+		if (Array.isArray(expr)) // TODO: use typeof obj[Symbol.iterator] === 'function'  so we can also iterate over objects and NodeList?
+			for (let subExpr of expr)
+				this.exprToTemplates(subExpr, callback);
 
-		if (this.type === ExprPathType.AttribValue || this.type === ExprPathType.AttribMultiple) {
-			return [this.nodeMarker];
-		}
+		else if (typeof expr === 'function') {
+			// TODO: One Path can have multiple expr functions.
+			// But if using it as a watch, it should only have one at the top level.
+			// So maybe this is ok.
+			Globals$1.currentPath = this; // Used by watch()
 
+			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
+			expr = expr(); // As expr accesses watched variables, watch() uses Globals.currentPath to mark where those watched variables are being used.
+			Globals$1.currentPath = null;
 
-		let result;
+			this.exprToTemplates(expr, callback);
+		}
 
-		// This shaves about 5ms off the partialUpdate benchmark.
-		result = this.nodesCache;
-		if (result) {
+		// String/Number/Date/Boolean
+		else if (!(expr instanceof Template) && !(expr?.nodeType)){
+			// Convert expression to a string.
+			if (expr === undefined || expr === false || expr === null) // Util.isFalsy() inlined
+				expr = '';
+			else if (typeof expr !== 'string')
+				expr += '';
 
-			//#IFDEV
-			this.checkNodesCache();
-			//#ENDIF
+			// Get the same Template for the same string each time.
+			// let template = Globals.stringTemplates[expr];
+			// if (!template) {
 
-			return result
-		}
+			let template = new Template([expr], []);
+			template.isText = true;
+			//	Globals.stringTemplates[expr] = template;
+			//}
 
-		result = [];
-		let current = this.nodeBefore.nextSibling;
-		let nodeMarker = this.nodeMarker;
-		while (current && current !== nodeMarker) {
-			result.push(current);
-			current = current.nextSibling;
+			// Recurse.
+			this.exprToTemplates(template, callback);
 		}
-
-		this.nodesCache = result;
-		return result;
-	}
-
-	/** @return {HTMLElement|ParentNode} */
-	getParentNode() {
-		return this.nodeMarker.parentNode
+		else
+			callback(expr);
 	}
 
 	/**
@@ -1738,7 +1915,6 @@ class ExprPath {
 	 *         or createa  new NodeGroup from the template.
 	 * @return {NodeGroup} */
 	getNodeGroup(template, exact=true) {
-
 		let result;
 		let collection = this.nodeGroupsAttachedAvailable;
 
@@ -1776,41 +1952,23 @@ class ExprPath {
 
 				// Update this close match with the new expression values.
 				result.applyExprs(template.exprs);
-				result.exactKey = template.getExactKey(); // TODO: Should this be set elsewhere?
+				result.exactKey = template.getExactKey();
 			}
 		}
 
-		if (!result)
+		if (!result) {
 			result = new NodeGroup(template, this);
+			result.applyExprs(template.exprs);
+			result.exactKey = template.getExactKey();
+		}
+
 
-		// old:
 		this.nodeGroupsRendered.push(result);
 
 		/*#IFDEV*/assert(result.parentPath);/*#ENDIF*/
 		return result;
 	}
 
-	/**
-	 * TODO: Rename this to nodeGroupsInUse, nodeGroupsAvialableAttached and nodeGroupsAvailableDetached?
-	 * Nodes that have been used during the current render().
-	 * Used with getNodeGroup() and freeNodeGroups().
-	 * TODO: Use an array of WeakRef so the gc can collect them?
-	 * TODO: Put items back in nodeGroupsInUse after applyExpr() is called, not before.
-	 * @type {NodeGroup[]} */
-	nodeGroupsRendered = [];
-
-	/**
-	 * Nodes that were added to the web component during the last render(), but are available to be used again.
-	 * Used with getNodeGroup() and freeNodeGroups().
-	 * Each NodeGroup is here twice, once under an exact key, and once under the close key.
-	 * @type {MultiValueMap<key:string, value:NodeGroup>} */
-	nodeGroupsAttachedAvailable = new MultiValueMap();
-
-	/**
-	 * Nodes that were not added to the web component during the last render(), and available to be used again.
-	 * @type {MultiValueMap} */
-	nodeGroupsDetachedAvailable = new MultiValueMap();
-
 
 	/**
 	 * Move everything from this.nodeGroupsRendered to this.nodeGroupsAttached and nodeGroupsDetached.
@@ -1840,6 +1998,42 @@ class ExprPath {
 		this.nodeGroupsRendered = [];
 	}
 
+
+
+	/**
+	 * If not for watch.js, this could be moved to PathToNodes.js
+	 * @return {(Node|HTMLElement)[]} */
+	getNodes() {
+
+		// Why doesn't this work?
+		// let result2 = [];
+		// for (let ng of this.nodeGroups)
+		// 	result2.push(...ng.getNodes())
+		// return result2;
+
+		let result;
+
+		// This shaves about 5ms off the partialUpdate benchmark.
+		result = this.nodesCache;
+		if (result) {
+			//#IFDEV
+			//this.checkNodesCache();
+			//#ENDIF
+			return result
+		}
+
+		result = [];
+		let current = this.nodeBefore.nextSibling;
+		let nodeMarker = this.nodeMarker;
+		while (current && current !== nodeMarker) {
+			result.push(current);
+			current = current.nextSibling;
+		}
+
+		this.nodesCache = result;
+		return result;
+	}
+
 	//#IFDEV
 
 	get debug() {
@@ -1864,176 +2058,160 @@ class ExprPath {
 		return result;
 	}
 
-	verify() {
-		if (!window.verify)
-			return;
+	checkNodesCache() {
+		return;
+	}
+	//#ENDIF
+}
+
+class PathToComponent extends Path {
 
-		assert(this.type!==ExprPathType.Content || this.nodeBefore);
-		assert(this.type!==ExprPathType.Content || this.nodeBefore.parentNode);
+	/** @type {PathToAttribValue[]} Paths to dynamics attributes that will be set on the component.*/
+	attribPaths;
 
-		// Need either nodeMarker or parentNode
-		assert(this.nodeMarker);
+	constructor(nodeBefore, nodeMarker) {
+		super(null, nodeMarker);
+	}
 
-		// nodeMarker must be attached.
-		assert(!this.nodeMarker || this.nodeMarker.parentNode);
+	/**
+	 * 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[][].
+	 * Because here we're receiving an array of arrays of expressions, one for each dynamic attribute.
+	 * @param freeNodeGroups {boolean} Used only by watch.js.
+	 * @param changed {boolean} True if the exprs have changed since the last time render() was called.*/
+	apply(exprs, freeNodeGroups=true, changed=true) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		assert(!exprs.length || Array.isArray(exprs[0]));
+		//#ENDIF
 
-		// nodeBefore and nodeMarker must have same parent.
-		assert(this.type!==ExprPathType.Content || this.nodeBefore.parentNode === this.nodeMarker.parentNode);
+		//#IFDEV
+		assert(exprs.length === this.attribPaths.length);
+		//#ENDIF
 
-		assert(this.nodeBefore !== this.nodeMarker);
-		assert(this.type!==ExprPathType.Content|| !this.nodeBefore.parentNode || this.nodeBefore.compareDocumentPosition(this.nodeMarker) === Node.DOCUMENT_POSITION_FOLLOWING);
+		let el = this.nodeMarker;
 
-		// Detect cyclic parent and grandparent references.
-		assert(this.parentNg?.parentPath !== this);
-		assert(this.parentNg?.parentPath?.parentNg?.parentPath !== this);
-		assert(this.parentNg?.parentPath?.parentNg?.parentPath?.parentNg?.parentPath !== this);
+		// 1. Attributes
+		let attribs = Util.attribsToObject(el, '_is');
+		for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
+			let name = Util.dashesToCamel(attribPath.attrName);
+			attribs[name] = attribPath.getValue(exprs[i]);
+		}
 
-		for (let ng of this.nodeGroups)
-			ng.verify();
+		// 2. Instantiate component on first time.
+		let isAttrib = el.getAttribute('_is');
+		if (el.tagName.endsWith('-SOLARITE-PLACEHOLDER') || isAttrib) {
 
-		// Make sure the nodesCache matches the nodes.
-		this.checkNodesCache();
-	}
 
-	checkNodesCache() {
-		return;
-	}
-	//#ENDIF
-}
+			// 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.`);
 
-/** @enum {int} */
-const ExprPathType = {
-	/** Child of a node */
-	Content: 1, // TODO: Rename to Nodes
+			Globals$1.currentSlotChildren = [...el.childNodes]; // TODO: Does this need to be a stack?
+			let newEl = new Constructor(attribs);
 
-	/** One or more whole attributes */
-	AttribMultiple: 2,
+			// 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, '');
+				}
 
-	/** Value of an attribute. */
-	AttribValue: 3,
+				// If type is a non-boolean primitive, set the attribute value.
+				else if (valType==='string' || valType === 'number' || valType==='bigint')
+					newEl.setAttribute(name, val);
+			}
 
-	/** Expressions inside Html comments. */
-	Comment: 4,
 
-	/** Value of an attribute. */
-	Event: 5,
-};
+			// 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, changed);
+
+			// 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]);
+			}
 
-/** @return {int[]} Returns indices in reverse order, because doing it that way is faster. */
-function getNodePath(node) {
-	let result = [];
-	while(true) {
-		let parent = node.parentNode;
-		if (!parent)
-			break;
-		result.push(Array.prototype.indexOf.call(node.parentNode.childNodes, node));
-		node = parent;
-	}
-	return result;
-}
+			// 2e. Swap it to the DOM.
+			el.replaceWith(newEl);
+		}
 
-/**
- * Note that the path is backward, with the outermost element at the end.
- * @param root {HTMLElement|Document|DocumentFragment|ParentNode}
- * @param path {int[]}
- * @returns {Node|HTMLElement|HTMLStyleElement} */
-function resolveNodePath(root, path) {
-	for (let i=path.length-1; i>=0; i--)
-		root = root.childNodes[path[i]];
-	return root;
-}
-
-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};
-	}
+		// 2f. Render
+		else if (typeof el.render === 'function')
+			el.render(attribs, changed);
 
-	reset() {
-		this.state = {...this.defaultState};
-		return this.state.context;
+		Globals$1.currentSlotChildren = null;
 	}
 
 	/**
-	 * 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, oldContext:string, newContext: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();
+	 * @param newRoot {HTMLElement}
+	 * @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);
+		result.attribPaths = this.attribPaths.map(path => path.clone(newRoot, pathOffset));
 
-		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;
+		//#IFDEV
+		result.verify();
+		//#ENDIF
 
-					break;
-			}
-		}
-		onContextChange?.(html, html.length, this.state.context, null);
-		return this.state.context;
+		return result;
 	}
-}
 
-HtmlParser.Attribute = 'Attribute';
-HtmlParser.Text = 'Text';
-HtmlParser.Tag = 'Tag';
+	getExpressionCount() { return 0 }
+
+	//#IFDEV
+	verify() {
+		super.verify();
+		assert(this.nodeMarker.nodeType === Node.ELEMENT_NODE);
+		assert(this.nodeMarker.tagName.includes('-') || this.nodeMarker.hasAttribute('is') || this.nodeMarker.hasAttribute('_is'));
+		if (this.attribPaths)
+			for (let path of this.attribPaths)
+				path.verify();
+	}
+
+	//#ENDIF
+}
 
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
@@ -2048,10 +2226,10 @@ class Shell {
 	 * @type {DocumentFragment|Text} DOM parent of the shell's nodes. */
 	fragment;
 
-	/** @type {ExprPath[]} Paths to where expressions should go. */
+	/** @type {Path[]} Paths to where expressions should go. */
 	paths = [];
 
-	// Elements with events.  Not yet used.
+	// Elements with events.  Is there a reason to use this?  We already mark event Exprs in Shell.js.
 	// events = [];
 
 	/** @type {int[][]} Array of paths */
@@ -2063,14 +2241,6 @@ class Shell {
 	/** @type {int[][]} Array of paths */
 	styles = [];
 
-	/** @type {int[][]} Array of paths.  Used by activateEmbeds() to quickly find components. */
-	staticComponents = [];
-
-	/** @type {{path:int[], attribs:Record<string, string>}[]} */
-	//componentAttribs = [];
-
-
-
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
@@ -2083,6 +2253,7 @@ class Shell {
 		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]);
 			return;
@@ -2090,11 +2261,11 @@ class Shell {
 
 
 		// 1.  Add placeholders
-		let joinedHtml = Shell.addPlaceholders(html);
+		let htmlWithPlaceholders = Shell.addPlaceholders(html);
 
 		let template = Globals$1.doc.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
-		if (joinedHtml)
-			template.innerHTML = joinedHtml;
+		if (htmlWithPlaceholders)
+			template.innerHTML = htmlWithPlaceholders;
 		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;
@@ -2106,20 +2277,28 @@ class Shell {
 		const walker = Globals$1.doc.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
 		while (node = walker.nextNode()) {
 
-			// Remove previous after each iteration, so paths will still be calculated correctly.
+			// Remove previous elements after each iteration, so paths will still be calculated correctly.
 			toRemove.map(el => el.remove());
 			toRemove = [];
 			
 			// Replace attributes
 			if (node.nodeType === 1) {
-				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes as we go.
+				const hasIs = node.hasAttribute('is');
+				const isComponent = (hasIs || node.tagName.includes('-'));
+				const componentAttribPaths = [];
+
+				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes with placeholders as we go.
 
 					// Whole attribute
 					let matches = attr.name.match(/^[\ue000-\uf8ff]$/);
 					if (matches) {
-						this.paths.push(new ExprPath(null, node, ExprPathType.AttribMultiple));
+						let path = new PathToAttribs(null, node);
+						this.paths.push(path);
+						if (isComponent)
+							componentAttribPaths.push(path);
+
 						placeholdersUsed ++;
-						node.removeAttribute(matches[0]);
+						node.removeAttribute(matches[0]); // TODO: Is this necessary?
 					}
 
 					// Just the attribute value.
@@ -2127,15 +2306,41 @@ class Shell {
 						let parts = attr.value.split(/[\ue000-\uf8ff]/g);
 						if (parts.length > 1) {
 							let nonEmptyParts = (parts.length === 2 && !parts[0].length && !parts[1].length) ? null : parts;
-							let type = Util.isEvent(attr.name) ? ExprPathType.Event : ExprPathType.AttribValue;
 
-							this.paths.push(new ExprPath(null, node, type, attr.name, nonEmptyParts));
+							let path = Util.isEvent(attr.name)
+								? new PathToEvent(null, node, attr.name, nonEmptyParts)
+								: new PathToAttribValue(null, node, attr.name, nonEmptyParts);
+							path.isHtmlProperty = Util.isHtmlProp(node, attr.name);
+							this.paths.push(path);
+							if (isComponent) {
+								path.isComponentAttrib = true;
+								componentAttribPaths.push(path);
+							}
+
 							placeholdersUsed += parts.length - 1;
-							node.setAttribute(attr.name, parts.join(''));
+							try {
+								node.setAttribute(attr.name, parts.join(''));
+							}
+							catch (e) {
+								throw new Error(`Error setting attribute "${attr.name}" on node <${node.tagName}>: ${e.message}`);
+							}
 						}
 					}
 				}
+
+				// Web components
+				if (isComponent) {
+					let path = new PathToComponent(null, node);
+					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');
+					}
+				}
 			}
+
 			// Replace comment placeholders
 			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 
@@ -2145,7 +2350,7 @@ class Shell {
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
 				if (!nodeBefore) {
-					nodeBefore = Globals$1.doc.createComment('ExprPath:'+this.paths.length);
+					nodeBefore = Globals$1.doc.createComment('Path:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node);
 				}
 				/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
@@ -2161,11 +2366,11 @@ class Shell {
 				// Re-use existing comment placeholder.
 				else {
 					nodeMarker = node;
-					nodeMarker.textContent = 'ExprPathEnd:'+ this.paths.length;
+					nodeMarker.textContent = 'PathEnd:'+ this.paths.length;
 				}
 				/*#IFDEV*/assert(nodeMarker);/*#ENDIF*/
 
-				let path = new ExprPath(nodeBefore, nodeMarker, ExprPathType.Content);
+				let path = new PathToNodes(nodeBefore, nodeMarker);
 				this.paths.push(path);
 				placeholdersUsed ++;
 			}
@@ -2179,18 +2384,17 @@ class Shell {
 			// Here we look for expressions in comments.
 			// We don't actually update them dynamically, but we still add paths for them.
 			// That way the expression count still matches.
-			else if (node.nodeType === Node.COMMENT_NODE) {
+			else if (node.nodeType === 8) { // Node.COMMENT_NODE
 				let parts = node.textContent.split(/[\ue000-\uf8ff]/g);
 				for (let i=0; i<parts.length-1; i++) {
-					let path = new ExprPath(node.previousSibling, node);
-					path.type = ExprPathType.Comment;
+					let path = new Path(node.previousSibling, node);
 					this.paths.push(path);
 					placeholdersUsed ++;
 				}
 			}
 
 			// Replace comment placeholders inside script and style tags, which have become text nodes.
-			else if (node.nodeType === Node.TEXT_NODE && ['SCRIPT', 'STYLE'].includes(node.parentNode?.nodeName)) {
+			else if (node.nodeType === 3 && ['SCRIPT', 'STYLE'].includes(node.parentNode?.nodeName)) { // Node.TEXT_NODE
 				let parts = node.textContent.split(commentPlaceholder);
 				if (parts.length > 1) {
 
@@ -2203,7 +2407,7 @@ class Shell {
 					}
 
 					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new ExprPath(node.previousSibling, node, ExprPathType.Content);
+						let path = new PathToNodes(node.previousSibling, node);
 						this.paths.push(path);
 						placeholdersUsed ++;
 
@@ -2222,51 +2426,31 @@ class Shell {
 		if (placeholdersUsed !== html.length-1)
 			throw new Error(`Could not parse expressions in template.  Check for duplicate attributes or malformed html: ${html.join('${...}')}`);
 
-		// Handle solarite-placeholder's.
-
-		// 3. Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
-		// that happens in NodeGroup.applyComponentExprs()
-		for (let el of this.fragment.querySelectorAll('[is]'))
-			el.setAttribute('_is', el.getAttribute('is'));
-
 		for (let path of this.paths) {
 			if (path.nodeBefore)
 				path.nodeBeforeIndex = Array.prototype.indexOf.call(path.nodeBefore.parentNode.childNodes, path.nodeBefore);
-			path.nodeMarkerPath = getNodePath(path.nodeMarker);
 
-			// Cache so we don't have to calculate this later inside NodeGroup.applyExprs()
-			if ((path.type === ExprPathType.AttribValue || path.type === ExprPathType.Event) && path.nodeMarker.nodeType === 1 &&
-				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.isComponent = true;
-			}
+			// Must be calculated after we remove the toRemove nodes:
+			path.nodeMarkerPath = Path.get(path.nodeMarker);
+
+
 		}
 
 		this.findEmbeds();
 
+
 		/*#IFDEV*/this.verify();/*#ENDIF*/
 	}
 
 	/**
 	 * 1. Add a Unicode placeholder char for where expressions go within attributes.
 	 * 2. Add a comment placeholder for where expressions are children of other nodes.
-	 * 3. Append -solarite-placeholder to the tag names of custom components so that we can wait to instantiate them later.
+	 * 3. Append -solarite-placeholder to the tag names of custom components so that we can instantiate them later
+	 *    when we can manually call their constructors with the proper attribute and children arguments from evaluated expressions.
 	 * @param htmlChunks {string[]}
-	 * @returns {string} */
+	 * @returns {string} Html with the placeholders in place. */
 	static addPlaceholders(htmlChunks) {
-		let tokens = [];
-
-		function addToken(token, context) {
-
-			if (context === HtmlParser.Tag) {
-				// Find Solarite Components tags and append -solarite-placeholder to their tag names
-				// and give them a solarite-placeholder attribute so we can easily find them later.
-				// This way we can gather their constructor arguments and their children before we call their constructor.
-				// Later, NodeGroup.instantiateComponent() will replace them with the real components.
-				// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-				token = token.replace(/^<\/?[a-z][a-z0-9]*-[a-z0-9-]+/i, match => match + '-solarite-placeholder solarite-placeholder');
-			}
-			tokens.push(token);
-		}
+		let result = [];
 
 		let htmlParser = new HtmlParser(); // Reset the context.
 		for (let i = 0; i < htmlChunks.length; i++) {
@@ -2274,10 +2458,20 @@ class Shell {
 
 			// 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, oldContext, newContext) => {
+			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);
-					addToken(token, oldContext);
+
+					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.
+					}
+
+					result.push(token);
 				}
 				lastIndex = index;
 			});
@@ -2285,13 +2479,13 @@ class Shell {
 			// Insert placeholders
 			if (i < htmlChunks.length - 1) {
 				if (context === HtmlParser.Text)
-					tokens.push(commentPlaceholder); // Comment Placeholder. because we can't put text in between <tr> tags for example.
+					result.push(commentPlaceholder); // Comment Placeholder. because we can't put text in between <tr> tags for example.
 				else
-					tokens.push(String.fromCharCode(attribPlaceholder + i));
+					result.push(String.fromCharCode(attribPlaceholder + i));
 			}
 		}
 
-		return tokens.join('');
+		return result.join('');
 	}
 
 	/**
@@ -2303,10 +2497,10 @@ class Shell {
 	 * this.ids
 	 * this.staticComponents */
 	findEmbeds() {
-		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => getNodePath(el));
+		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => Path.get(el));
 
-		// TODO: only find styles that have ExprPaths in them?
-		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => getNodePath(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]');
 
@@ -2317,17 +2511,7 @@ class Shell {
 				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
 		}
 
-		this.ids = Array.prototype.map.call(idEls, el => getNodePath(el));
-
-		for (let el of this.fragment.querySelectorAll('*')) {
-			if (el.tagName.includes('-') || el.hasAttribute('_is'))
-
-				// Dynamic components are components that have attributes with expression values.
-				// They are created from applyExprs()
-				// But static components are created in a separate path inside the NodeGroup constructor.
-				if (!this.paths.find(path => path.nodeMarker === el))
-					this.staticComponents.push(getNodePath(el));
-		}
+		this.ids = Array.prototype.map.call(idEls, el => Path.get(el));
 	}
 
 	/**
@@ -2370,17 +2554,14 @@ const attribPlaceholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_A
  *
  * The range is determined by startNode and nodeMarker.
  * startNode - never null.  An empty text node is created before the first path if none exists.
- * nodeMarker - null if this Nodegroup is at the end of its parents' nodes.
- *
- *
- * */
+ * nodeMarker - null if this Nodegroup is at the end of its parents' nodes.*/
 class NodeGroup {
 
 	/**
 	 * @Type {RootNodeGroup} */
 	rootNg;
 
-	/** @type {ExprPath} */
+	/** @type {Path} */
 	parentPath;
 
 	/** @type {Node|HTMLElement} First node of NodeGroup. Should never be null. */
@@ -2388,10 +2569,10 @@ class NodeGroup {
 
 	/** @type {Node|HTMLElement} A node that never changes that this NodeGroup should always insert its nodes before.
 	 * An empty text node will be created to insertBefore if there's no other NodeMarker and this isn't at the last position.
-	 * TODO: But sometimes startNode and endNode point to the same node.  Document htis inconsistency. */
+	 * TODO: But sometimes startNode and endNode point to the same node.  Document this inconsistency. */
 	endNode;
 
-	/** @type {ExprPath[]} */
+	/** @type {Path[]} */
 	paths = [];
 
 	/** @type {string} Key that matches the template and the expressions. */
@@ -2411,449 +2592,280 @@ class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
-	dynamicComponents = new Set();
-	staticComponents = [];
-
 	/** @type {Template} */
 	template;
 
+	/**
+	 * Root node at the top of the hierarchy.
+	 * Should be moved to RootNodeGroup
+	 * @type {HTMLElement} */
+	root;
+
 
 	/**
 	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
+	 * Don't call applyExprs() yet to apply expressions or instantiate components yet.
 	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @param parentPath {?ExprPath} */
-	constructor(template, parentPath=null) {
+	 * @param parentPath {?Path}
+	 * @param el {?HTMLElement} Optional, pre-existing htmlElement that will be the root.
+	 * @param options {?object} Only used for RootNodeGroup */
+	constructor(template, parentPath=null, el=null, options=null) {
 		this.rootNg = parentPath?.parentNg?.rootNg || this;
 		this.parentPath = parentPath;
 
-		if (!(this instanceof RootNodeGroup)) {
-
-			let [fragment, shell] = this.populateFromTemplate(template);
-
-			if (fragment && template.exprs.length) {
-				this.updatePaths(fragment, shell.paths);
-
-				// Static web components can sometimes have children created via expressions.
-				// But calling applyExprs() will mess up the shell's path to them.
-				// So we find them first, then call instantiateStaticComponents() after their children have been created.
-				this.staticComponents = this.findStaticComponents(fragment, shell);
-
-				this.activateEmbeds(fragment, shell);
-
-				// Apply exprs
-				this.applyExprs(template.exprs);
-
-				this.instantiateStaticComponents(this.staticComponents);
-			}
-			else if (shell)
-				this.activateEmbeds(fragment, shell);
-		}
-	}
-
-	/**
-	 * Common init shared by RootNodeGroup and NodeGroup constructors.
-	 * But in a separate function because they need to do this at a different step.
-	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @returns {[DocumentFragment, Shell]} The Shell created from the template,a nd the fragment cloned from the Shell.*/
-	populateFromTemplate(template) {
 		/*#IFDEV*/assert(this.rootNg);/*#ENDIF*/
 		this.template = template;
-		this.exactKey = template.getExactKey();
 		this.closeKey = template.getCloseKey();
 
 		// If it's just a text node, skip a bunch of unnecessary steps.
 		if (template.isText) {
-			let textNode = Globals$1.doc.createTextNode(template.html[0]);
-			this.startNode = this.endNode = textNode;
-			return [];
+			this.startNode = this.endNode = Globals$1.doc.createTextNode(template.html[0]);
 		}
 
-		// Get a cached version of the parsed and instantiated html, and ExprPaths:
 		else {
-			let shell = Shell.get(template.html);
-			let fragment = shell.fragment.cloneNode(true);
+			// Get a cached version of the parsed and instantiated html, and Paths:
+			const shell = Shell.get(template.html);
+			const shellFragment = shell.fragment.cloneNode(true);
 
-			if (fragment?.nodeType === 11) { // DocumentFragment
-				let childNodes = fragment.childNodes;
-				this.startNode = childNodes[0];
-				this.endNode = childNodes[childNodes.length - 1];
-			}
-			else
-				this.startNode = this.endNode = fragment;
+			if (shellFragment.nodeType === 11) { // DocumentFragment
+				this.startNode = shellFragment.firstChild;
+				this.endNode = shellFragment.lastChild;
+			} else
+				this.startNode = this.endNode = shellFragment;
 
-			return [fragment, shell];
-		}
-	}
 
-	/**
-	 * Use the paths to insert the given expressions.
-	 * Dispatches expression handling to other functions depending on the path type.
-	 * @param exprs {(*|*[]|function|Template)[]}
-	 * @param paths {?ExprPath[]} Optional.  Only used for testing.  Normally uses this.paths.  */
-	applyExprs(exprs, paths=null) {
-		paths = paths || this.paths;
+			// Special setup for RootNodeGroup
+			if (this instanceof RootNodeGroup) {
 
-		/*#IFDEV*/
-		this.verify();/*#ENDIF*/
 
-		// Things to consider:
-		// 1. One path may use multipe expressions.  E.g. <div class="${1} ${2}">
-		// 2. One component may need to use multiple attribute paths to be instantiated.
-		// 3. We apply them in reverse order so that a <select> box has its children created from an expression
-		//    before its instantiated and its value attribute is set via an expression.
+				let startingPathDepth = 0;
+				this.options = options;
+				if (shellFragment instanceof Text) {
+					if (!el)
+						throw new Error('Cannot create a standalone text node');
 
-		let exprIndex = exprs.length - 1; // Update exprs at paths.
-		let lastComponentPathIndex;
-		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--) {
-			let prevPath = paths[i - 1];
-			let nextPath = paths[i + 1];
+					this.root = el;
+					if (shellFragment.nodeValue.length)
+						this.root.append(shellFragment);
+				}
 
-			// Get the expressions associated with this path.
-			if (path.attrValue?.length > 2) {
-				let startIndex = (exprIndex - (path.attrValue.length - 1)) + 1;
-				pathExprs[i] = exprs.slice(startIndex, exprIndex + 1); // probably doesn't allocate if the JS vm implements copy on write.
-				exprIndex -= pathExprs[i].length;
-			} else {
-				pathExprs[i] = [exprs[exprIndex]];
-				exprIndex--;
-			}
+				else {
+					if (el) {
+						this.root = el;
+
+						// Save slot
+						// 1. Globals.currentSlotChildren is set if this is called via PathToComponent.applyComponent() calls render()
+						// 2. el.childNodes is set if render() is called manually for the first time.
+						let slotChildren;
+						if (Globals$1.currentSlotChildren || el.childNodes.length) {
+							slotChildren = Globals$1.doc.createDocumentFragment();
+							slotChildren.append(...(Globals$1.currentSlotChildren || el.childNodes));
+						}
 
+						// If el should replace the root node of the fragment.
+						if (isReplaceEl(shellFragment, this.root.tagName)) {
+							this.root.append(...shellFragment.children[0].childNodes);
 
-			// TODO: Need to end and restart this block when going from one component to the next?
-			// Think of having two adjacent components.
-			// But the dynamicAttribsAdjacet test already passes.
+							// Copy attributes
+							for (let attrib of shellFragment.children[0].attributes)
+								if (!this.root.hasAttribute(attrib.name))
+									this.root.setAttribute(attrib.name, attrib.value);
 
-			// If expr is an attribute in a component:
-			// 1. Instantiate it if it hasn't already been, sending all expr's to its constructor.
-			// 2. Otherwise send them to its render function.
-			// Components with no expressions as attributes are instead activated in activateEmbeds().
-			if (path.nodeMarker !== this.rootNg.root && path.isComponent) {
+							// Go one level deeper into all of shell's paths.
+							startingPathDepth = 1;
+						}
 
-				if (!nextPath || !nextPath.isComponent || nextPath.nodeMarker !== path.nodeMarker)
-					lastComponentPathIndex = i;
-				let isFirstComponentPath = !prevPath || !prevPath.isComponent || prevPath.nodeMarker !== path.nodeMarker;
+						else {
+							let isEmpty = shellFragment.childNodes.length === 1 && shellFragment.childNodes[0].nodeType === 3 && shellFragment.childNodes[0].textContent === '';
+							if (!isEmpty)
+								this.root.append(...shellFragment.childNodes);
+						}
 
-				if (isFirstComponentPath) {
 
-					let componentProps = {};
-					for (let j=i; j<=lastComponentPathIndex; j++) {
-						let attrName = paths[j].attrName; // Util.dashesToCamel(paths[j].attrName);
-						componentProps[attrName] = pathExprs[j].length > 1 ? pathExprs[j].join('') : pathExprs[j][0];
+						// Setup slot children (deprecated)
+						if (slotChildren) {
+							// Named slots
+							for (let slot of el.querySelectorAll('slot[name]')) {
+								let name = slot.getAttribute('name');
+								if (name) {
+									let slotChildren2 = slotChildren.querySelectorAll(`[slot='${name}']`);
+									slot.append(...slotChildren2);
+								}
+							}
+							// Unnamed slots
+							let unamedSlot = el.querySelector('slot:not([name])');
+							if (unamedSlot)
+								unamedSlot.append(slotChildren);
+							// No slots
+							else
+								el.append(slotChildren);
+						}
 					}
 
-					this.handleComponent(path.nodeMarker, componentProps, true);
-
-					// Set attributes on component.
-					for (let j=i; j<=lastComponentPathIndex; j++)
-						paths[j].apply(pathExprs[j]);
-				}
-			}
-
-			// Else apply it normally
-			else
-				path.apply(pathExprs[i]);
-
-
-		} // end for(path of this.paths)
-
-
-		// TODO: Only do this if we have ExprPaths within styles?
-		this.updateStyles();
-
-		// Call render() on static web components. This makes the component.staticAttribs() test work.
-		for (let el of this.staticComponents)
-			if (el.render)
-				el.render(Util.attribsToObject(el)); // It has no expressions.
+					// 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.
+						if (onlyChild)
+							startingPathDepth = 1;
+					}
 
-		// Invalidate the nodes cache because we just changed it.
-		this.nodesCache = null;
+					// Exclude the path to ourself.  Otherwise we get infinite recursion.
+					// let paths = [...shell.paths];
+					// if (paths[0] instanceof PathToComponent)
+					// 	paths.shift();
 
-		// 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*/
-		assert(exprIndex === -1);/*#ENDIF*/
+					this.setPathsFromFragment(this.root, shell.paths, startingPathDepth);
+					this.activateEmbeds(this.root, shell, startingPathDepth);
+				}
+				this.startNode = this.endNode = this.root;
 
+				Globals$1.rootNodeGroups.set(this.root, this);
+			} // end if RootNodeGroup
 
-		/*#IFDEV*/
-		this.verify();/*#ENDIF*/
-	}
+			else if (shell) {
+				if (shell.paths.length) {
+					this.setPathsFromFragment(shellFragment, shell.paths);
+				}
 
-	/**
-	 * Unified path to ensure a child component is instantiated (if placeholder) and optionally rendered.
-	 * @param el {HTMLElement}
-	 * @param props {?Object}
-	 * @param doRender {boolean}
-	 * @return {HTMLElement} The (possibly replaced) element. */
-	handleComponent(el, props=null, doRender=true) {
-		let isPreHtmlElement = el.hasAttribute('solarite-placeholder');
-		let isPreIsElement = el.hasAttribute('_is');
-		let attribs, children;
-		if (isPreHtmlElement || isPreIsElement)
-			[el, attribs, children] = this.instantiateComponent(el, isPreHtmlElement, props);
-		if (doRender && el.render) {
-			if (!attribs) {
-				attribs = Util.attribsToObject(el);
-				for (let name in props || {})
-					attribs[Util.dashesToCamel(name)] = props[name];
-				children = el.childNodes;
+				this.activateEmbeds(shellFragment, shell);
 			}
-			el.render(attribs, children);
 		}
-		return el;
-	}
-	
-	/**
-	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
-	 * to its constructor.
-	 * This is only called by handleComponent()
-	 * This does not call render()
-	 *
-	 * @param el {HTMLElement}
-	 * @param isPreHtmlElement {?boolean} True if the element's tag name ends with -solarite-placeholder
-	 * @param props {Object} Attributes with dynamic values.
-	 * @return {[HTMLElement, attribs:Object, children:Node[]]}} */
-	instantiateComponent(el, isPreHtmlElement=undefined, props=undefined) {
-		if (isPreHtmlElement === undefined)
-			isPreHtmlElement = !el.hasAttribute('_is');
-
-		let tagName = (isPreHtmlElement
-			? el.tagName.slice(0, -21) // Remove -SOLARITE-PLACEHOLDER
-			: el.getAttribute('is')).toLowerCase();
-
-
-		// Throw if custom element isn't defined.
-		let Constructor = customElements.get(tagName);
-		if (!Constructor)
-			throw new Error(`The custom tag name ${tagName} is not registered.`)
-
-		// Pass other attribs to constructor, since otherwise they're not yet set on the element,
-		// and the constructor would otherwise have no way to see them.
-		let attribs = Util.attribsToObject(el, 'solarite-placeholder');
-		for (let name in props || {})
-			attribs[Util.dashesToCamel(name)] = props[name];
 
+		//#IFDEV
+		this.verify();
+		//#ENDIF
+	}
 
-		// Create the web component.
-		// Get the children that aren't Solarite's comment placeholders.
-		let children = [...el.childNodes].filter(node => node.nodeType !== Node.COMMENT_NODE || !node.nodeValue.startsWith('ExprPath'));
-		let newEl = new Constructor(attribs, children);
 
-		if (!isPreHtmlElement)
-			newEl.setAttribute('is', el.getAttribute('is').toLowerCase());
+	/**
+	 * Use the paths to insert the given expressions.
+	 * Dispatches expression handling to other functions depending on the path type.
+	 * @param exprs {(*|*[]|function|Template)[]}
+	 * @param changed {boolean} If true, the expr's have changed since the last time thsi function was called.
+	 * @param includeNonComponents {boolean}
+	 * We still need to call PathToComponent.apply() even if changed=false so the user can handle the rendering. */
+	applyExprs(exprs, changed=true, includeNonComponents=true) {
 
-		// Replace the placeholder tag with the instantiated web component.
-		el.replaceWith(newEl);
+		/*#IFDEV*/
+		this.verify();
+		/*#ENDIF*/
 
-		// If an id pointed at the placeholder, update it to point to the new element.
-		let id = el.getAttribute('data-id') || el.getAttribute('id');
-		if (id)
-			delve(this.getRootNode(), id.split(/\./g), newEl);
+		let paths = this.paths;
 
+		// Things to consider:
+		// 1. Paths consume a varying number of expressions.
+		//    An PathToAttribs may use multipe expressions.  E.g. <div class="${1} ${2}">
+		//    While an PathToComponent uses zero.
+		// 2. An PathToComponent references other Paths that set its attribute values.
+		// 3. We apply them in reverse order so that a <select> box has its children created from an expression
+		//    before its instantiated and its value attribute is set via an expression.
+		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())
+				continue;
 
-		// Update paths to use replaced element.
-		for (let path of this.paths) {
-			if (path.nodeMarker === el)
-				path.nodeMarker = newEl;
-			if (path.nodeBefore === el)
-				path.nodeBefore = newEl;
-		}
-		if (this.startNode === el)
-			this.startNode = newEl;
-		if (this.endNode === el)
-			this.endNode = newEl;
-
-		// This is used only if inheriting from the Solarite class.
-		// applyComponentExprs() is called because we're rendering.
-		// So we want to render the sub-component also.
-		if (newEl.renderFirstTime)
-			newEl.renderFirstTime();
-
-		// Copy attributes over.
-		for (let attrib of el.attributes)
-			if (attrib.name !== '_is' && attrib.name !== 'solarite-placeholder')
-				newEl.setAttribute(attrib.name, attrib.value);
-
-		// Set dynamic attributes if they are primitive types.
-		for (let name in props) {
-			let val = props[name];
-			if (typeof val === 'boolean') {
-				if (val !== false && val !== undefined && val !== null)
-					newEl.setAttribute(name, '');
+			// Get the expressions associated with this path.
+			let exprCount = path.getExpressionCount();
+			pathExprs[i] = exprs.slice(exprIndex-exprCount, exprIndex); // slice() probably doesn't allocate if the JS vm implements copy on write.
+			exprIndex -= exprCount;
+
+			// Component expressions don't have a corresponding user-provided expression.
+			// 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, true, changed);
 			}
-
-			// If type is a non-boolean primitive, set the attribute value.
-			else if (['number', 'bigint', 'string'].includes(typeof val))
-				newEl.setAttribute(name, val);
-		}
-
-		return [newEl, attribs, children];
-	}
-
-	/**
-	 * Get all the nodes inclusive between startNode and endNode.
-	 * TODO: when not using nodesCache, could this use less memory with yield?
-	 * But we'd need to save the reference to the next Node in case it's removed.
-	 * @return {(Node|HTMLElement)[]} */
-	getNodes() {
-		// applyExprs() invalidates this cache.
-		let result = this.nodesCache;
-		if (result) // This does speed up the partialUpdate benchmark by 10-15%.
-			return result;
-
-		result = [];
-		let current = this.startNode;
-		let afterLast = this.endNode?.nextSibling;
-		while (current && current !== afterLast) {
-			result.push(current);
-			current = current.nextSibling;
+			else if (includeNonComponents)
+				path.apply(pathExprs[i]);
 		}
 
-		this.nodesCache = result;
-		return result;
-	}
-
-	getParentNode() {
-		return this.startNode?.parentNode
-	}
+		// 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*/
+		assert(exprIndex === 0);
+		/*#ENDIF*/
 
-	/**
-	 * Get the root element of the NodeGroup's RootNodeGroup.
-	 * @returns {HTMLElement|DocumentFragment} */
-	getRootNode() {
-		return this.rootNg.root;
-	}
 
-	/**
-	 * @returns {RootNodeGroup} */
-	getRootNodeGroup() {
-		return this.rootNg;
-	}
+		if (includeNonComponents) {
 
-	/**
-	 * Requires the nodeCache to be present. */
-	removeAndSaveOrphans() {
-		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
-		let fragment = Globals$1.doc.createDocumentFragment();
-		for (let node of this.getNodes())
-			fragment.append(node);
-	}
+			// TODO: Only do this if we have Paths within styles?
+			this.updateStyles();
 
+			// Invalidate the nodes cache because we just changed it.
+			this.nodesCache = null;
 
-	/**
-	 * @param fragment {DocumentFragment}
-	 * @param paths
-	 * @param startingPathDepth {int} */
-	updatePaths(fragment, paths, startingPathDepth) {
-		let pathLength = paths.length;
-		this.paths.length = pathLength;
-		for (let i=0; i<pathLength; i++) {
-			let path = paths[i].clone(fragment, startingPathDepth);
-			path.parentNg = this;
-			this.paths[i] = path;
 		}
-	}
 
-	updateStyles() {
-		if (this.styles)
-			for (let [style, oldText] of this.styles) {
-				let newText = style.textContent;
-				if (oldText !== newText)
-					Util.bindStyles(style, this.getRootNodeGroup().root);
-			}
+		/*#IFDEV*/
+		this.verify();
+		/*#ENDIF*/
 	}
 
-	//#IFDEV
-	/**
-	 * @deprecated
-	 * An interleaved array of sets of nodes and top-level ExprPaths
-	 * @type {(Node|HTMLElement|ExprPath)[]} */
-	get nodes() { throw new Error('')};
-
-	get debug() {
-		return [
-			`parentNode: ${this.parentNode?.tagName?.toLowerCase()}`,
-			'nodes:',
-			...setIndent(this.getNodes().map(item => {
-				if (item?.nodeType) {
-
-					let tree = nodeToArrayTree(item, nextNode => {
-
-						let path = this.paths.find(path=>path.type === ExprPathType.Content && path.getNodes().includes(nextNode));
-						if (path)
-							return [`Path.nodes:`]
-
-						return [];
-					});
+	// TODO: Give it a better name.
+	applyExprs2(exprs) {
 
-					// TODO: How to indend nodes belonging to a path vs those that just occur after the path?
-					return flattenAndIndent(tree)
-				}
-				else if (item instanceof ExprPath)
-					return setIndent(item.debug, 1)
-			}).flat(), 1)
-		]
 	}
 
-	get debugNodes() { return this.getNodes() }
-
-
-	get debugNodesHtml() { return this.getNodes().map(n => n.outerHTML || n.textContent) }
-
-	verify() {
-		if (!window.verify)
-			return;
-
-		assert(this.startNode);
-		assert(this.endNode);
-		//assert(this.startNode !== this.endNode) // This can be true.
-		assert(this.startNode.parentNode === this.endNode.parentNode);
-
-		// Only if connected:
-		assert(!this.startNode.parentNode || this.startNode === this.endNode || this.startNode.compareDocumentPosition(this.endNode) === Node.DOCUMENT_POSITION_FOLLOWING);
-
-		// if (this.parentPath)
-		// 	assert(this.parentPath.nodeGroups.includes(this));
-
-		for (let path of this.paths) {
-			assert(path.parentNg === this);
+	/**
+	 * Get all the nodes inclusive between startNode and endNode.
+	 * TODO: when not using nodesCache, could this use less memory with yield?
+	 * But we'd need to save the reference to the next Node in case it's removed.
+	 * @return {(Node|HTMLElement)[]} */
+	getNodes() {
+		// applyExprs() invalidates this cache.
+		let result = this.nodesCache;
+		if (result) // This does speed up the partialUpdate benchmark by 10-15%.
+			return result;
 
-			// Fails for detached NodeGroups.
-			// NodeGroups get detached when their nodes are removed by udomdiff()
-			let parentNode = this.getParentNode();
-			if (parentNode)
-				assert(this.getParentNode().contains(path.getParentNode()));
-			path.verify();
-			// TODO: Make sure path nodes are all within our own node range.
+		result = [];
+		let current = this.startNode;
+		let afterLast = this.endNode?.nextSibling;
+		while (current && current !== afterLast) {
+			result.push(current);
+			current = current.nextSibling;
 		}
-		return true;
+
+		this.nodesCache = result;
+		return result;
 	}
-	//#ENDIF
 
-	findStaticComponents(root, shell, startingPathDepth=0) {
-		let result = [];
+	/**
+	 * Get the root element of the NodeGroup's RootNodeGroup.
+	 * @returns {HTMLElement|DocumentFragment} */
+	getRootNode() {
+		return this.rootNg.root;
+	}
 
-		// static components.  These are WebComponents that do not have any constructor arguments that are expressions.
-		// Those are instead created by applyExpr() which calls applyComponentExprs() which calls instantiateComponent().
-		// Maybe someday these two paths will be merged?
-		// Must happen before ids because instantiateComponent will replace the element.
-		for (let path of shell.staticComponents) {
-			if (startingPathDepth)
-				path = path.slice(0, -startingPathDepth);
-			let el = resolveNodePath(root, path);
+	/**
+	 * @returns {RootNodeGroup} */
+	getRootNodeGroup() {
+		return this.rootNg;
+	}
 
-			// Shell doesn't know if a web component is the pseudoRoot so we have to detect it here.
-			// Recreating it is necessary so we can pass the constructor args to it.
-			if (root !== el/* && !isReplaceEl(root, el)*/) // TODO: is isReplaceEl necessary?
-				result.push(el);
+	/**
+	 * Copy paths in fragment to this.paths.
+	 * @param fragment {DocumentFragment|HTMLElement}
+	 * @param paths
+	 * @param startingPathDepth {int} */
+	setPathsFromFragment(fragment, paths, startingPathDepth=0) {
+		let pathLength = paths.length; // For faster iteration
+		this.paths.length = pathLength;
+		for (let i=0; i<pathLength; i++) {
+			let path = paths[i].clone(fragment, startingPathDepth);
+			path.parentNg = this;
+			this.paths[i] = path;
 		}
-		return result;
 	}
 
-	instantiateStaticComponents(staticComponents) {
-		// TODO: Why do we not call render() on the static component here?  The tests pass either way.
-		for (let i in staticComponents)
-			staticComponents[i] = this.handleComponent(staticComponents[i], null, false);
+	updateStyles() {
+		if (this.styles)
+			for (let [style, oldText] of this.styles) {
+				let newText = style.textContent;
+				if (oldText !== newText)
+					Util.bindStyles(style, this.getRootNodeGroup().root);
+			}
 	}
 
 	/**
@@ -2871,7 +2883,7 @@ class NodeGroup {
 				for (let path of shell.ids) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
-					let el = resolveNodePath(root, path);
+					let el = Path.resolve(root, path);
 					Util.bindId(rootEl, el);
 				}
 			}
@@ -2885,7 +2897,7 @@ class NodeGroup {
 						path = path.slice(0, -pathOffset);
 
 					/** @type {HTMLStyleElement} */
-					let style = resolveNodePath(root, path);
+					let style = Path.resolve(root, path);
 					if (rootEl.nodeType === 1) {
 						Util.bindStyles(style, rootEl);
 						this.styles.set(style, style.textContent);
@@ -2898,141 +2910,82 @@ class NodeGroup {
 				for (let path of shell.scripts) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
-					let script = resolveNodePath(root, path);
+					let script = Path.resolve(root, path);
 					eval(script.textContent);
 				}
 			}
 		}
 	}
-}
-
-class RootNodeGroup extends NodeGroup {
-
-	/**
-	 * Root node at the top of the hierarchy.
-	 * @type {HTMLElement} */
-	root;
-
-	/**
-	 * When we call renerWatched() we re-render these expressions, then clear this to a new Map()
-	 * @type {Map<ExprPath, ValueOp|WholeArrayOp|ArraySpliceOp[]>} */
-	exprsToRender = new Map();
-
-	/**
-	 * @param template {Template}
-	 * @param el {?HTMLElement} Optional, pre-existing htmlElement tat will be the root.
-	 * @param options {?object} */
-	constructor(template, el, options) {
-		super(template);
-
-		this.options = options;
-
-		let [fragment, shell] = this.populateFromTemplate(template);
-
-		let startingPathDepth = 0;
-
-
-		if (fragment instanceof Text) {
-
-			if (el) {
-				this.startNode = el;
-				this.endNode = el;
-				if (fragment.nodeValue.length)
-					el.append(fragment);
-				this.root = el;
-			}
-			else
-				throw new Error('Cannot create a standalone text node');
-			Globals$1.nodeGroups.set(this.root, this);
-		}
-
-
-		else {
 
-			// If adding NodeGroup to an element.
-			if (el) {
-				this.root = el;
+	//#IFDEV
+	getParentNode() {
+		return this.startNode?.parentNode
+	}
 
-				// Save slot children
-				let slotChildren;
-				if (el.childNodes.length) {
-					slotChildren = Globals$1.doc.createDocumentFragment();
-					slotChildren.append(...el.childNodes);
-				}
+	get debug() {
+		return [
+			`parentNode: ${this.parentNode?.tagName?.toLowerCase()}`,
+			'nodes:',
+			...setIndent$1(this.getNodes().map(item => {
+				if (item?.nodeType) {
 
-				// If el should replace the root node of the fragment.
-				if (isReplaceEl(fragment, el)) {
-					el.append(...fragment.children[0].childNodes);
+					let tree = nodeToArrayTree(item, nextNode => {
 
-					// Copy attributes
-					for (let attrib of fragment.children[0].attributes)
-						if (!el.hasAttribute(attrib.name) && attrib.name !== 'solarite-placeholder')
-							el.setAttribute(attrib.name, attrib.value);
+						let path = this.paths.find(path=>(path instanceof PathToNodes) && path.getNodes().includes(nextNode));
+						if (path)
+							return [`Path.nodes:`]
 
-					// Go one level deeper into all of shell's paths.
-					startingPathDepth = 1;
-				}
+						return [];
+					});
 
-				else {
-					let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
-					if (!isEmpty)
-						el.append(...fragment.childNodes);
+					// TODO: How to indend nodes belonging to a path vs those that just occur after the path?
+					return flattenAndIndent(tree)
 				}
+				else if (item instanceof Path)
+					return setIndent$1(item.debug, 1)
+			}).flat(), 1)
+		]
+	}
 
-				// Setup children
-				if (slotChildren) {
-
-					// Named slots
-					for (let slot of el.querySelectorAll('slot[name]')) {
-						let name = slot.getAttribute('name');
-						if (name) {
-							let slotChildren2 = slotChildren.querySelectorAll(`[slot='${name}']`);
-							slot.append(...slotChildren2);
-						}
-					}
-
-					// Unnamed slots
-					let unamedSlot = el.querySelector('slot:not([name])');
-					if (unamedSlot)
-						unamedSlot.append(slotChildren);
+	get debugNodes() { return this.getNodes() }
 
-					// No slots
-					else
-						el.append(slotChildren);
-				}
 
-				this.startNode = el;
-				this.endNode = el;
-			}
+	get debugNodesHtml() { return this.getNodes().map(n => n.outerHTML || n.textContent) }
 
-			// Instantiate as a standalone element.
-			else {
-				let singleEl = getSingleEl(fragment);
-				this.root = singleEl || fragment; // We return the whole fragment when calling h() with a collection of nodes.
+	verify() {
+		if (!window.verify)
+			return;
 
-				if (singleEl)
-					startingPathDepth = 1;
-			}
-			Globals$1.nodeGroups.set(this.root, this);
-			this.updatePaths(this.root, shell.paths, startingPathDepth);
+		assert(this.startNode);
+		assert(this.endNode);
+		//assert(this.startNode !== this.endNode) // This can be true.
+		assert(this.startNode.parentNode === this.endNode.parentNode);
 
-			// Static web components can sometimes have children created via expressions.
-			// But calling applyExprs() will mess up the shell's path to them.
-			// So we find them first, then call activateStaticComponents() after their children have been created.
-			this.staticComponents = this.findStaticComponents(this.root, shell, startingPathDepth);
+		// Only if connected:
+		assert(!this.startNode.parentNode || this.startNode === this.endNode || this.startNode.compareDocumentPosition(this.endNode) === Node.DOCUMENT_POSITION_FOLLOWING);
 
-			this.activateEmbeds(this.root, shell, startingPathDepth);
+		// if (this.parentPath)
+		// 	assert(this.parentPath.nodeGroups.includes(this));
 
-			// Apply exprs
-			this.applyExprs(template.exprs);
+		for (let path of this.paths) {
+			assert(path.parentNg === this);
 
-			this.instantiateStaticComponents(this.staticComponents);
+			// Fails for detached NodeGroups.
+			// NodeGroups get detached when their nodes are removed by udomdiff()
+			let parentNode = this.getParentNode();
+			if (parentNode)
+				assert(this.getParentNode().contains(path.getParentNode()));
+			path.verify();
+			// TODO: Make sure path nodes are all within our own node range.
 		}
-
-
+		return true;
 	}
+	//#ENDIF
 }
 
+
+
+
 function getSingleEl(fragment) {
 	let nonempty = [];
 	for (let n of fragment.childNodes) {
@@ -3048,12 +3001,19 @@ function getSingleEl(fragment) {
 /**
  * Does the fragment have one child that's an element matching the tagname of el?
  * @param fragment {DocumentFragment}
- * @param el {HTMLElement}
+ * @param tagName {string}
  * @returns {boolean} */
-function isReplaceEl(fragment, el) {
+function isReplaceEl(fragment, tagName) {
 	return fragment.children.length===1
-		&& el.tagName.includes('-') // TODO: Check for solarite-placeholder attribute instead?
-		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
+		&& tagName.includes('-')
+		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === tagName;
+}
+
+class RootNodeGroup extends NodeGroup {
+
+	// Used only by watch.js
+	exprsToRender;
+
 }
 
 /**
@@ -3062,23 +3022,27 @@ function isReplaceEl(fragment, el) {
  * Although the reference to the html strings is shared among templates. */
 class Template {
 
-	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
-	exprs = []
+	/** @type {Expr[]} Evaulated expressions.  */
+	'exprs' = []
 
 	/** @type {string[]} */
-	html = [];
+	'html' = [];
 
 	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
 
+	closeKey;
+	exactKey;
+
 	isText;
 
 	/**
 	 *
 	 * @param htmlStrings {string[]}
 	 * @param exprs {*[]} */
-	constructor(htmlStrings, exprs) {
+	constructor(htmlStrings=[''], exprs=[]) {
 		this.html = htmlStrings;
+
 		this.exprs = exprs;
 
 		//this.trace = new Error().stack.split(/\n/g)
@@ -3102,51 +3066,50 @@ class Template {
 	 * Called by JSON.serialize when it encounters a Template.
 	 * This prevents the hashed version from being too large. */
 	toJSON() {
-		if (!this.hashedFields)
+		if (this.hashedFields===undefined)
 			this.hashedFields = [getObjectId(this.html), this.exprs];
 
 		return this.hashedFields
 	}
 
 	/**
-	 * Render the main template, which may indirectly call renderTemplate() to create children.
-	 * @param el {HTMLElement}
+	 * Render the main (root) template.
+	 * @param el {?HTMLElement} Null if we're rendering to a standalone element.
 	 * @param options {RenderOptions}
 	 * @return {?DocumentFragment|HTMLElement} */
-	render(el=null, options={}) {
-		let ng;
-		let standalone = !el;
-		let firstTime = false;
-
-		// Rendering a standalone element.
-		// TODO: figure out when to not use RootNodeGroup
-		if (standalone) {
-			ng = new RootNodeGroup(this, null, options);
-			el = ng.getRootNode();
-			Globals$1.nodeGroups.set(el, ng); // Why was this commented out?
-			firstTime = true;
+	'render'(el=null, options={}) {
+
+
+
+		let ng = el && Globals$1.rootNodeGroups.get(el);
+		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!
 		}
-		else {
-			ng = Globals$1.nodeGroups.get(el);
-			if (!ng) {
-				ng = new RootNodeGroup(this, el, options);
-				Globals$1.nodeGroups.set(el, ng); // Why was this commented out?
-				firstTime = true;
-			}
 
-			// This can happen if we try manually rendering one template to a NodeGroup that was created expecting a different template.
-			// These don't always have the same length, for example if one attribute has multiple expressions.
-			if (ng.paths.length === 0 && this.exprs.length || ng.paths.length > this.exprs.length)
-				throw new Error(`Solarite Error:  Parent HTMLElement ${ng.template.html.join('${...}')} and ${ng.paths.length} \${value} placeholders can't accomodate a Template with ${this.exprs.length} values.`);		}
+		// Make sure the expresion count matches match the Path "hole" count.
+		// This can happen if we try manually rendering one template to a NodeGroup that was created expecting a different template.
+		// These don't always have the same length, for example if one attribute has multiple expressions.
+		// if (ng.paths.length === 0 && this.exprs.length || ng.paths.length > this.exprs.length)
+		// 	throw new Error(
+		// 		`Solarite Error:  Parent HTMLElement ${ng.template.html.join('${...}')} and ${ng.paths.length} \${value} ` +
+		// 		`placeholders can't accomodate a Template with ${this.exprs.length} values.`);
 
 		// Creating the root nodegroup also renders it.
 		// If we didn't just create it, we need to render it.
-		if (!firstTime) {
-			if (this.html?.length === 1 && !this.html[0])
-				el.innerHTML = ''; // Fast path for empty component.
-			else {
-				ng.applyExprs(this.exprs);
-			}
+		if (this.html?.length === 1 && !this.html[0]) // An empty string.
+			el.innerHTML = ''; // Fast path for empty component.
+		else {
+
+			let oldKey = ng.exactKey;
+			let newKey = this.getExactKey();
+			ng.applyExprs(this.exprs, oldKey !== newKey);
+			ng.exactKey = newKey;
+
+			//if (firstTime)
+			//	ng.instantiateStaticComponents(ng.staticComponents);
 		}
 
 		ng.exprsToRender = new Map();
@@ -3154,7 +3117,7 @@ class Template {
 	}
 
 	getExactKey() {
-		if (!this.exactKey) {
+		if (this.exactKey===undefined) {
 			if (this.exprs.length)
 				this.exactKey = getObjectHash(this);// calls this.toJSON().
 			else // Don't hash plain html.
@@ -3165,7 +3128,7 @@ class Template {
 
 	getCloseKey() {
 		//console.log(this.exprs.length)
-		if (!this.closeKey) {
+		if (this.closeKey===undefined) {
 			if (this.exprs.length)
 				this.closeKey = /*'@' + */this.toJSON()[0];
 			else
@@ -3326,11 +3289,11 @@ const addChild = (template, html, exprs) => {
 /**
  * Convert a template, string, or object into a DOM Node or Element
  *
- * 1. h('Hello');                      // Create single text node.
- * 2. h('<b>Hello</b>');               // Create single HTMLElement
- * 3. h('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 4. h(template)                      // Render Template created by h`<html>` or h();
- * 5. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
+ * 1. toEl('Hello');                      // Create single text node.
+ * 2. toEl('<b>Hello</b>');               // Create single HTMLElement
+ * 3. toEl('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
+ * 4. toEl(template)                      // Render Template created by h`<html>` or h();
+ * 5. toEl({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
  * @param arg {string|Template|{render:()=>void}}
  * @returns {Node|DocumentFragment|HTMLElement} */
 function toEl(arg) {
@@ -3339,7 +3302,7 @@ function toEl(arg) {
 		let html = arg;
 
 		// If it's an element with whitespace before or after it, trim both ends.
-		if (html.match(/^\s^</) || html.match(/>\s+$/))
+		if (html.match(/^\s^<\S+/) || html.match(/\S+>\s+$/))
 			html = html.trim();
 
 		// We create a new one each time because otherwise
@@ -3397,7 +3360,6 @@ function toEl(arg) {
 	}
 
 	throw new Error('toEl() does not support argument of type: ' + (arg ? typeof arg : arg));
-
 }
 
 
@@ -3410,7 +3372,7 @@ let renderF = 'render';
  * Using h() as a function() will always create a DOM element.
  *
  * Features beyond what standard js tagged template strings do:
- * 1. r`` sub-expressions
+ * 1. h`` sub-expressions
  * 2. functions, nodes, and arrays of nodes as sub-expressions.
  * 3. html-escape all expressions by default, unless wrapped in h()
  * 4. event binding
@@ -3428,7 +3390,7 @@ let renderF = 'render';
  *
  * Add children to an element.
  * 3. h(el, h`<b>${'Hi'}</b>`, ?options)
- * 4. h(el, ?options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
+ * 4. h(el, ?options)`<b>${'Hi'}</b>`   // typical path used in render(). Create template and render its nodes to el.
  *
  * Create top-level element
  * 5. h()`Hello<b>${'World'}!</b>`
@@ -3436,10 +3398,10 @@ let renderF = 'render';
  * 6. h(string, object, ...)           // Used for JSX
  * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
  * @param exprs {*[]|string|Template|Object}
- * @return {Node|HTMLElement|Template} */
+ * @return {Node|HTMLElement|Template|Function} */
 function h(htmlStrings=undefined, ...exprs) {
 
-	// 1. Tagged template
+	// 1. Tagged template: h`<div>...</div>`
 	if (Array.isArray(arguments[0])) {
 		return new Template(arguments[0], exprs);
 	}
@@ -3457,11 +3419,10 @@ function h(htmlStrings=undefined, ...exprs) {
 			return Template.fromJsx(tag, props, children);
 		}
 
-		// 2b. Plain html string => template
+		// 2b. Plain html string => template: h('<div>...</div>')
 		else {
 			let html = tagOrHtml;
-			// If it starts with whitespace, trim both ends.
-			// TODO: Also trim if it ends with whitespace?
+			// If it starts with whitespace and then a tag, trim it.
 			if (html.match(/^\s^</))
 				html = html.trim();
 			return new Template([html], []);
@@ -3470,44 +3431,43 @@ function h(htmlStrings=undefined, ...exprs) {
 
 	else if (arguments[0] instanceof HTMLElement || arguments[0] instanceof DocumentFragment) {
 
-		// 3. Render template to element.
+		// 3. Render template to element: h(el, template)
 		if (arguments[1] instanceof Template) {
 
 			/** @type Template */
 			let template = arguments[1];
 			let parent = arguments[0];
-			let options = arguments[2]; // deprecated?
+			let options = arguments[2];
 			template.render(parent, options);
 		}
 
-		// 4. Render tagged template to element
+		// 4. Render tagged template to element: h(el)`<div>...</div>`
 		else {
 			let parent = arguments[0], options = arguments[1];
 
-			// Remove shadowroot.  TODO: This could mess up paths?
+			// Remove shadowroot if present.  TODO: This could mess up paths?
 			if (parent.shadowRoot)
 				parent.innerHTML = '';
 
 			// Return a tagged template function that applies the tagged template to parent.
-			let taggedTemplate = (htmlStrings, ...exprs) => {
+			let renderTemplate = (htmlStrings, ...exprs) => {
 				Globals$1.rendered.add(parent);
 				let template = new Template(htmlStrings, exprs);
 				return template.render(parent, options);
 			};
-			return taggedTemplate;
+			return renderTemplate;
 		}
 	}
 
-	// 5. Create a static element  h()'<div></div>' (Deprecated?)
+	// 5. Create a static element: h()`<div></div>`
 	else if (!arguments.length) {
 		return (htmlStrings, ...exprs) => {
-				let template = h(htmlStrings, ...exprs);
-				return toEl(template); // Go to path 6.
-			}
+			let template = h(htmlStrings, ...exprs);
+			return toEl(template);
+		}
 	}
 
-	// 6. Help toEl() with objects.
-	// Special rebound render path, called by normal path.
+	// 6. Help toEl() with objects: h(this)`<div>...</div>` inside an object's render()
 	// Intercepts the main h(this)`...` function call inside render().
 	// TODO: This path doesn't handle embeds like data-id="..."
 	else if (typeof arguments[0] === 'object' && Globals$1.objToEl.has(arguments[0])) {
@@ -3523,7 +3483,7 @@ function h(htmlStrings=undefined, ...exprs) {
 			Globals$1.objToEl.set(obj, el);
 		}
 
-		// h(this)`<div>...</div>
+		// h(this)`<div>...</div>`
 		else
 			return function(...args) {
 				let template = h(...args);
@@ -3531,15 +3491,20 @@ function h(htmlStrings=undefined, ...exprs) {
 				Globals$1.objToEl.set(obj, el);
 			}.bind(obj);
 	}
+	// TODO: Handle other primitive types?
+	else if (Util.isFalsy(arguments[0]))
+		return new Template();
+
 	else
 		throw new Error('h() does not support argument of type: ' + (arguments[0] ? typeof arguments[0] : arguments[0]))
 }
 
 /**
+ * @deprecated Inherit from Solarite and pass arribs to super() instead.
  * There are three ways to create an instance of a Solarite Component:
- * 1.  new ComponentName();                                         // direct class instantiation
- * 2.  this.html = r`<div><component-name></component-name></div>;  // as a child of another RedComponent.
- * 3.  <body><component-name></component-name></body>               // in the Document html.
+ * 1.  new ComponentName(3);                                               // direct class instantiation
+ * 2.  h(this)`<div><component-name user-id=${3}></component-name></div>;  // as a child of another Component.
+ * 3.  <body><component-name user-id="3"></component-name></body>          // in the Document html.
  *
  * When created via #3, Solarite has no way to pass attributes as arguments to the constructor.  So to make
  * sure we get the correct value via all three paths, we write our constructors according to the following
@@ -3547,40 +3512,38 @@ function h(htmlStrings=undefined, ...exprs) {
  * Browsers make all html attribute names lowercase.
  *
  * @example
- * constructor({name, userid=1}={}) {
+ * constructor({name, userId=1}={}) {
  *     super();
  *
  *     // Get value from "name" attriute if persent, otherwise from name constructor arg.
  *     this.name = getArg(this, 'name', name);
  *
  *     // Optionally convert the value to an integer.
- *     this.userId = getArg(this, 'userid', userid, ArgType.Int);
+ *     this.userId = getArg(this, 'user-id', userId, ArgType.Int);
  * }
  *
  * @param el {HTMLElement}
  * @param attributeName {string} Attribute name.  Not case-sensitive.
- * @param defaultValue {*} Default value to use if attribute doesn't exist.
+ * @param defaultValue {*} Default value to use if attribute doesn't exist.  Typically the argument from the constructor.
  * @param type {ArgType|function|Class|*[]}
  *     If an array, use the value if it's in the array, otherwise return undefined.
  *     If it's a function, pass the value to the function and return the result.
- * @param fallback {*} If the defaultValue is undefiend and type can't be parsed as the given type, use this value.
- *     TODO: Should this be merged with the defaultValue argument?
- * @return {*} Undefined if attribute isn't set.  */
-function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String, fallback=undefined) {
+ * @return {*} Undefined if attribute isn't set and there's no defaultValue, or if the value couldn't be parsed as the type.  */
+function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String) {
 	let val = defaultValue;
 	let attrVal = el.getAttribute(attributeName) || el.getAttribute(Util.camelToDashes(attributeName));
 	if (attrVal !== null) // If attribute doesn't exist.
 		val = attrVal;
-		
+
 	if (Array.isArray(type))
-		return type.includes(val) ? val : fallback;
-	
+		return type.includes(val) ? val : undefined;
+
 	if (typeof type === 'function') {
 		return type.constructor
 			? new type(val) // arg type is custom Class
 			: type(val); // arg type is custom function
 	}
-	
+
 	// If bool, it's true as long as it exists and its value isn't falsey.
 	if (type===ArgType.Bool) {
 		let lAttrVal = typeof val === 'string' ? val.toLowerCase() : val;
@@ -3588,20 +3551,17 @@ function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String,
 			return false;
 		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
 			return true;
-		return fallback;
+		return undefined;
 	}
-	
+
 	// Attribute doesn't exist
-	let result;
 	switch (type) {
 		case ArgType.Int:
-			result = parseInt(val);
-			return isNaN(result) ? fallback : result;
+			return parseInt(val);
 		case ArgType.Float:
-			result = parseFloat(val);
-			return isNaN(result) ? fallback : result;
+			return parseFloat(val);
 		case ArgType.String:
-			return [undefined, null, false].includes(val) ? '' : val+'';
+			return [undefined, null, false].includes(val) ? '' : (val+'');
 		case ArgType.Json:
 		case ArgType.Eval:
 			if (typeof val === 'string' && val.length)
@@ -3623,6 +3583,7 @@ function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String,
 
 
 /**
+ * @deprecated for Solarite.getAttribs()
  * Experimental.  Set multiple arguments/attributes all at once.
  * @param el {HTMLElement}
  * @param args {Record<string, any>}
@@ -3631,6 +3592,10 @@ function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String,
  * @example
  * constructor({user, path}={}) {
  *     setArgs(this, arguments[0], {user: User, path: ArgType.String});
+ *
+ *     // Equivalent to:
+ *     this.user = getArg(this, user, 'user', User); // or new User(user);
+ *     this.path = getArg(this, path, 'path', ArgType.String);
  * }
  */
 function setArgs(el, args, types) {
@@ -3640,15 +3605,16 @@ function setArgs(el, args, types) {
 
 
 /**
+ * @deprecated
  * @enum */
 var ArgType = {
-	
+
 	/**
 	 * false, 0, null, undefined, '0', and 'false' (case-insensitive) become false.
 	 * Anything else, including empty string becomes true.
 	 * Empty string is true because attributes with no value should be evaulated as true. */
 	Bool: 'Bool',
-	
+
 	Int: 'Int',
 	Float: 'Float',
 	String: 'String',
@@ -3667,177 +3633,258 @@ var ArgType = {
 	Eval: 'Eval'
 };
 
-function defineClass(Class, tagName, extendsTag) {
-	if (!customElements[getName](Class)) { // If not previously defined.
-		tagName = tagName || Util.camelToDashes(Class.name);
-		if (!tagName.includes('-'))
-			tagName += '-element';
+/*
+┏┓  ┓    •
+┗┓┏┓┃┏┓┏┓┓╋▗▖
+┗┛┗┛┗┗┻╹ ╹╹┗
+JavasCript UI library
+@license MIT
+@copyright Vorticode LLC
+https://vorticode.github.io/solarite/ */
+function t(html) {
+	return new Template([html], []);
+}
+
+/**
+ * Intercept the construct call to auto-define the class before the constructor is called. */
+let HTMLElementAutoDefine = new Proxy(HTMLElement, {
+	construct(Parent, args, Class) {
 
-		let options = null;
-		if (extendsTag)
-			options = {extends: extendsTag};
+		// 1. Call customElements.define() automatically.
+		Util.defineClass(Class);
 
-		customElements[define](tagName, Class, options);
+		// 2. This line is equivalent the to super() call to HTMLElement:
+		return Reflect.construct(Parent, args, Class);
 	}
-}
+});
 
 /**
- * Create a version of the Solarite class that extends from the given tag name.
- * Reasons to inherit from this instead of HTMLElement.  None of these are all that useful.
+ * Solarite provides more features if your web component extends Solarite instead of HTMLElement.
+ *
+ * Reasons to inherit from Solarite instead of HTMLElement.
  * 1.  customElements.define() is called automatically when you create the first instance.
  * 2.  Calls render() when added to the DOM, if it hasn't been called already.
- * 3.  Child elements are added before constructor is called.  But they're also passed to the constructor. (deprecated?)
- * 4.  We can use this.html = r`...` to set html. (deprecated)
- * 5.  We have the onConnect, onFirstConnect, and onDisconnect methods.
- *     Can't figure out how to have these work standalone though, and still be synchronous.
- * 6.  Can we extend from other element types like TR?
- * 7.  Shows default text if render() function isn't defined.
+ * 3.  Populates the attribs argument to the constructor when instantiated from regular html outside a template string.
+ *         It parses JSON from DOM attribute values surrouned with '${...}'
+ * 4.  Shows an error if render() isn't defined.
  *
  * Advantages to inheriting from HTMLElement
- * 1.  Minimization won't break when it renames the Class and we call customElements.define() on the wrong name.
- * 2.  We can inherit from things like HTMLTableRowElement directly.
- * 3.  There's less magic, since everyone is familiar with defining custom elements.
- *
- * @param extendsTag {?string}
- * @return {Class} */
-function createSolarite(extendsTag=null) {
+ * 1.  We can inherit from things like HTMLTableRowElement directly.
+ * 2.  There's less magic, since everyone is familiar with defining custom elements.
+ * 3.  No confusion about how the class name becomes a tag name.
+ * @extends {HTMLElement} */
+class Solarite extends HTMLElementAutoDefine {
+
+	/**
+	 * @param attribs {?Record<string, any>} */
+	constructor(attribs=null) {
+		super();
+
+		if (attribs) {
+			if (typeof attribs !== 'object')
+				throw new Error('First argument to custom element constructor must be an object.');
+
+			// 1. Populate attribs if it's an empty object.
+			if (attribs && !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];
+			//	}
+			//}
+		}
+
+		// 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);
+		// }
+	}
 
-	let BaseClass = HTMLElement;
-	if (extendsTag && !extendsTag.includes('-')) {
-		extendsTag = extendsTag.toLowerCase();
+	'render'() {
+		throw new Error('render() is not defined for ' + this.constructor.name);
+	}
 
-		BaseClass = Globals$1.elementClasses[extendsTag];
-		if (!BaseClass) { // TODO: Use Cache
-			BaseClass = Globals$1.doc.createElement(extendsTag).constructor;
-			Globals$1.elementClasses[extendsTag] = BaseClass;
+	/**
+	 * Call render() only if it hasn't already been called.	 */
+	'renderFirstTime'() {
+		if (!Globals$1.rendered.has(this)) {
+			let attribs = Solarite.getAttribs(this);
+			this.render(attribs); // calls Globals.rendered.add(this); inside the call to h()'...'.
 		}
 	}
 
 	/**
-	 * Intercept the construct call to auto-define the class before the constructor is called.
-	 * @type {HTMLElement} */
-	let HTMLElementAutoDefine = new Proxy(BaseClass, {
-		construct(Parent, args, Class) {
-			defineClass(Class, null, extendsTag);
+	 * Called automatically by the browser. */
+	'connectedCallback'() { // quoted so terser doesn't remove it.
+		this.renderFirstTime();
+	}
 
-			// This is a good place to manipulate any args before they're sent to the constructor.
-			// Such as loading them from attributes, if I could find a way to do so.
+	static 'define'(tagName=null) {
+		Util.defineClass(this, tagName);
+	}
 
-			// This line is equivalent the to super() call.
-			return Reflect.construct(Parent, args, Class);
+	static 'getAttribs'(el) {
+		let result = Util.attribsToObject(el);
+		for (let name in result) {
+			let val = result[name];
+			if (val.startsWith('${') && val.endsWith('}'))
+				result[name] = JSON.parse(val.slice(2, -1));
 		}
-	});
+		return result;
+	}
 
-	return class Solarite extends HTMLElementAutoDefine {
-		
-		
-		/**
-		 * TODO: Make these standalone functions.
-		 * Callbacks.
-		 * Use onConnect.push(() => ...); to add new callbacks. */
-		onConnect;
-		
-		onFirstConnect;
-		onDisconnect;
 
-		/**
-		 * @param options {RenderOptions} */
-		constructor(options={}) {
-			super();
-
-			// TODO: Is options.render ever used?
-			if (options.render===true)
-				this.render();
-
-			else if (options.render===false)
-				Globals$1.rendered.add(this); // Don't render on connectedCallback()
-
-			// Add slot children before constructor code executes.
-			// This breaks the styleStaticNested test.
-			// PendingChildren is setup in NodeGroup.instantiateComponent()
-			// TODO: Match named slots.
-			//let ch = Globals.pendingChildren.pop();
-			//if (ch) // TODO: how could there be a slot before render is called?
-			//	(this.querySelector('slot') || this).append(...ch);
-
-			/** @deprecated
-			Object.defineProperty(this, 'html', {
-				set(html) {
-					Globals.rendered.add(this);
-					if (typeof html === 'string') {
-						console.warn("Assigning to this.html without the r template prefix.")
-						this.innerHTML = html;
-					}
-					else
-						this.modifications = h(this, html, options);
+	// TODO: Do we want to use this to get the tag name from the render() function, instead of having the user define it?
+	/**
+	 * Get the tag name for a class, as defined by the tag used in render().
+	 *
+	 * This will parse the JavaScript code of the render() function to find the tag name.
+	 * It will itarage every character, keeping track of quotes and comments so it can
+	 * skip them until it finds the tag name passed to h(this)`<tagname>` inside the render() function.
+	 *
+	 * */
+	/*
+	static getTagName(Class) {
+		let code = Class.prototype.render.toString();
+		let i = 0;
+		while (i < code.length) {
+			let char = code[i];
+			let next = code[i + 1];
+
+			// Skip single line comments
+			if (char === '/' && next === '/') {
+				i = code.indexOf('\n', i);
+				if (i === -1) break;
+				continue;
+			}
+			// Skip multi-line comments
+			if (char === '/' && next === '*') {
+				i = code.indexOf('*'+'/', i + 2);
+				if (i === -1) break;
+				i += 2;
+				continue;
+			}
+			// Skip strings and template literals
+			if (char === "'" || char === '"' || char === '`') {
+				let quote = char;
+				i++;
+				while (i < code.length) {
+					if (code[i] === '\\') i += 2;
+					else if (code[i] === quote) { i++; break; }
+					else i++;
 				}
-			})*/
-
-			/*
-			let pthis = new Proxy(this, {
-				get(obj, prop) {
-					return Reflect.get(obj, prop)
+				continue;
+			}
+			// Skip regex literals (simple heuristic)
+			if (char === '/') {
+				let prev = code.slice(Math.max(0, i - 10), i).trim();
+				// If / is preceded by something that indicates an operator or start of expression
+				if (/[=(,;:[!&|?]$|return$|yield$|case$/.test(prev)) {
+					i++;
+					while (i < code.length) {
+						if (code[i] === '\\') i += 2;
+						else if (code[i] === '[') { // Skip character classes
+							i++;
+							while (i < code.length && code[i] !== ']') {
+								if (code[i] === '\\') i += 2;
+								else i++;
+							}
+							i++;
+						}
+						else if (code[i] === '/') { i++; break; }
+						else i++;
+					}
+					continue;
 				}
-			});
-			this.render = this.render.bind(pthis);
-			*/
-		}
-
-		/**
-		 * Call render() only if it hasn't already been called.	 */
-		renderFirstTime() {
-			if (!Globals$1.rendered.has(this) && this.render)
-				this.render();
-		}
-		
-		/**
-		 * Called automatically by the browser. */
-		connectedCallback() {
-			this.renderFirstTime();
-			if (!Globals$1.connected.has(this)) {
-				Globals$1.connected.add(this);
-				if (this.onFirstConnect)
-					this.onFirstConnect();
 			}
-			if (this.onConnect)
-				this.onConnect();
-		}
-		
-		disconnectedCallback() {
-			if (this.onDisconnect)
-				this.onDisconnect();
-		}
+			// Check for h(this)`
+			if (char === 'h' && code.slice(i, i + 8) === 'h(this)`') {
+				i += 8;
+				// We are now inside the template literal.
+				// Skip whitespace and HTML comments
+				while (i < code.length) {
+					// Skip JS template literal end (shouldn't happen before tag, but for safety)
+					if (code[i] === '`') return null;
+
+					// Skip whitespace
+					if (/\s/.test(code[i])) { i++; continue; }
+
+					// Skip HTML comments <!-- ... -->
+					if (code.slice(i, i + 4) === '<!--') {
+						i = code.indexOf('-->', i + 4);
+						if (i === -1) return null;
+						i += 3;
+						continue;
+					}
 
+					// Find the first tag
+					if (code[i] === '<') {
+						let start = ++i;
+						while (i < code.length && /[a-zA-Z0-9-]/.test(code[i])) i++;
+						return code.slice(start, i);
+					}
 
-		static define(tagName=null) {
-			defineClass(this, tagName, extendsTag);
+					// If we encounter anything else (like text before a tag),
+					// we can keep looking or return null depending on how strict we want to be.
+					// For now, let's just skip non-tag characters.
+					i++;
+				}
+			}
+			i++;
 		}
+		return null;
 	}
+	*/
 }
 
-// Trick to prevent minifier from renaming this method.
-let define = 'define';
-let getName = 'getName';
-
-/*
-┏┓  ┓    •
-┗┓┏┓┃┏┓┏┓┓╋▗▖
-┗┛┗┛┗┗┻╹ ╹╹┗
-JavasCript UI library
-@license MIT
-@copyright Vorticode LLC
-https://vorticode.github.io/solarite/ */
 
 /**
- * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
- * @type {Node|Class<HTMLElement>|function(tagName:string):Node|Class<HTMLElement>} */
-const Solarite = new Proxy(createSolarite(), {
-	apply(self, _, args) {
-		return createSolarite(...args)
+ * Assign fields from `src` to `dest` if they exist in `dest` and their names are not in the `ignore` list.
+ * When a value in `src` is a string and the existing value in `dest` is a boolean, number, or Date,
+ * it will be converted to that type.
+ * This is often used in class constructors that accept an object of arguments.
+ * @param {object} dest
+ * @param {?object} src
+ * @param {string[]} [ignore=[]] */
+function assignFields(dest, src, ignore=[]) {
+	for (let name in src || {}) {
+		if (name in dest && !ignore.includes(name)) {
+			const descriptor = Object.getOwnPropertyDescriptor(dest, name)
+				|| Object.getOwnPropertyDescriptor(Object.getPrototypeOf(dest), name); // Also find (parent?) setters.  Is this necssary?
+			if (!descriptor || descriptor.writable || descriptor.set) {
+				let srcVal = src[name];
+				let destVal = dest[name];
+				if (typeof src[name] === 'string') {
+					if (typeof destVal === 'boolean') // empty string (when an attribute is present with no value) is true
+						dest[name] = ![false, 'false', 0, '0'].includes(srcVal);
+					else if (typeof destVal === 'number')
+						dest[name] = Number(srcVal);
+					else if (destVal instanceof Date) {
+						dest[name] = new Date(srcVal); // TODO: read it as UTC 0 by default.
+					}
+					else
+						dest[name] = srcVal;
+				}
+				else
+					dest[name] = srcVal;
+			}
+		}
 	}
-});
-
-//export {default as watch, renderWatched} from './watch.js'; // unfinished
+}
 
 export default h;
-export { ArgType, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, getArg, h, h as r, setArgs, toEl };
+export { ArgType, Globals$1 as Globals, HtmlParser, NodeGroup, Shell, Solarite, Util as SolariteUtil, Template, assignFields, delve, getArg, h, h as r, setArgs, t, toEl };