solarite 0.3.2 → 0.5.0

package/dist/Solarite.js

@@ -1,4 +1,7 @@
-
+/*@__NO_SIDE_EFFECTS__*/
+function assert(val) {
+	
+}
 
 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();
@@ -11,8 +14,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;
@@ -22,7 +25,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
@@ -50,26 +54,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) {
@@ -95,23 +100,27 @@ var Globals;
 function reset() {
 	Globals = {
 
-		/**
-		 * Used by NodeGroup.applyComponentExprs() */
-		componentArgsHash: new WeakMap(),
-
 		/**
 		 * 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} The global document. */
+		doc: document,
+
 		/**
 		 * @type {Record<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
 		elementClasses: {},
@@ -120,33 +129,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 r() path 9. */
+		 * Used by h() path 9. */
 		objToEl: new WeakMap(),
 
-		//pendingChildren: [],
-
-
 		/**
-		 * Elements that have been rendered to by r() at least once.
+		 * 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 r() function.
-		 * @type {WeakSet<HTMLElement>} */
-		rendering: new WeakSet(),
-
 		/**
 		 * Map from array of Html strings to a Shell created from them.
 		 * @type {WeakMap<string[], Shell>} */
@@ -155,13 +156,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();
@@ -230,12 +229,27 @@ let Util = {
 		return true; // the same.
 	},
 
+	/**
+	 * 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} */
+	attribsToObject(el, ignore=null) {
+		let result = {};
+		for (let attrib of el.attributes)
+			if (attrib.name !== ignore)
+				result[Util.dashesToCamel(attrib.name)] = attrib.value;
+		return result;
+	},
+
 	bindId(root, el) {
 		let id = el.getAttribute('data-id') || el.getAttribute('id');
 		if (id) { // If something hasn't removed the id.
 
 			// Don't allow overwriting existing class properties if they already have a non-Node value.
-			if (root[id] && !(root[id] instanceof Node))
+			if (root[id] && !(root[id]?.nodeType))
 				throw new Error(`${root.constructor.name}.${id} already has a value.  ` +
 					`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
 
@@ -244,26 +258,50 @@ let Util = {
 	},
 
 	/**
+	 * If the style tab has a global attribute:
+	 * 1.  Put it in the document head as <style data-style="tag-name">...</style>
+	 * 2.  Replace the :host {...} CSS selector as tag-name {...}.
+	 * Otherwise keep it where it is and:
+	 * 1.  Add data-style="1" attribute to the root element.
+	 * 2.  Replace the :host {...} selector in the style as tag-name[data-style='1'] {...}
 	 * @param style {HTMLStyleElement}
 	 * @param root {HTMLElement} */
 	bindStyles(style, root) {
-		let styleId = root.getAttribute('data-style');
-		if (!styleId) {
-			// Keep track of one style id for each class.
-			// TODO: Put this outside the class in a map, so it doesn't conflict with static properties.
-			if (!root.constructor.styleId)
-				root.constructor.styleId = 1;
-			styleId = root.constructor.styleId++;
 
-			root.setAttribute('data-style', styleId);
+		let tagName = root.tagName.toLowerCase();
+		let styleId, attribSelector;
+
+		if (style.hasAttribute('global') || style.hasAttribute('data-global')) {
+			styleId = tagName;
+			attribSelector = '';
+			let doc = Globals$1.doc || root.ownerDocument || document;
+			if (!doc.head.querySelector(`style[data-style="${styleId}"]`)) {
+				doc.head.append(style);
+				style.setAttribute('data-style', styleId);
+			}
+			else // TODO: Make sure the style has no expressions.
+				style.remove(); // already in the head.
+		}
+		else {
+			let styleId = root.getAttribute('data-style');
+			if (!styleId) {
+				// Keep track of one style id for each class.
+				// TODO: Put this outside the class in a map, so it doesn't conflict with static properties.
+				if (!root.constructor.styleId)
+					root.constructor.styleId = 1;
+				styleId = root.constructor.styleId++;
+
+				root.setAttribute('data-style', styleId);
+			}
+
+			attribSelector = `[data-style="${styleId}"]`;
 		}
 
 		// Replace ":host" with "tagName[data-style=...]" in the css.
-		let tagName = root.tagName.toLowerCase();
 		for (let child of style.childNodes) {
 			if (child.nodeType === 3) {
 				let oldText = child.textContent;
-				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}[data-style="${styleId}"]`);
+				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}${attribSelector}`);
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
@@ -310,48 +348,18 @@ 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.
-	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
+	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLElement}
 	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
 	getInputValue(node) {
 		// .type is a built-in DOM property
@@ -365,6 +373,8 @@ let Util = {
 			return node.valueAsDate; // Date Object
 		if (node.type === 'select-multiple') // <select multiple>
 			return [...node.selectedOptions].map(option => option.value); // Array of Strings
+		if (node.hasAttribute('contenteditable'))
+			return node.innerHTML;
 
 		return node.value; // String
 	},
@@ -435,7 +445,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 */
@@ -449,6 +459,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.
@@ -477,168 +492,699 @@ let Util = {
 
 
 
+// Trick to prevent minifier from renaming these methods.
+let define = 'define';
+let getName = 'getName';
+
+
+
 // For debugging only
 
 
-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;
+		
 	}
 
 	/**
-	 * 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.
+			
+			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) {
+		
 
-		// 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.
+			
+			root = root.childNodes[path[i]];
 		}
+		let childNodes = root.childNodes;
 
-		// Delete a specific value.
-		else {
-			set.delete(val);
-			result = val;
-		}
+		nodeMarker = pathLength
+			? childNodes[path[0]]
+			: newRoot;
+		if (this.nodeBefore) {
+			
+			nodeBefore = childNodes[this.nodeBeforeIndex];
 
-		if (set.size === 0)
-			delete data[key];
+		}
 
-		return result;
-	}
+		let result = new this.constructor(nodeBefore, nodeMarker, this.attrName, this.attrValue);
 
-	/**
-	 * 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;
+		result.isComponentAttrib = this.isComponentAttrib;
 
-		[result] = set; // Does the same as above and seems to be about the same speed.
-		set.delete(result);
+		// TODO: Put this in PathToAttribValue.clone().
+		result.isHtmlProperty = this.isHtmlProperty;
 
-		if (set.size === 0)
-			delete data[key];
+		
 
 		return result;
 	}
 
-	deleteSpecific(key, val) {
-		let data = this.data;
-		let result;
-		let set = data[key];
-		if (!set)
-			return undefined;
-
-		set.delete(val);
-		result = val;
-
-		if (set.size === 0)
-			delete data[key];
+	// Only used for watch.js
+	getNodes() {
+		return [this.nodeMarker];
+	}
 
+	/** @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;
 	}
 
-	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;
+	/**
+	 * 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;
 	}
+
+	
 }
 
-/**
- * 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) => {
-	
+	reset() {
+		this.state = {...this.defaultState};
+		return this.state.context;
+	}
 
-	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)
+	/**
+	 * Parse the next chunk of html, starting with the same context we left off with from the previous chunk.
+	 * @param html {string}
+	 * @param onContextChange {?function(html:string, index:int, prevContext:string, nextContext:string)}
+	 *     Called every time the context changes, and again at the last context.
+	 * @return {('Attribute','Text','Tag')} The context at the end of html.  */
+	parse(html, onContextChange=null) {
+		if (html === null)
+			return this.reset();
+
+		for (let i = 0; i < html.length; i++) {
+			const char = html[i];
+			switch (this.state.context) {
+				case HtmlParser.Text:
+					if (char === '<' && html[i + 1].match(/[/a-z!]/i)) { // Start of a tag or comment.
+						onContextChange?.(html, i, this.state.context, HtmlParser.Tag);
+						this.state.context = HtmlParser.Tag;
+						this.state.buffer = '';
+					}
+					break;
+				case HtmlParser.Tag:
+					if (char === '>') {
+						onContextChange?.(html, i+1, this.state.context, HtmlParser.Text);
+						this.state.context = HtmlParser.Text;
+						this.state.quote = null;
+						this.state.buffer = '';
+					}
+					else if (char === ' ' && !this.state.buffer) {
+						// No attribute name is present. Skipping the space.
+						continue;
+					}
+					else if (char === ' ' || char === '/' || char === '?') {
+						this.state.buffer = ''; // Reset the buffer when a delimiter or potential self-closing sign is found.
+					}
+					else if (char === '"' || char === "'" || char === '=') {
+						onContextChange?.(html, i, this.state.context, HtmlParser.Attribute);
+						this.state.context = HtmlParser.Attribute;
+						this.state.quote = char === '=' ? null : char;
+						this.state.buffer = '';
+					}
+					else
+						this.state.buffer += char;
+					break;
+				case HtmlParser.Attribute:
+					// Start an attribute quote.
+					if (!this.state.quote && !this.state.buffer.length && (char === '"' || char === "'")) {
+						this.state.quote = char;
+					}
+					else if (char === this.state.quote || (!this.state.quote && this.state.buffer.length)) {
+						onContextChange?.(html, i, this.state.context, HtmlParser.Tag);
+						this.state.context = HtmlParser.Tag;
+						this.state.quote = null;
+						this.state.buffer = '';
+					}
+					else if (!this.state.quote && char === '>') {
+						onContextChange?.(html, i+1, this.state.context, HtmlParser.Text);
+						this.state.context = HtmlParser.Text;
+						this.state.quote = null;
+						this.state.buffer = '';
+					}
+					else if (char !== ' ')
+						this.state.buffer += char;
+
+					break;
+			}
+		}
+		onContextChange?.(html, html.length, this.state.context, null);
+		return this.state.context;
+	}
+}
+
+HtmlParser.Attribute = 'Attribute';
+HtmlParser.Text = 'Text';
+HtmlParser.Tag = 'Tag';
+
+class PathToAttribValue extends Path {
+
+	/** @type {?string} Used only if type=AttribType.Value. */
+	attrName;
+
+	/**
+	 * @type {?string[]} Used only if type=AttribType.Value. If null, use one expr to set the whole attribute value. */
+	attrValue;
+
+	isHtmlProperty;
+
+	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
+		super(null, nodeMarker);
+		this.attrName = attrName;
+		this.attrValue = attrValue;
+	}
+
+	/**
+	 * Set the value of an attribute.  This can be for any attribute, not just attributes named "value".
+	 * @param exprs {Expr[]} */
+	apply(exprs) {
+		
+
+		let node = this.nodeMarker;
+		let expr = exprs[0];
+
+		let multiple = this.attrValue;
+
+		// 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)) {
+
+			// 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)];
+
+			if (!obj)
+				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
+
+			let value = delve(obj, path);
+
+			// Special case to allow setting select-multiple value from an array
+			if (this.attrName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
+				// 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;
+
+				// 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;
+				}
+			}
+
+			// 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);
+			};
+
+			// 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);
+		}
+
+		// Regular attribute
+		else {
+			// Cache this on Path.isHtmlProperty when Shell creates the props.
+			// Have Path.clone() copy .isHtmlProperty?
+			let isProp = this.isHtmlProperty;
+
+			// Values to toggle an attribute
+			if (!multiple) {
+				Globals$1.currentPath = this; // Used by watch()
+				if (typeof expr === 'function') {
+					if (this.isComponentAttrib)
+						return;
+
+					this.watchFunction = expr; // The function that gets the expression, used for renderWatched()
+					expr = expr();
+				}
+				else
+					expr = Util.makePrimitive(expr);
+				Globals$1.currentPath = 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, '');
+			}
+
+			// A non-toggled attribute
+			else {
+
+				// 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
+
+				// 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) {
+
+					// <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;
+
+						// 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;
+					}
+
+					// TODO: Putting an 'else' here would be more performant
+					node.setAttribute(this.attrName, joinedValue);
+				}
+			}
+		}
+	}
+
+
+	getExpressionCount() { return this.attrValue ? this.attrValue.length-1 : 1 }
+
+	/**
+	 * @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) {
+
+		
+		//if (!Array.isArray(exprs))
+		//	return exprs;
+
+		if (!this.attrValue) {// If it's not multiple paths inside a single attribute, return first (and only) expression.
+			
+			return exprs[0];
+		}
+
+		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);
+			}
+		}
+		return result.join('')
+	}
+
+	/**
+	 * 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);
+
+		if (typeof func !== 'function')
+			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
+
+		// If function has changed, remove and rebind the event.
+		if (nodeEvent[0] !== func) {
+
+			// 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 originalFunc = func;
+
+			// 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);
+			};
+
+			// 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;
+
+			node.addEventListener(eventName, boundFunc, capture);
+
+			// 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)
+		}
+
+		//  Otherwise just update the args to the function.
+		nodeEvents[key][2] = args;
+	}
+}
+
+// TODO: Merge this into PathToAttribValue?
+class PathToEvent extends PathToAttribValue {
+
+	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) {
+		
+
+		// Don't bind events to component placeholders.
+		// PathToComponent will do the binding later when it instantiates the component.
+		if (this.isComponentAttrib && this.nodeMarker.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
+			return;
+
+		let expr = exprs[0];
+		let root = this.parentNg.rootNg.root;
+
+		
+
+		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) {
+		
+
+		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
@@ -648,8 +1194,6 @@ const udomdiff = (parentNode, a, b, before) => {
 				let aNode = a[aStart];
 				if (!map || !map.has(aNode)) {
 					parentNode.removeChild(aNode);
-
-					
 				}
 				aStart++;
 			}
@@ -686,13 +1230,10 @@ const udomdiff = (parentNode, a, b, before) => {
 				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].
@@ -740,8 +1281,6 @@ const udomdiff = (parentNode, a, b, before) => {
 						while (bStart < index) {
 							let bNode = b[bStart++];
 							parentNode.insertBefore(bNode, node);
-
-							
 						}
 					}
 						// if the effort wasn't good enough, fallback to a replace,
@@ -754,8 +1293,6 @@ const udomdiff = (parentNode, a, b, before) => {
 							bNode,
 							aNode
 						);
-
-						
 					}
 				}
 				// otherwise move the source forward, 'cause there's nothing to do
@@ -768,153 +1305,165 @@ const udomdiff = (parentNode, a, b, before) => {
 			else {
 				let aNode = a[aStart++];
 				parentNode.removeChild(aNode);
-
-				
 			}
 		}
 	}
-	return b;
-};
-
-//import {ArraySpliceOp} from "./watch.js";
-
+	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);
+	}
 
-/**
- * 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 {
+	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] || [];
+	}
 
 	/**
-	 * @type {ExprPathType} */
-	type;
+	 * 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;
 
-	// Used for attributes:
+		// Delete any value.
+		if (val === undefined) {
+			[result] = set; //  Get the first value from the set.
+			set.delete(result);
+		}
 
-	/** @type {?string} Used only if type=AttribType.Value. */
-	attrName;
+		// Delete a specific value.
+		else {
+			set.delete(val);
+			result = val;
+		}
 
-	/**
-	 * @type {?string[]} Used only if type=AttribType.Value. If null, use one expr to set the whole attribute value. */
-	attrValue;
+		if (set.size === 0)
+			delete data[key];
 
-	/**
-	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
-	attrNames;
+		return result;
+	}
 
 	/**
-	 * @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;
+	 * 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;
 
-	/**
-	 * 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;
+		[result] = set; // Get the first value from the set.
+		set.delete(result);
 
+		if (set.size === 0)
+			delete data[key];
 
-	// These are set after an expression is assigned:
+		return result;
+	}
 
-	/** @type {NodeGroup} */
-	parentNg;
+	deleteSpecific(key, val) {
+		let data = this.data;
+		let result;
+		let set = data[key];
+		if (!set)
+			return undefined;
 
-	/** @type {NodeGroup[]} */
-	nodeGroups = [];
+		set.delete(val);
+		result = val;
 
+		if (set.size === 0)
+			delete data[key];
 
-	// Caches to make things faster
+		return result;
+	}
 
-	/**
-	 * @private
-	 * @type {Node[]} Cached result of getNodes() */
-	nodesCache;
+	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 {
 
-	/**
-	 * @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} 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;
 
 
-	/** @type {?function} A function called by renderWatched() to update the value of this expression. */
-	watchFunction
 
 	/**
-	 * @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
-
-	isHtmlProperty = undefined;
+	 * 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 = [];
 
 	/**
-	 * @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 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();
-	}
+	 * 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();
 
 	/**
-	 * 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 5: // PathType.Comment:
-				// Expressions inside Html comments.  Deliberately empty because we won't waste time updating them.
-				break;
-			case 6: // PathType.Event:
-				this.applyEventAttrib(this.nodeMarker, exprs[0], this.parentNg.rootNg.root);
-				break;
-			default: // TODO: Is this still used?  Lots of tests fail without it.
-				// One attribute value may have multiple expressions.  Here we apply them all at once.
-				this.applyValueAttrib(this.nodeMarker, exprs);
-				break;
-		}
+	 * Nodes that were not added to the web component during the last render(), and available to be used again.
+	 * @type {MultiValueMap} */
+	nodeGroupsDetachedAvailable = new MultiValueMap();
+
+	constructor(nodeBefore, nodeMarker) {
+		super(nodeBefore, nodeMarker);
 	}
 
 	/**
 	 * Insert/replace the nodes created by a single expression.
 	 * Called by applyExprs()
-	 * This function is recursive, as the functions it calls also call it.
-	 * @param expr {Expr}
+	 * 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. */
-	applyNodes(expr, freeNodeGroups=true) {
+	apply(exprs, freeNodeGroups=true) {
+		
+
 		let path = this;
+		let expr = exprs[0];
 
 		// This can be done at the beginning or the end of this function.
 		// If at the end, we may get rendering done faster.
@@ -944,7 +1493,6 @@ class ExprPath {
 		if (secondPass.length) {
 			for (let [nodesIndex, ngIndex] of secondPass) {
 				let ng = path.getNodeGroup(newNodes[nodesIndex], false);
-
 				let ngNodes = ng.getNodes();
 
 				
@@ -965,11 +1513,8 @@ class ExprPath {
 
 		
 
-
-
 		let oldNodes = path.getNodes();
 
-
 		// This pre-check makes it a few percent faster?
 		let same = Util.arraySame(oldNodes, newNodes);
 		if (!same) {
@@ -981,195 +1526,71 @@ class ExprPath {
 
 			// Fast clear method
 			let isNowEmpty = oldNodes.length && !newNodes.length;
-			if (!isNowEmpty || !path.fastClear())
-
-				// Rearrange nodes.
-				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
-
-			// 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)
-					ng.removeAndSaveOrphans();
-
-			// Instantiate components created within ${...} expressions.
-			// Embedded style tags are handled elsewhere, but where?
-			for (let el of newNodes) {
-				if (el instanceof HTMLElement) {
-					if (el.hasAttribute('solarite-placeholder'))
-						this.parentNg.instantiateComponent(el);
-					for (let child of el.querySelectorAll('[solarite-placeholder]'))
-						this.parentNg.instantiateComponent(child);
-				}
-			}
-		}
-
-
-		
-	}
-
-	/**
-	 * Used by watch() for inserting/removing/replacing individual loop items.
-	 * @param op {ArraySpliceOp} */
-	applyArrayOp(op) {
-
-		// 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.
-
-			// Try to find an exact match
-			let func = this.mapCallback || this.watchFunction;
-			let expr = func(op.items[i]);
-
-			// 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 ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
-				if (ng && ng === oldNg) ; else {
-
-					// 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?
-
-					// Splice in the new nodes.
-					let insertBefore = oldNg.startNode;
-					for (let node of ng.getNodes())
-						insertBefore.parentNode.insertBefore(node, insertBefore);
-
-					// Remove the old nodes.
-					if (ng !== oldNg)
-						oldNg.removeAndSaveOrphans();
-				}
-			});
-		}
-
-		// 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);
-		}
-
-		// Add extra at the end.
-		else {
-			let newItems = op.items.slice(replaceCount);
-
-			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.
-
-
-				// 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);
-
-				// Splice in the new nodes.
-				for (let node of ng.getNodes())
-					insertBefore.parentNode.insertBefore(node, insertBefore);
-			}
-		}
-
-		
-
-		// TODO: update or invalidate the nodes cache?
-		this.nodesCache = null;
-	}
-
-	/**
-	 * 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);
+			if (!isNowEmpty || !path.fastClear()) {
 
-		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()
+				// Rearrange nodes.
+				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
+			}
 
-			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;
+			// 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);
 
-			this.exprToTemplates(expr, callback);
+			for (let ng of oldNodeGroups)
+				if (!ng.startNode.parentNode)
+					Util.saveOrphans(ng.getNodes());
 		}
 
-		// String/Number/Date/Boolean
-		else if (!(expr instanceof Template) && !(expr instanceof Node)){
-			// Convert expression to a string.
-			if (expr === undefined || expr === false || expr === null) // Util.isFalsy() inlined
-				expr = '';
-			else if (typeof expr !== 'string')
-				expr += '';
+		
+	}
 
-			// Get the same Template for the same string each time.
-			// let template = Globals.stringTemplates[expr];
-			// if (!template) {
-				let template = new Template([expr], []);
-			//	Globals.stringTemplates[expr] = template;
-			//}
 
-			// Recurse.
-			this.exprToTemplates(template, callback);
-		}
-		else
-			callback(expr);
-	}
 
 
 	/**
 	 * 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().
+	 * 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 ExprPath.applyNodes() to evaluate later,
+	 * @param secondPass {[int, int][]} Locations within newNodes for Path.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!
+				// 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);
 
-				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
-				// But will that break the swap benchmark?
-				newNodes.push(...ng.getNodes());
 				this.nodeGroups.push(ng);
+				return ng;
 			}
 
-			// If expression, mark it to be evaluated later in ExprPath.apply() to find partial match.
+			// 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);
+		}
 
 		// Node(s) created by an expression.
-		else if (expr instanceof Node) {
+		else if (expr?.nodeType) {
 
 			// DocumentFragment created by an expression.
-			if (expr instanceof DocumentFragment)
+			if (expr?.nodeType === 11) // DocumentFragment
 				newNodes.push(...expr.childNodes);
 			else
 				newNodes.push(expr);
@@ -1184,322 +1605,88 @@ class ExprPath {
 			});
 	}
 
-	applyMultipleAttribs(node, expr) {
-		
-
-		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);
-				}
-			}
-
-			// 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);
-	}
-
-	/**
-	 * 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) {
-		
-
-		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);
-	}
-
-
-	/**
-	 * 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);
-
-		if (typeof func !== 'function')
-			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
-
-		// If function has changed, remove and rebind the event.
-		if (nodeEvent[0] !== func) {
-
-			// 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 originalFunc = func;
-
-			// 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);
-			};
-
-			// 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;
-
-			node.addEventListener(eventName, boundFunc, capture);
-
-			// 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)
-		}
-
-		//  Otherwise just update the args to the function.
-		nodeEvents[key][2] = args;
-	}
-
 	/**
-	 * Handle values, including two-way binding.
-	 * @param node
-	 * @param exprs */
-	// TODO: node is always this.nodeMarker?
-	applyValueAttrib(node, exprs) {
-		let expr = exprs[0];
-
-		// 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 (!obj)
-				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
-
-			let value = delve(obj, path);
-
-			// Special case to allow setting select-multiple value from an array
-			if (this.attrName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
-				// 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?
-				let strValue = Util.isFalsy(value) ? '' : value;
-
-				// 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;
-			}
-
-			// 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);
-			};
-
-			// 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);
-		}
-
-		// Regular attribute
-		else {
-			// TODO: Cache this on ExprPath.isProp when Shell creates the props.  Have ExprPath.clone() copy .isProp
-			// Or make it a new PathType.
-			//if (this.attrName === 'disabled')
-			//	debugger;
-
-			// hasOwnProperty() checks only the object, not the parents
-			// this.attrName in node checks the node and the parents.
-			// This version checks the html element it extends from, to see if has a setter set:
-			//     Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set
-			//let isProp = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set;
-			let isProp = this.isHtmlProperty;
-			if (isProp === undefined)
-				isProp = this.isHtmlProperty = Util.isHtmlProp(node, this.attrName);
+	 * Used by watch() for inserting/removing/replacing individual loop items.
+	 * @param op {ArraySpliceOp} */
+	applyWatchArrayOp(op) {
 
-			// Values to toggle an attribute
-			let multiple = this.attrValue;
-			if (!multiple) {
-				Globals$1.currentExprPath = this; // Used by watch()
-				if (typeof expr === 'function') {
-					if (this.type === 4) { // 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, '');
-			}
+		// 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.
 
-			// A non-toggled attribute
-			else {
+			// Try to find an exact match
+			let func = this.mapCallback || this.watchFunction;
+			let expr = func(op.items[i]);
 
-				// 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('');
-				}
+			// 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.
 
-				// If the attribute is one expression with no strings:
-				else
-					joinedValue = expr;
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (ng && ng === oldNg) ; else {
 
-				// Only update attributes if the value has changed.
-				// This is needed for setting input.value, .checked, option.selected, etc.
+					// 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?
 
-				let oldVal = isProp
-					? node[this.attrName]
-					: node.getAttribute(this.attrName);
-				if (oldVal !== joinedValue) {
+					// Splice in the new nodes.
+					let insertBefore = oldNg.startNode;
+					for (let node of ng.getNodes())
+						insertBefore.parentNode.insertBefore(node, insertBefore);
 
-					// <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;
-					// 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) {
-		
+			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);
+				// Splice in the new nodes.
+				for (let node of ng.getNodes())
+					insertBefore.parentNode.insertBefore(node, insertBefore);
+			}
+		}
 
 		
 
-		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
-	 * share the same DOM parent node.
-	 *
-	 * TODO: Is recursive clearing ever necessary? */
+	 * 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;
@@ -1508,14 +1695,10 @@ class ExprPath {
 			// If stuck in an infinite loop here, the problem is likely due to Template hash colisions.
 			// Which cause one path to be the descendant of itself, creating a cycle.
 		}
-
-		// Commented out on Sep 30, 2024 b/c it was making the benchmark never finish when adding 10k rows.
-		//clearChildNodeCache(this);
 	}
 
-
 	/**
-	 * 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;
@@ -1534,8 +1717,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;
 		}
@@ -1543,46 +1726,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 || this.type === ExprPathType.ComponentAttribValue) {
-			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 += '';
 
-			
+			// 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);
 	}
 
 	/**
@@ -1598,7 +1789,6 @@ class ExprPath {
 	 *         or createa  new NodeGroup from the template.
 	 * @return {NodeGroup} */
 	getNodeGroup(template, exact=true) {
-
 		let result;
 		let collection = this.nodeGroupsAttachedAvailable;
 
@@ -1610,11 +1800,13 @@ class ExprPath {
 				result = collection.deleteAny(template.getExactKey());
 			}
 
-			if (result) // also delete the matching close key.
+			if (result) {// also delete the matching close key.
 				collection.deleteSpecific(template.getCloseKey(), result);
-			else {
-				return null;
+
+				//result.applyExprs(template.exprs);
 			}
+			else
+				return null;
 		}
 
 		// Find a close match.
@@ -1634,47 +1826,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);
 
 		
 		return result;
 	}
 
-	isComponent() {
-		// Events won't have type===Component.
-		// TODO: Have a special flag for components instead of it being on the type?
-		return this.type === ExprPathType.ComponentAttribValue || (this.attrName && this.nodeMarker.tagName && this.nodeMarker.tagName.includes('-'));
-	}
-
-	/**
-	 * 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.
@@ -1704,145 +1872,174 @@ class ExprPath {
 		this.nodeGroupsRendered = [];
 	}
 
-	
-}
-
-/** @enum {int} */
-const ExprPathType = {
-	/** Child of a node */
-	Content: 1,
-
-	/** One or more whole attributes */
-	AttribMultiple: 2,
-
-	/** Value of an attribute. */
-	AttribValue: 3,
-
-	/** Value of an attribute being passed to a component. */
-	ComponentAttribValue: 4,
-
-	/** Expressions inside Html comments. */
-	Comment: 5,
-
-	/** Value of an attribute. */
-	Event: 6,
-};
-
 
-/** @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;
-}
 
-/**
- * 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};
-	}
+	/**
+	 * If not for watch.js, this could be moved to PathToNodes.js
+	 * @return {(Node|HTMLElement)[]} */
+	getNodes() {
 
-	reset() {
-		this.state = {...this.defaultState};
-		return this.state.context;
-	}
+		// Why doesn't this work?
+		// let result2 = [];
+		// for (let ng of this.nodeGroups)
+		// 	result2.push(...ng.getNodes())
+		// return result2;
 
-	/**
-	 * 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();
+		let result;
 
-		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;
+		// This shaves about 5ms off the partialUpdate benchmark.
+		result = this.nodesCache;
+		if (result) {
+			
+			return result
+		}
 
-					break;
+		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;
+	}
+
+	
+}
+
+class PathToComponent extends Path {
+
+	/** @type {PathToAttribValue[]} Paths to dynamics attributes that will be set on the component.*/
+	attribPaths;
+
+	constructor(nodeBefore, nodeMarker) {
+		super(null, nodeMarker);
+	}
+
+	/**
+	 * 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) {
+		
+
+		
+
+		let el = this.nodeMarker;
+
+		// 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]);
+		}
+
+		// 2. Instantiate component on first time.
+		let isAttrib = el.getAttribute('_is');
+		if (el.tagName.endsWith('-SOLARITE-PLACEHOLDER') || isAttrib) {
+
+
+			// 2a. Instantiate component
+			let tagName = (isAttrib || el.tagName.slice(0, -21)).toLowerCase(); // Remove -SOLARITE-PLACEHOLDER
+			let Constructor = customElements.get(tagName);
+			if (!Constructor)
+				throw new Error(`Must call customElements.define('${tagName}', Class) before using it.`);
+
+			Globals$1.currentSlotChildren = [...el.childNodes]; // TODO: Does this need to be a stack?
+			let newEl = new Constructor(attribs);
+
+			// 2b. Copy attributes over.
+			if (isAttrib) {
+				newEl.setAttribute('is', isAttrib);
+			//	el.removeAttribute('_is');
 			}
+			for (let attrib of el.attributes)
+				if (attrib.name !== '_is')
+					newEl.setAttribute(attrib.name, attrib.value);
+
+			// Set dynamic attributes if they are primitive types.
+			for (let name in attribs) {
+				let val = attribs[name];
+				let valType = typeof val;
+				if (valType === 'boolean') {
+					if (val !== false && val !== undefined && val !== null) // Util.isFalsy() inlined
+						newEl.setAttribute(name, '');
+				}
+
+				// If type is a non-boolean primitive, set the attribute value.
+				else if (valType==='string' || valType === 'number' || valType==='bigint')
+					newEl.setAttribute(name, val);
+			}
+
+
+			// 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]);
+			}
+
+			// 2e. Swap it to the DOM.
+			el.replaceWith(newEl);
 		}
-		onContextChange?.(html, html.length, this.state.context, null);
-		return this.state.context;
+
+		// 2f. Render
+		else if (typeof el.render === 'function')
+			el.render(attribs, changed);
+
+		Globals$1.currentSlotChildren = null;
 	}
-}
 
-HtmlParser.Attribute = 'Attribute';
-HtmlParser.Text = 'Text';
-HtmlParser.Tag = 'Tag';
+	/**
+	 * @param newRoot {HTMLElement}
+	 * @param pathOffset {int}
+	 * @return {Path} */
+	clone(newRoot, pathOffset=0) {
+		
+		let nodeMarker = this.getNewNodeMarker(newRoot, pathOffset);
+		let result = new PathToComponent(null, nodeMarker);
+		result.attribPaths = this.attribPaths.map(path => path.clone(newRoot, pathOffset));
+
+		
+
+		return result;
+	}
+
+	getExpressionCount() { return 0 }
+
+	
+}
 
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
@@ -1857,10 +2054,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 */
@@ -1872,14 +2069,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.
@@ -1890,43 +2079,52 @@ class Shell {
 
 		
 
+		// If no html tags or entities, just create a text node.
 		if (html.length === 1 && !html[0].match(/[<&]/)) {
-			this.fragment = document.createTextNode(html[0]);
+			this.fragment = Globals$1.doc.createTextNode(html[0]);
 			return;
 		}
 
 
 		// 1.  Add placeholders
-		let joinedHtml = Shell.addPlaceholders(html);
+		let htmlWithPlaceholders = Shell.addPlaceholders(html);
 
-		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
-		if (joinedHtml)
-			template.innerHTML = joinedHtml;
+		let template = Globals$1.doc.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
+		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(document.createTextNode(''));
+			template.content.append(Globals$1.doc.createTextNode(''));
 		this.fragment = template.content;
 
 		// 2. Find placeholders
 		let node;
 		let toRemove = [];
 		let placeholdersUsed = 0;
-		const walker = document.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		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.
@@ -1934,22 +2132,46 @@ 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(''));
 						}
 					}
 				}
+
+				// 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 === '!✨!') {
 
+				if (node?.parentNode?.closest && node?.parentNode?.closest('[contenteditable]'))
+					throw new Error(`Contenteditable can't have expressions inside them. Use <div contenteditable value="\${...}"> instead.`);
+
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
 				if (!nodeBefore) {
-					nodeBefore = document.createComment('ExprPath:'+this.paths.length);
+					nodeBefore = Globals$1.doc.createComment('Path:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node);
 				}
 				
@@ -1965,49 +2187,48 @@ class Shell {
 				// Re-use existing comment placeholder.
 				else {
 					nodeMarker = node;
-					nodeMarker.textContent = 'ExprPathEnd:'+ this.paths.length;
+					nodeMarker.textContent = 'PathEnd:'+ this.paths.length;
 				}
 				
 
-				let path = new ExprPath(nodeBefore, nodeMarker, ExprPathType.Content);
+				let path = new PathToNodes(nodeBefore, nodeMarker);
 				this.paths.push(path);
 				placeholdersUsed ++;
 			}
 
+			// Comments become text nodes when inside textareas.
 			else if (node.nodeType === 3 && node.parentNode?.tagName === 'TEXTAREA' && node.textContent.includes('<!--!✨!-->'))
 				throw new Error(`Textarea can't have expressions inside them. Use <textarea value="\${...}"> instead.`);
-
 			
 			
 			// Sometimes users will comment out a block of html code that has expressions.
 			// Here we look for expressions in comments.
 			// We don't actually update them dynamically, but we still add paths for them.
 			// 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) {
 
 					let placeholders = [];
 					for (let i = 0; i<parts.length; i++) {
-						let current = document.createTextNode(parts[i]);
+						let current = Globals$1.doc.createTextNode(parts[i]);
 						node.parentNode.insertBefore(current, node);
 						if (i > 0)
 							placeholders.push(current);
 					}
 
 					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new ExprPath(node.previousSibling, node, ExprPathType.Content);
+						let path = new PathToNodes(node.previousSibling, node);
 						this.paths.push(path);
 						placeholdersUsed ++;
 
@@ -2026,51 +2247,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.nodeMarker.nodeType === 1 &&
-				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.type = ExprPathType.ComponentAttribValue;
-			}
+			// Must be calculated after we remove the toRemove nodes:
+			path.nodeMarkerPath = Path.get(path.nodeMarker);
+
+
 		}
 
 		this.findEmbeds();
 
+
 		
 	}
 
 	/**
 	 * 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++) {
@@ -2078,10 +2279,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;
 			});
@@ -2089,13 +2300,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('');
 	}
 
 	/**
@@ -2107,10 +2318,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]');
 
@@ -2121,17 +2332,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));
 	}
 
 	/**
@@ -2166,17 +2367,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. */
@@ -2184,10 +2382,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. */
@@ -2207,299 +2405,212 @@ class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
+	/** @type {Template} */
+	template;
 
 	/**
-	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
-	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @param parentPath {?ExprPath} */
-	constructor(template, parentPath=null) {
-		if (!(this instanceof RootNodeGroup)) {
-
-			let [fragment, shell] = this.init(template, parentPath);
-
-			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 activateStaticComponents() after their children have been created.
-				let staticComponents = this.findStaticComponents(fragment, shell);
-
-				this.activateEmbeds(fragment, shell);
-
-				// Apply exprs
-				this.applyExprs(template.exprs);
+	 * Root node at the top of the hierarchy.
+	 * Should be moved to RootNodeGroup
+	 * @type {HTMLElement} */
+	root;
 
-				this.instantiateStaticComponents(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.
+	 * 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}
-	 * @param exactKey {?string} Optional, if already calculated.
-	 * @param closeKey {?string}
-	 * @returns {[DocumentFragment, Shell]} */
-	init(template, parentPath=null, exactKey=null, closeKey=null) {
-		this.exactKey = exactKey || template.getExactKey();
-		this.closeKey = closeKey || template.getCloseKey();
-
-		this.parentPath = parentPath;
+	 * @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;
 
 		
-
-		/** @type {Template} */
 		this.template = template;
-
-		// new!  Is this needed?
-		template.nodeGroup = this;
-
-		// Get a cached version of the parsed and instantiated html, and ExprPaths.
+		this.closeKey = template.getCloseKey();
 
 		// If it's just a text node, skip a bunch of unnecessary steps.
-		if (!(this instanceof RootNodeGroup) && !template.exprs.length && !template.html[0].includes('<')) {
-			//let doc = this.rootNg.startNode?.ownerDocument || document;
-			let textNode = document.createTextNode(template.html[0]);
-
-			this.startNode = this.endNode = textNode;
-			return [];
-		}
-		else {
-			let shell = Shell.get(template.html);
-			let fragment = shell.fragment.cloneNode(true);
-
-			if (fragment instanceof DocumentFragment) {
-				let childNodes = fragment.childNodes;
-				this.startNode = childNodes[0];
-				this.endNode = childNodes[childNodes.length - 1];
-			}
-			else {
-				this.startNode = this.endNode = fragment;
-			}
-			return [fragment, shell];
+		if (template.isText) {
+			this.startNode = this.endNode = Globals$1.doc.createTextNode(template.html[0]);
 		}
-	}
-
-	/**
-	 * 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;
-
-		
 
-		// 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.
+		else {
+			// Get a cached version of the parsed and instantiated html, and Paths:
+			const shell = Shell.get(template.html);
+			const shellFragment = shell.fragment.cloneNode(true);
 
-		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];
+			if (shellFragment.nodeType === 11) { // DocumentFragment
+				this.startNode = shellFragment.firstChild;
+				this.endNode = shellFragment.lastChild;
+			} else
+				this.startNode = this.endNode = 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--;
-			}
 
-			// 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.
+			// Special setup for RootNodeGroup
+			if (this instanceof RootNodeGroup) {
 
-			// 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()) {
 
-				if (!nextPath || !nextPath.isComponent() || nextPath.nodeMarker !== path.nodeMarker)
-					lastComponentPathIndex = i;
-				let isFirstComponentPath = !prevPath || !prevPath.isComponent() || prevPath.nodeMarker !== path.nodeMarker;
+				let startingPathDepth = 0;
+				this.options = options;
+				if (shellFragment instanceof Text) {
+					if (!el)
+						throw new Error('Cannot create a standalone text node');
 
-				if (isFirstComponentPath) {
+					this.root = el;
+					if (shellFragment.nodeValue.length)
+						this.root.append(shellFragment);
+				}
 
-					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];
-					}
+				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));
+						}
 
-					this.applyComponentExprs(path.nodeMarker, componentProps);
+						// If el should replace the root node of the fragment.
+						if (isReplaceEl(shellFragment, this.root.tagName)) {
+							this.root.append(...shellFragment.children[0].childNodes);
 
-					// Set attributes on component.
-					for (let j=i; j<=lastComponentPathIndex; j++)
-						paths[j].apply(pathExprs[j]);
-				}
-			}
+							// Copy attributes
+							for (let attrib of shellFragment.children[0].attributes)
+								if (!this.root.hasAttribute(attrib.name))
+									this.root.setAttribute(attrib.name, attrib.value);
 
-			// Else apply it normally
-			else
-				path.apply(pathExprs[i]);
+							// Go one level deeper into all of shell's paths.
+							startingPathDepth = 1;
+						}
 
+						else {
+							let isEmpty = shellFragment.childNodes.length === 1 && shellFragment.childNodes[0].nodeType === 3 && shellFragment.childNodes[0].textContent === '';
+							if (!isEmpty)
+								this.root.append(...shellFragment.childNodes);
+						}
 
-		} // end for(path of this.paths)
 
+						// 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);
+						}
+					}
 
-		// TODO: Only do this if we have ExprPaths within styles?
-		this.updateStyles();
+					// 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;
+					}
 
+					// Exclude the path to ourself.  Otherwise we get infinite recursion.
+					// let paths = [...shell.paths];
+					// if (paths[0] instanceof PathToComponent)
+					// 	paths.shift();
 
+					this.setPathsFromFragment(this.root, shell.paths, startingPathDepth);
+					this.activateEmbeds(this.root, shell, startingPathDepth);
+				}
+				this.startNode = this.endNode = this.root;
 
-		// Invalidate the nodes cache because we just changed it.
-		this.nodesCache = null;
+				Globals$1.rootNodeGroups.set(this.root, this);
+			} // end if RootNodeGroup
 
-		// If there's leftover expressions, there's probably an issue with the Shell that created this NodeGroup,
-		// and the number of paths not matching.
-		
+			else if (shell) {
+				if (shell.paths.length) {
+					this.setPathsFromFragment(shellFragment, shell.paths);
+				}
 
+				this.activateEmbeds(shellFragment, shell);
+			}
+		}
 
 		
 	}
 
-	/**
-	 * Create a nested Component or call render with the new props.
-	 * @param el {Solarite:HTMLElement}
-	 * @param props {Object} */
-	applyComponentExprs(el, props) {
-
-		// TODO: Does a hash of this already exist somewhere?
-		// Perhaps if Components were treated as child NodeGroups, which would need to be the child of an ExprPath,
-		// then we could re-use the hash and logic from NodeManager?
-		let newHash = getObjectHash(props);
-
-		let isPreHtmlElement = el.hasAttribute('solarite-placeholder');
-		let isPreIsElement = el.hasAttribute('_is');
 
+	/**
+	 * 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) {
 
-		// Instantiate a placeholder.
-		if (isPreHtmlElement || isPreIsElement)
-			el = this.instantiateComponent(el, isPreHtmlElement, props);
+		
 
-		// Call render() with the same params that would've been passed to the constructor.
-		// We do this even if the arguments haven't changed, so we can let the child component
-		// compare the arguments and then decide for itself whether it wants to re-render.
-		else if (el.render) {
-			//let oldHash = Globals.componentArgsHash.get(el);
-			//if (oldHash !== newHash) { //  Only if not changed.
-				let args = {};
-				for (let name in props || {})
-					args[Util.dashesToCamel(name)] = props[name];
-				el.render(args); // Pass new values of props to render so it can decide how it wants to respond.
-			//}
-		}
+		let paths = this.paths;
 
-		Globals$1.componentArgsHash.set(el, newHash);
-	}
+		// 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;
 
-	/**
-	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
-	 * to its constructor.
-	 *
-	 * The logic of this function is complex and could use cleaning up.
-	 *
-	 * @param el
-	 * @param isPreHtmlElement {?boolean} True if the element's tag name ends with -solarite-placeholder
-	 * @param props {Object} Attributes with dynamic values.
-	 * @return {HTMLElement} */
-	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.`)
-
-		let attribs = {};
-		for (let name in props || {})
-			attribs[Util.dashesToCamel(name)] = props[name];
-
-		// 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.
-		if (el.attributes.length) {
-			for (let attrib of el.attributes) {
-				let attribName = Util.dashesToCamel(attrib.name);
-				if (!attribs.hasOwnProperty(attribName) && attribName !== 'solarite-placeholder')
-					attribs[attribName] = attrib.value;
+			// 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);
 			}
+			else if (includeNonComponents)
+				path.apply(pathExprs[i]);
 		}
 
-		// 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 there's leftover expressions, there's probably an issue with the Shell that created this NodeGroup,
+		// and the number of paths not matching.
+		
 
-		if (!isPreHtmlElement)
-			newEl.setAttribute('is', el.getAttribute('is').toLowerCase());
 
-		// Replace the placeholder tag with the instantiated web component.
-		el.replaceWith(newEl);
+		if (includeNonComponents) {
 
-		// 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);
+			// TODO: Only do this if we have Paths within styles?
+			this.updateStyles();
 
+			// Invalidate the nodes cache because we just changed it.
+			this.nodesCache = null;
 
-		// 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;
-
 
-		// 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, '');
-			}
+		
+	}
 
-			// If type is a non-boolean primitive, set the attribute value.
-			else if (['number', 'bigint', 'string'].includes(typeof val))
-				newEl.setAttribute(name, val);
-		}
+	// TODO: Give it a better name.
+	applyExprs2(exprs) {
 
-		return newEl;
 	}
 
 	/**
@@ -2525,10 +2636,6 @@ class NodeGroup {
 		return result;
 	}
 
-	getParentNode() {
-		return this.startNode?.parentNode
-	}
-
 	/**
 	 * Get the root element of the NodeGroup's RootNodeGroup.
 	 * @returns {HTMLElement|DocumentFragment} */
@@ -2543,21 +2650,15 @@ class NodeGroup {
 	}
 
 	/**
-	 * Requires the nodeCache to be present. */
-	removeAndSaveOrphans() {
-		
-		let fragment = document.createDocumentFragment();
-		for (let node of this.getNodes())
-			fragment.append(node);
-	}
-
-
-	updatePaths(fragment, paths, offset) {
-		// Update paths to point to the fragment.
-		let pathLength = paths.length;
+	 * 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, offset);
+			let path = paths[i].clone(fragment, startingPathDepth);
 			path.parentNg = this;
 			this.paths[i] = path;
 		}
@@ -2572,33 +2673,6 @@ class NodeGroup {
 			}
 	}
 
-	
-
-	findStaticComponents(root, shell, pathOffset=0) {
-		let result = [];
-
-		// 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 (pathOffset)
-				path = path.slice(0, -pathOffset);
-			let el = resolveNodePath(root, path);
-
-			// 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);
-		}
-		return result;
-	}
-
-	instantiateStaticComponents(staticComponents) {
-		for (let el of staticComponents)
-			this.instantiateComponent(el);
-	}
-
 	/**
 	 * @param root {HTMLElement|DocumentFragment}
 	 * @param shell {Shell}
@@ -2614,10 +2688,10 @@ 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);
 				}
-				}
+			}
 
 			// styles
 			if (options?.styles !== false) {
@@ -2628,7 +2702,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);
@@ -2640,140 +2714,19 @@ class NodeGroup {
 			if (options?.scripts !== false) {
 				for (let path of shell.scripts) {
 					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-					let script = resolveNodePath(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
-	 * @param el
-	 * @param options {?object}
-	 */
-	constructor(template, el, options) {
-		super(template);
-
-		this.options = options;
-
-		this.rootNg = this;
-		let [fragment, shell] = this.init(template);
-
-		if (fragment instanceof Text) {
-
-			if (el) {
-				this.startNode = el;
-				this.endNode = el;
-				if (fragment.nodeValue.length)
-					el.append(fragment);
-				this.root = el;
-			}
-			Globals$1.nodeGroups.set(this.root, this);
-		}
-		else {
-
-			// If adding NodeGroup to an element.
-			let offset = 0;
-			let root = fragment; // TODO: Rename so it's not confused with this.root.
-			if (el) {
-				Globals$1.nodeGroups.set(el, this);
-
-				// Save slot children
-				let slotChildren;
-				if (el.childNodes.length) {
-					slotChildren = document.createDocumentFragment();
-					slotChildren.append(...el.childNodes);
-				}
-
-				this.root = el;
-
-				// If el should replace the root node of the fragment.
-				if (isReplaceEl(fragment, el)) {
-					el.append(...fragment.children[0].childNodes);
-
-					// 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);
-
-					// Go one level deeper into all of shell's paths.
-					offset = 1;
-				} else {
-					let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
-					if (!isEmpty)
-						el.append(...fragment.childNodes);
-				}
-
-				// 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);
-
-					// No slots
-					else
-						el.append(slotChildren);
-				}
-
-				root = el;
-
-				this.startNode = el;
-				this.endNode = el;
-			} else {
-				let singleEl = getSingleEl(fragment);
-				this.root = singleEl || fragment; // We return the whole fragment when calling r() with a collection of nodes.
-
-				Globals$1.nodeGroups.set(this.root, this);
-				if (singleEl) {
-					root = singleEl;
-					offset = 1;
+						path = path.slice(0, -pathOffset);
+					let script = Path.resolve(root, path);
+					eval(script.textContent);
 				}
 			}
+		}
+	}
 
-			this.updatePaths(root, shell.paths, offset);
-
-			// 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.
-			let staticComponents = this.findStaticComponents(root, shell, offset);
+	
+}
 
-			this.activateEmbeds(root, shell, offset);
 
-			// Apply exprs
-			this.applyExprs(template.exprs);
 
-			this.instantiateStaticComponents(staticComponents);
-		}
-	}
-}
 
 function getSingleEl(fragment) {
 	let nonempty = [];
@@ -2790,12 +2743,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;
+
 }
 
 /**
@@ -2804,24 +2764,24 @@ 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;
 
-	/** @type {NodeGroup} */
-	nodeGroup;
+	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)
@@ -2836,51 +2796,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();
@@ -2888,7 +2847,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.
@@ -2899,7 +2858,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
@@ -2910,169 +2869,203 @@ class Template {
 
 		return this.closeKey;
 	}
-}
 
+	/**
+	 * @param tag {string}
+	 * @param props {?Record<string, any>}
+	 * @param children
+	 * @returns {Template} */
+	static fromJsx(tag, props, children) {
 
-/**
- * @typedef {Object} RenderOptions
- * @property {boolean=} styles - Replace :host in style tags to scope them locally.
- * @property {boolean=} scripts - Execute script tags.
- * @property {boolean=} ids - Create references to elements with id or data-id attributes.
- * @property {?boolean} render - Deprecated.
- * 	 Used only when options are given to a class super constructor inheriting from Solarite.
- *     True to call render() immediately in super constructor.
- *     False to automatically call render() at all.
- *     Undefined (default) to call render() when added to the DOM, unless already rendered.
- */
-
-/**
- * Convert strings to HTMLNodes.
- * Using h`...` as a tag will always create a Template.
- * Using h() as a function() will always create a DOM element.
- *
- * Features beyond what standard js tagged template strings do:
- * 1. r`` sub-expressions
- * 2. functions, nodes, and arrays of nodes as sub-expressions.
- * 3. html-escape all expressions by default, unless wrapped in r()
- * 4. event binding
- * 5. TODO:  list more
- *
- * Currently supported:
- * 1. h(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
- * 2. h(el, template, ?options)        // Render the Template created by #1 to element.
- *
- * 3. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
- *
- * 4. h('Hello');                      // Create single text node.
- * 5. h('<b>Hello</b>');               // Create single HTMLElement
- * 6. h('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 7. h()`Hello<b>${'World'}!</b>`     // Same as 4-6, but evaluates the string as a Solarite template, which
- *                                     // includes properly handling nested components and r`` sub-expressions.
- * 8. h(template)                      // Render Template created by #1.
- *
- * 9. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
- * 10. h(string, object, ...)          // JSX TODO
- * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
- * @param exprs {*[]|string|Template|Object}
- * @return {Node|HTMLElement|Template} */
-function h(htmlStrings=undefined, ...exprs) {
+		// HTML void elements that must not have closing tags
+		const isVoid = selfClosingTags.has(tag.toLowerCase());
 
-	if (htmlStrings === undefined && !exprs.length && arguments.length)
-		throw new Error('h() cannot be called with undefined.');
+		// Build htmlStrings/exprs so Shell can place placeholders in attribute values and child content.
+		let htmlStrings = [];
+		let templateExprs = [];
 
-	// TODO: Make this a more flat if/else and call other functions for the logic.
-	if (htmlStrings instanceof Node) {
-		let parent = htmlStrings, template = exprs[0];
+		// Opening tag
+		let open = `<${tag}`;
 
-		// 1
-		if (!(exprs[0] instanceof Template)) {
-			if (parent.shadowRoot)
-				parent.innerHTML = ''; // Remove shadowroot.  TODO: This could mess up paths?
+		// Attributes
+		if (props && typeof props === 'object') {
+			for (let name in props) {
+				let value = props[name];
 
-			let options = exprs[0];
+				// id and data-id are static in templates — never expressions
+				if (name === 'id' || name === 'data-id') {
+					// Write directly into the opening string with quotes
+					open += ` ${name}="${value}"`;
+					continue;
+				}
 
-			// Return a tagged template function that applies the tagged themplate to parent.
-			let taggedTemplate = (htmlStrings, ...exprs) => {
-				Globals$1.rendered.add(parent);
-				let template = new Template(htmlStrings, exprs);
-				return template.render(parent, options);
-			};
-			return taggedTemplate;
+				// Dynamic attribute value: functions are unquoted (e.g., onclick=${fn}), others quoted
+				if (typeof value === 'function') {
+					open += ` ${name}=`;
+					htmlStrings.push(open);
+					templateExprs.push(value);
+					// reset so subsequent attributes start fresh (e.g., ' title=')
+					open = ``;
+				}
+				else {
+					open += ` ${name}=`;
+					htmlStrings.push(open);
+					templateExprs.push(value);
+					// reset so subsequent attributes start fresh (e.g., ' title=')
+					open = ``;
+				}
+			}
 		}
 
-		// 2. Render template created by #4 to element.
-		else { // instanceof Template
-			let options = exprs[1];
-			template.render(parent, options);
-
-			// Append on the first go.
-			if (!parent.childNodes.length && this) {
-				// TODO: Is this ever executed?
-				debugger;
-				parent.append(this.rootNg.getParentNode());
+		// Finalize opening tag precisely to match tagged template splitting
+		if (!isVoid) {
+			const pushedAny = htmlStrings.length > 0;
+			// If nothing pushed yet (no dynamic attrs), push the entire open + '>'
+			if (!pushedAny)
+				htmlStrings.push(open + '>');
+			else {
+				// If we were in a quoted attr (open === '"'), then the string after expr is '">' ;
+				// Otherwise (function-valued attr), the string after expr is just '>'
+				htmlStrings.push(open === '"' ? '">' : '>');
 			}
+
+			for (let child of children)
+				addChild(child, htmlStrings, templateExprs);
+		}
+
+		// Closing tag (not for void tags)
+		if (!isVoid) {
+			// If we never emitted the '>' for the open tag (no children were added),
+			// then it was appended above before children. Now just add the closing tag to the last html segment.
+			let lastIdx = htmlStrings.length - 1;
+			htmlStrings[lastIdx] += `</${tag}>`;
+		}
+		else {
+			// Void element: ensure we emitted a trailing '>' segment
+			const pushedAny = htmlStrings.length > 0;
+			if (!pushedAny)
+				htmlStrings.push(open + '>');
+			else
+				htmlStrings.push('>');
 		}
-	}
 
-	// 3. Path if used as a template tag.
-	else if (Array.isArray(htmlStrings)) {
-		return new Template(htmlStrings, exprs);
+		// Ensure invariant
+		//assert(htmlStrings.length === templateExprs.length + 1);
+		//console.log([htmlStrings, templateExprs])
+		return new Template(htmlStrings, templateExprs);
 	}
+}
+
 
-	else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
-		// 10. JSX
-		if (typeof exprs[0] === 'object') {
-			exprs[0] || {};
-			exprs.slice(1);
+const selfClosingTags = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
 
-			let templateHtmlStrings = [];
-			let templateExprs = [];
 
-			// TODO How to know which children are static html and which are expression placeholders?
-			// Perhaps we have to treat every text child as a string?
+/**
+ * Add child Templates that were already created via h() and Template.fromJsx()
+ * @param template {Template}
+ * @param html {string[]}
+ * @param exprs {any[]} */
+const addChild = (template, html, exprs) => {
+
+	if (Array.isArray(template)) {
+		for (let c of template)
+			addChild(c, html, exprs);
+	}
+	else {
+		let flatten = false;
+		if (template instanceof Template) {
+			// Heuristic to match tagged-template splitting:
+			// - Flatten if the child has expressions (so JSX can inline attribute/value placeholders like tagged literals would).
+			// - Also flatten void elements (e.g., <img>) so they inline like literals.
+			// - Otherwise, keep as a dynamic child placeholder to match cases where the tagged template used an expression child.
+			const childHasExprs = template.exprs.length > 0;
+			if (childHasExprs)
+				flatten = true;
+			else {
+				const m = (template.html[0] || '').match(/^<([a-zA-Z][\w:-]*)/);
+				const childTag = m ? m[1].toLowerCase() : '';
+				flatten = selfClosingTags.has(childTag);
+			}
+		}
 
-			assert(templateHtmlStrings.length === templateExprs.length+1);
-			return new Template(templateHtmlStrings, templateExprs);
+		if (flatten) {
+			// Flatten/interleave into current segment to match tagged template splitting
+			html[html.length - 1] += template.html[0];
+			for (let i = 0; i < template.exprs.length; i++) {
+				exprs.push(template.exprs[i]);
+				html.push(template.html[i + 1] ?? '');
+			}
+		} else {
+			// Keep as dynamic child
+			exprs.push(template);
+			html.push('');
 		}
+	}
+};
 
 
-		// If it starts with a string, trim both ends.
-		// TODO: Also trim if it ends with whitespace?
-		if (htmlStrings.match(/^\s^</))
-			htmlStrings = htmlStrings.trim();
+/**
+ * @typedef {Object} RenderOptions
+ * @property {boolean=} styles - Replace :host in style tags to scope them locally.
+ * @property {boolean=} scripts - Execute script tags.
+ * @property {boolean=} ids - Create references to elements with id or data-id attributes.
+ * @property {?boolean} render - Deprecated.
+ * 	 Used only when options are given to a class super constructor inheriting from Solarite.
+ *     True to call render() immediately in super constructor.
+ *     False to automatically call render() at all.
+ *     Undefined (default) to call render() when added to the DOM, unless already rendered.
+ */
+
+/**
+ * Convert a template, string, or object into a DOM Node or Element
+ *
+ * 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) {
+
+	if (typeof arg === 'string') {
+		let html = arg;
+
+		// If it's an element with whitespace before or after it, trim both ends.
+		if (html.match(/^\s^<\S+/) || html.match(/\S+>\s+$/))
+			html = html.trim();
 
 		// We create a new one each time because otherwise
 		// the returned fragment will have its content replaced by a subsequent call.
-		let templateEl = document.createElement('template');
-		templateEl.innerHTML = htmlStrings;
+		let templateEl = Globals$1.doc.createElement('template');
+		templateEl.innerHTML = html;
 
-		// 4+5. Return Node if there's one child.
+		// 1+2. Return Node if there's one child.
 		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
 		if (relevantNodes.length === 1)
 			return relevantNodes[0];
 
-		// 6. Otherwise return DocumentFragment.
+		// 3. Otherwise return DocumentFragment.
 		return templateEl.content;
 	}
 
-	// 7. Create a static element
-	else if (htmlStrings === undefined) {
-		return (htmlStrings, ...exprs) => {
-			//Globals.rendered.add(parent)
-			let template = h(htmlStrings, ...exprs);
-			return template.render();
-		}
-	}
-
-	// 8.
-	else if (htmlStrings instanceof Template) {
-		return htmlStrings.render();
+	// 4.
+	if (arg instanceof Template) {
+		return arg.render();
 	}
 
-
-	// 9. Create dynamic element with render() function.
+	// 5. Create dynamic element from an object with a render() function.
 	// TODO: This path doesn't handle embeds like data-id="..."
-	else if (typeof htmlStrings === 'object') {
-		let obj = htmlStrings;
+	else if (arg && typeof arg === 'object') {
+		let obj = arg;
 
-		if (obj.constructor.name !== 'Object') 
+		if (obj.constructor.name !== 'Object')
 			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
 
-
-		// Special rebound render path, called by normal path.
-		// Intercepts the main r`...` function call inside render().
-		if (Globals$1.objToEl.has(obj)) {
-			return function(...args) {
-			   let template = h(...args);
-			   let el = template.render();
-				Globals$1.objToEl.set(obj, el);
-			}.bind(obj);
-		}
-
 		// Normal path
-		else {
+		if (!Globals$1.objToEl.has(obj)) {
 			Globals$1.objToEl.set(obj, null);
-			obj[renderF](); // Calls the Special rebound render path above, when the render function calls r(this)
+			obj[renderF](); // Calls the Special rebound render path above, when the render function calls h(this)
 			let el = Globals$1.objToEl.get(obj);
 			Globals$1.objToEl.delete(obj);
 
@@ -3080,7 +3073,7 @@ function h(htmlStrings=undefined, ...exprs) {
 				if (typeof obj[name] === 'function')
 					el[name] = obj[name].bind(el);  // Make the "this" of functions be el.
 					// TODO: But this doesn't work for passing an object with functions as a constructor arg via an attribute:
-					// <my-element arg=${{myFunc() { return this }}}
+				// <my-element arg=${{myFunc() { return this }}}
 				else
 					el[name] = obj[name];
 
@@ -3096,18 +3089,152 @@ function h(htmlStrings=undefined, ...exprs) {
 		}
 	}
 
-	else
-		throw new Error('Unsupported arguments.')
+	throw new Error('toEl() does not support argument of type: ' + (arg ? typeof arg : arg));
 }
 
+
 // Trick to prevent minifier from renaming this function.
 let renderF = 'render';
 
 /**
+ * Convert strings to HTMLNodes.
+ * Using h`...` as a tag will always create a Template.
+ * Using h() as a function() will always create a DOM element.
+ *
+ * Features beyond what standard js tagged template strings do:
+ * 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
+ * 5. TODO:  list more
+ *
+ * General rule:
+ * If h() is a function with null or an HTMLElement as its first argument create a Node.
+ * Otherwise create a template
+ *
+ * Currently supported:
+ *
+ * Create Tempataes
+ * 1. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
+ * 2. h('<b>Hello</b><u>Goodbye</u>'); // Create Template from string, that can later be used to create nodes.
+ *
+ * Add children to an element.
+ * 3. h(el, h`<b>${'Hi'}</b>`, ?options)
+ * 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>`
+ *
+ * 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|Function} */
+function h(htmlStrings=undefined, ...exprs) {
+
+	// 1. Tagged template: h`<div>...</div>`
+	if (Array.isArray(arguments[0])) {
+		return new Template(arguments[0], exprs);
+	}
+
+	// 2. String to template, or JSX factory form h(tag, props, ...children)
+	else if (typeof arguments[0] === 'string' || arguments[0] instanceof String) {
+		let tagOrHtml = arguments[0];
+
+		// 2a. JSX: h("tag", {props}, ...children)
+		if (exprs.length && (typeof exprs[0] === 'object' || exprs[0] === null)) {
+			let tag = tagOrHtml + '';
+			let props = exprs[0] || {};
+			let children = exprs.slice(1);
+
+			return Template.fromJsx(tag, props, children);
+		}
+
+		// 2b. Plain html string => template: h('<div>...</div>')
+		else {
+			let html = tagOrHtml;
+			// If it starts with whitespace and then a tag, trim it.
+			if (html.match(/^\s^</))
+				html = html.trim();
+			return new Template([html], []);
+		}
+	}
+
+	else if (arguments[0] instanceof HTMLElement || arguments[0] instanceof DocumentFragment) {
+
+		// 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];
+			template.render(parent, options);
+		}
+
+		// 4. Render tagged template to element: h(el)`<div>...</div>`
+		else {
+			let parent = arguments[0], options = arguments[1];
+
+			// 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 renderTemplate = (htmlStrings, ...exprs) => {
+				Globals$1.rendered.add(parent);
+				let template = new Template(htmlStrings, exprs);
+				return template.render(parent, options);
+			};
+			return renderTemplate;
+		}
+	}
+
+	// 5. Create a static element: h()`<div></div>`
+	else if (!arguments.length) {
+		return (htmlStrings, ...exprs) => {
+			let template = h(htmlStrings, ...exprs);
+			return toEl(template);
+		}
+	}
+
+	// 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])) {
+		let obj = arguments[0];
+
+		if (obj.constructor.name !== 'Object')
+			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
+
+		// Jsx with h(this, <jsx>)
+		if (arguments[1] instanceof Template) {
+			let template = arguments[1];
+			let el = template.render();
+			Globals$1.objToEl.set(obj, el);
+		}
+
+		// h(this)`<div>...</div>`
+		else
+			return function(...args) {
+				let template = h(...args);
+				let el = template.render();
+				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
@@ -3115,40 +3242,38 @@ let renderF = 'render';
  * 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;
@@ -3156,20 +3281,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)
@@ -3191,6 +3313,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>}
@@ -3199,6 +3322,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) {
@@ -3208,15 +3335,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',
@@ -3235,174 +3363,120 @@ 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) {
-
-	let BaseClass = HTMLElement;
-	if (extendsTag && !extendsTag.includes('-')) {
-		extendsTag = extendsTag.toLowerCase();
-
-		BaseClass = Globals$1.elementClasses[extendsTag];
-		if (!BaseClass) { // TODO: Use Cache
-			BaseClass = document.createElement(extendsTag).constructor;
-			Globals$1.elementClasses[extendsTag] = BaseClass;
-		}
-	}
-
-	/**
-	 * 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);
-
-			// 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.
-
-			// This line is equivalent the to super() call.
-			return Reflect.construct(Parent, args, Class);
-		}
-	});
-
-	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 = r(this, html, options);
+ * 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];
 				}
-			})*/
+			}
 
-			/*
-			let pthis = new Proxy(this, {
-				get(obj, prop) {
-					return Reflect.get(obj, prop)
-				}
-			});
-			this.render = this.render.bind(pthis);
-			*/
+			// 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];
+			//	}
+			//}
 		}
 
-		/**
-		 * 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();
-		}
+		// 3. Wrap render function so it always provides the attribs argument.
+		// Disabled because this gives us strings for attribute values when we call render manually.
+		// Instead of values given from ${...} expressions.
+		// let originalRender = this.render;
+		// this.render = (attribs, changed=true) => {
+		// 	if (!attribs) // If we have to look up the attribs, we don't know if they changed or not.
+		// 		attribs = Solarite.getAttribs(this);
+		// 	originalRender.call(this, attribs, changed);
+		// }
+	}
 
+	'render'() {
+		throw new Error('render() is not defined for ' + this.constructor.name);
+	}
 
-		static define(tagName=null) {
-			defineClass(this, tagName, extendsTag);
+	/**
+	 * 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()'...'.
 		}
 	}
-}
 
-// Trick to prevent minifier from renaming this method.
-let define = 'define';
-let getName = 'getName';
-
-/**
- * Solarite JavasCript UI library.
- * MIT License
- * https://vorticode.github.io/solarite/
- */
+	/**
+	 * Called automatically by the browser. */
+	'connectedCallback'() { // quoted so terser doesn't remove it.
+		this.renderFirstTime();
+	}
 
-/**
- * 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)
+	static 'define'(tagName=null) {
+		Util.defineClass(this, tagName);
 	}
-});
 
-//export {default as watch, renderWatched} from './watch.js'; // unfinished
+	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;
+	}
+}
 
 export default h;
-export { ArgType, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, delve, getArg, h, h as r, setArgs };
+export { ArgType, Globals$1 as Globals, HtmlParser, NodeGroup, Shell, Solarite, Util as SolariteUtil, Template, delve, getArg, h, h as r, setArgs, t, toEl };