solarite 0.2.4 → 0.3.0

package/dist/Solarite.js

@@ -78,43 +78,110 @@ var Util$1 = {
 	},
 
 	/**
+	 * Use an array as the value of a map, appending to it when we add.
+	 * Used by watch.js.
 	 * @param map {Map|WeakMap|Object}
 	 * @param key
 	 * @param value */
-	mapAdd(map, key, value) {
-		let isMap = map instanceof Map || map instanceof WeakMap;
-		let result = isMap ? map.get(key) : map[key];
+	mapArrayAdd(map, key, value) {
+		let result = map.get(key);
 		if (!result) {
 			result = [value];
-			if (isMap)
-				map.set(key, result);
-			else
-				map[key] = result;
+			map.set(key, result);
 		}
 		else
 			result.push(value);
 	},
+};
+
+var Globals;
 
-	weakMemoize(obj, callback) {
-		let result = weakMemoizeInputs.get(obj);
-		if (!result) {
-			result = callback(obj);
-			weakMemoizeInputs.set(obj, result);
-		}
-		return result;
-	}
-};
+/**
+ * Created with a reset() function because it's useful for testing. */
+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,
+
+		div: document.createElement("div"),
+
+		/**
+		 * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
+		elementClasses: {},
+
+		/** @type {Object<string, boolean>} Key is tag-name.propName.  Value is whether it's an attribute.*/
+		htmlProps: {},
+
+		/**
+		 * Used by ExprPath.applyEventAttrib()
+		 * @type {WeakMap<Node, Object<eventName:string, [original:function, bound:function, args:*[]]>>} */
+		nodeEvents: new WeakMap(),
+
+		/**
+		 * Get the RootNodeGroup for an element.
+		 * @type {WeakMap<HTMLElement, RootNodeGroup>} */
+		nodeGroups: new WeakMap(),
+
+		/**
+		 * Used by r() path 9. */
+		objToEl: new WeakMap(),
+
+		//pendingChildren: [],
+
+
+		/**
+		 * Elements that have been rendered to by r() 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>} */
+		shells: new WeakMap(),
+
+		/**
+		 * 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()
+		 * @type {Object<string, Template>} */
+		//stringTemplates: {},
+
+		reset,
 
-let weakMemoizeInputs = new WeakMap();
+		count: 0
+	};
+}
+reset();
+
+var Globals$1 = Globals;
 
 /**
  * Follow a path into an object.
  * @param obj {object}
  * @param path {string[]}
- * @param createVal {*}  If set, non-existant paths will be created and value at path will be set to createVal.
+ * @param createVal {*}  If set, non-existent paths will be created and value at path will be set to createVal.
  * @return {*} The value, or undefined if it can't be reached. */
-function delve(obj, path, createVal = delveDontCreate) {
-	let isCreate = createVal !== delveDontCreate;
+function delve(obj, path, createVal = d) {
+	let isCreate = createVal !== d;
 
 	let len = path.length;
 	if (!obj && !isCreate && len)
@@ -149,256 +216,27 @@ function delve(obj, path, createVal = delveDontCreate) {
 	return obj;
 }
 
-let delveDontCreate = {};
-
-/**
- * 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.
- *
- * 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
- * example.  Note that constructor args are embedded in an object, and must be all lower-case because
- * Browsers make all html attribute names lowercase.
- *
- * @example
- * 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);
- * }
- *
- * @param el {HTMLElement}
- * @param name {string} Attribute name.  Not case-sensitive.
- * @param val {*} Default value to use if attribute doesn't exist.
- * @param type {ArgType|function|*[]}
- *     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 type can't be parsed as the given type, use this value.
- * @return {*} Undefined if attribute isn't set.  */
-function getArg(el, name, val=undefined, type=ArgType.String, fallback=undefined) {
-	let attrVal = el.getAttribute(name);
-	if (attrVal !== null) // If attribute doesn't exist.
-		val = attrVal;
-		
-	if (Array.isArray(type))
-		return type.includes(val) ? val : fallback;
-	
-	if (typeof type === 'function')
-		return type(val);
-	
-	// 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;
-		if (['false', '0', false, 0, null, undefined, NaN].includes(lAttrVal))
-			return false;
-		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
-			return true;
-		return fallback;
-	}
-	
-	// Attribute doesn't exist
-	let result;
-	switch (type) {
-		case ArgType.Int:
-			result = parseInt(val);
-			return isNaN(result) ? fallback : result;
-		case ArgType.Float:
-			result = parseFloat(val);
-			return isNaN(result) ? fallback : result;
-		case ArgType.String:
-			return [undefined, null, false].includes(val) ? '' : val+'';
-		case ArgType.JSON:
-		case ArgType.Eval:
-			if (typeof val === 'string' && val.length)
-				try {
-					if (type === ArgType.JSON)
-						return JSON.parse(val);
-					else
-						return eval(`(${val})`);
-				} catch (e) {
-					return val;
-				}
-			else return fallback;
-
-		// type not provided
-		default:
-			return val;
-	}
-}
-
-/**
- * @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',
-	
-	/**
-	 * Parse the string value as JSON.
-	 * If it's not parsable, return the value as a string. */
-	JSON: 'JSON',
-	
-	/**
-	 * Evaluate the string as JavaScript using the eval() function.
-	 * If it can't be evaluated, return the original string. */
-	Eval: 'Eval'
-};
+// d means "don't create"
+let d = {};
 
-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();
-
-/**
- * @param obj {Object|string|Node}
- * @returns {string} */
-function getObjectId(obj) {
-	// if (typeof obj === 'function')
-	// 	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 = (lastObjectId++); // We use a unique prefix to ensure it doesn't collide w/ strings not from getObjectId()
-		objectIds.set(obj, result);
-	}
-	return result;
-}
-
-/**
- * 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. */
-let isHashing = true;
-function toJSON() {
-	return isHashing ? getObjectId(this) : this
-}
-
-
-// Node.prototype.toJSON = toJSON;
-// Function.prototype.toJSON = toJSON;
-// 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()
-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 Util = {
 
-/**
- * Get a string that uniquely maps to the values of the given object.
- * If a value in obj changes, calling getObjectHash(obj) will then return a different hash.
- * This is used by NodeGroupManager to create a hash that represents the current values of a NodeGroup.
- *
- * Relies on the Node and Function prototypes being overridden above.
- *
- * Note that passing an integer may collide with the number we get from hashing an object.
- * But we don't handle that case because we need max performance and Solarite never passes integers to this function.
- *
- * @param obj {*}
- * @returns {string} */
-function getObjectHash(obj) {
-	let result;
-	isHashing = true;
-	try {
-		result = JSON.stringify(obj);
-	}
-	catch(e) {
-		result = getObjectHashCircular(obj);
-	}
-	isHashing = false;
-	return result;
-}
+	bindId(root, el) {
+		let id = el.getAttribute('data-id') || el.getAttribute('id');
+		if (id) { // If something hasn't removed the id.
 
-/**
- * Slower hashing method that supports.
- * @param obj
- * @returns {string} */
-function getObjectHashCircular(obj) {
+			// Don't allow overwriting existing class properties if they already have a non-Node value.
+			if (root[id] && !(root[id] instanceof Node))
+				throw new Error(`${root.constructor.name}.${id} already has a value.  ` +
+					`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
 
-	//console.log('circular')
-	// Slower version that handles circular references.
-	// Just adding any callback at all, even one that just returns the value, makes JSON.stringify() twice as slow.
-	const seen = new Set();
-	return JSON.stringify(obj, (key, value) => {
-		if (typeof value === 'object' && value !== null) {
-			if (seen.has(value))
-				return getObjectId(value);
-			seen.add(value);
+			delve(root, id.split(/\./g), el);
 		}
-		return value;
-	});
-}
-
-
-
-var Globals = {
-
-	/**
-	 * Used by NodeGroup.applyComponentExprs() */
-	componentHash: new WeakMap(),
-
-	/**
-	 * Store which instances of Solarite have already been added to the DOM.
-	 * @type {WeakSet<HTMLElement>} */
-	connected: new WeakSet(),
-
-	/**
-	 * Elements that have been rendered to by r() at least once.
-	 * This is used by the Solarite class to know when to call onFirstConnect()
-	 * @type {WeakSet<HTMLElement>} */
-	rendered: new WeakSet(),
-
-	/**
-	 * Used by watch3 to see which expressions are being accessed.
-	 * @type {[]}*/
-	currentExprPath: null,
-
-	/**
-	 * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
-	elementClasses: {},
-
-	/**
-	 * Used by ExprPath.applyEventAttrib()
-	 * @type {WeakMap<Node, Object<eventName:string, [original:function, bound:function, args:*[]]>>} */
-	nodeEvents: new WeakMap(),
-
-	/**
-	 * Get the RootNodeGroup for an element.
-	 * @type {WeakMap<HTMLElement, RootNodeGroup>} */
-	nodeGroups: new WeakMap(),
-
-	/**
-	 * Used by r() path 9. */
-	objToEl: new WeakMap(),
-
-	pendingChildren: [],
-
-	/**
-	 * 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>} */
-	shells: new WeakMap()
-};
-
-let Util = {
-
+	 * @param style {HTMLStyleElement}
+	 * @param root {HTMLElement} */
 	bindStyles(style, root) {
 		let styleId = root.getAttribute('data-style');
 		if (!styleId) {
@@ -411,17 +249,60 @@ let Util = {
 			root.setAttribute('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}[data-style="${styleId}"]`);
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
 		}
 	},
 
+
+	/**
+	 * Convert a Proper Case name to a name with dashes.
+	 * Dashes will be placed between letters and numbers.
+	 * If there are multiple consecutive capital letters followed by another chracater, a dash will be placed before the last capital letter.
+	 * @param str {string}
+	 * @return {string}
+	 *
+	 * @example
+	 * 'ProperName' => 'proper-name'
+	 * 'HTMLElement' => 'html-element'
+	 * 'BigUI' => 'big-ui'
+	 * 'UIForm' => 'ui-form'
+	 * 'A100' => 'a-100' */
+	camelToDashes(str) {
+		// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
+		str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
+
+		// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
+		str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
+
+		// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
+		str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
+
+		// Convert all the remaining capital letters to lowercase.
+		return str.toLowerCase();
+	},
+
+	/**
+	 * Converts a string written in kebab-case to camelCase.
+	 *
+	 * @param {string} str - The input string written in kebab-case.
+	 * @return {string} - The resulting camelCase string.
+	 *
+	 * @example
+	 * dashesToCamel('example-string') // Returns 'exampleString'
+	 * dashesToCamel('another-example-test') // Returns 'anotherExampleTest' */
+	dashesToCamel(str) {
+		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+	},
+
+
 	/**
 	 * A generator function that recursively traverses and flattens a value.
 	 *
@@ -465,6 +346,7 @@ let Util = {
 	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
 	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
 	getInputValue(node) {
+		// .type is a built-in DOM property
 		if (node.type === 'checkbox' || node.type === 'radio')
 			return node.checked; // Boolean
 		if (node.type === 'file')
@@ -480,47 +362,62 @@ let Util = {
 	},
 
 	/**
-	 * Is it an array and a path that can be evaluated by delve() ?
-	 * @param arr {Array|*}
+	 * @param el {HTMLElement}
+	 * @param prop {string}
 	 * @returns {boolean} */
-	isPath(arr) {
-		return Array.isArray(arr) && typeof arr[0] === 'object' && !arr.slice(1).find(p => typeof p !== 'string' && typeof p !== 'number');
-	},
-
-	/**
-	 * Find NodeGroups that had their nodes removed and add those nodes to a Fragment so
-	 * they're not lost forever and the NodeGroup's internal structure is still consistent.
-	 * This saves all of a NodeGroup's nodes in order, so that nextChildNode still works.
-	 * This is necessary because a NodeGroup normally only stores the first and last node.
-	 * Called from ExprPath.apply().
-	 * @param oldNodeGroups {NodeGroup[]}
-	 * @param oldNodes {Node[]} */
-	saveOrphans(oldNodeGroups, oldNodes) {
-		let oldNgMap = new Map();
-		for (let ng of oldNodeGroups) {
-			oldNgMap.set(ng.startNode, ng);
-
-			// TODO: Is this necessary?
-			// if (ng.parentPath)
-			// 	ng.parentPath.clearNodesCache();
-		}
-
-		for (let i=0, node; node = oldNodes[i]; i++) {
-			let ng;
-			if (!node.parentNode && (ng = oldNgMap.get(node))) {
-				//ng.nodesCache = [];
-				let fragment = document.createDocumentFragment();
-				let endNode = ng.endNode;
-				while (node !== endNode) {
-					fragment.append(node);
-					//ng.nodesCache.push(node);
-					i++;
-					node = oldNodes[i];
-				}
-				fragment.append(endNode);
-				//ng.nodesCache.push(endNode);
+	isHtmlProp(el, prop) {
+		let key = el.tagName + '.' + prop;
+		let result = Globals$1.htmlProps[key];
+		if (result === undefined) { // Caching just barely makes this slightly faster.
+			let proto = Object.getPrototypeOf(el);
+
+			// Find the first HTMLElement that we inherit from (not our own classes)
+			while (proto) {
+				const ctorName = proto.constructor.name;
+				if (ctorName.startsWith('HTML') && ctorName.endsWith('Element'))
+					break
+				proto = Object.getPrototypeOf(proto);
 			}
+			Globals$1.htmlProps[key] = result = (proto
+				? !!Object.getOwnPropertyDescriptor(proto, prop)?.set
+				: false);
 		}
+		return result;
+	},
+
+	/**
+	 * Is it an array and a path that can be evaluated by delve() ?
+	 * We allow the first element to be null/undefined so binding can report errors.
+	 * @param arr {Array|*}
+	 * @returns {boolean} */
+	isPath(arr) {
+		return Array.isArray(arr) && arr.length >=2  // An array of at least two elements.
+			&& (typeof arr[0] === 'object' || arr[0] === undefined) // Where the first element is an object, null, or undefined.
+			&& !arr.slice(1).find(p => typeof p !== 'string' && typeof p !== 'number'); // Path 1..x is only numbers and strings.
+	},
+
+	isFalsy(val) {
+		return val === undefined || val === false || val === null;
+	},
+
+	isPrimitive(val) {
+		return typeof val === 'string' || typeof val === 'number'
+	},
+
+	/**
+	 * If val is a function, evaluate it recursively until the result is not a function.
+	 * If it's an array or an object, convert it to Json.
+	 * If it's a Date, format it as Y-m-d H:i:s
+	 * @param val
+	 * @returns {string|number|boolean} */
+	makePrimitive(val) {
+		if (typeof val === 'function')
+			return Util.makePrimitive(val());
+		else if (val instanceof Date)
+			return val.toISOString().replace(/T/, ' ');
+		else if (Array.isArray(val) || typeof val === 'object')
+			return ''; // JSON.stringify(val);
+		return val;
 	},
 
 	/**
@@ -551,44 +448,14 @@ let Util = {
 
 
 
-let div = document.createElement('div');
-
-let isEvent = attrName => attrName.startsWith('on') && attrName in div;
-
-
-/**
- * Convert a Proper Case name to a name with dashes.
- * Dashes will be placed between letters and numbers.
- * If there are multiple consecutive capital letters followed by another chracater, a dash will be placed before the last capital letter.
- * @param str {string}
- * @return {string}
- *
- * @example
- * 'ProperName' => 'proper-name'
- * 'HTMLElement' => 'html-element'
- * 'BigUI' => 'big-ui'
- * 'UIForm' => 'ui-form'
- * 'A100' => 'a-100' */
-function camelToDashes(str) {
-	// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
-	str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
-
-	// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
-	str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
-
-	// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
-	str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
-
-	// Convert all the remaining capital letters to lowercase.
-	return str.toLowerCase();
-}
+let isEvent = attrName => attrName.startsWith('on') && attrName in Globals$1.div;
 
 
 
 
 
 /**
- * Returns false if they're the same.  Or the first index where they differ.
+ * Returns true if they're the same.
  * @param a
  * @param b
  * @returns {boolean} */
@@ -603,84 +470,250 @@ function arraySame(a, b) {
 }
 
 
+
+
+
+// For debugging only
+
+
+function defineClass(Class, tagName, extendsTag) {
+	if (!customElements[getName](Class)) { // If not previously defined.
+		tagName = tagName || Util.camelToDashes(Class.name);
+		if (!tagName.includes('-'))
+			tagName += '-element';
+
+		let options = null;
+		if (extendsTag)
+			options = {extends: extendsTag};
+
+		customElements[define](tagName, Class, options);
+	}
+}
+
 /**
- * TODO: Turn this into a class because it has internal state.
- * TODO: Don't break on 3<a inside a <script> or <style> tag.
- * @param html {?string} Pass null to reset context.
- * @returns {string} */
-function htmlContext(html) {
-	if (html === null) {
-		state = {...defaultState};
-		return state.context;
-	}
-	for (let i = 0; i < html.length; i++) {
-		const char = html[i];
-		switch (state.context) {
-			case htmlContext.Text:
-				if (char === '<' && html[i+1].match(/[a-z!]/i)) { // Start of a tag or comment.
-					// if (html.slice(i, i+4) === '<!--')
-					// 	state.context = htmlContext.Comment;
-					// else
-						state.context = htmlContext.Tag;
-					state.buffer = '';
-				}
-				break;
-			case htmlContext.Tag:
-				if (char === '>') {
-					state.context = htmlContext.Text;
-					state.quote = null;
-					state.buffer = '';
-				} else if (char === ' ' && !state.buffer) {
-					// No attribute name is present. Skipping the space.
-					continue;
-				} else if (char === ' ' || char === '/' || char === '?') {
-					state.buffer = '';  // Reset the buffer when a delimiter or potential self-closing sign is found.
-				} else if (char === '"' || char === "'" || char === '=') {
-					state.context = htmlContext.Attribute;
-					state.quote = char === '=' ? null : char;
-					state.buffer = '';
-				} else {
-					state.buffer += char;
+ * 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.
+ * 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.
+ *
+ * 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 = Util$1.callback();
+		
+		onFirstConnect = Util$1.callback();
+		onDisconnect = Util$1.callback();
+
+		/**
+		 * @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.createNewComponent()
+			// 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);
 				}
-				break;
-			case htmlContext.Attribute:
-				if (!state.quote && !state.buffer.length && (char === '"' || char === "'"))
-					state.quote = char;
-
-				else if (char === state.quote || (!state.quote && state.buffer.length)) {
-					state.context = htmlContext.Tag;
-					state.quote = null;
-					state.buffer = '';
-				} else if (!state.quote && char === '>') {
-					state.context = htmlContext.Text;
-					state.quote = null;
-					state.buffer = '';
-				} else if (char !== ' ') {
-					state.buffer += char;
+			})*/
+
+			/*
+			let pthis = new Proxy(this, {
+				get(obj, prop) {
+					return Reflect.get(obj, prop)
 				}
-				break;
+			});
+			this.render = this.render.bind(pthis);
+			*/
+		}
+
+		/**
+		 * Call render() only if it hasn't already been called.	 */
+		renderFirstTime() {
+			if (!Globals$1.rendered.has(this) && this.render)
+				this.render();
+		}
+		
+		/**
+		 * Called automatically by the browser. */
+		connectedCallback() {
+			this.renderFirstTime();
+			if (!Globals$1.connected.has(this)) {
+				Globals$1.connected.add(this);
+				this.onFirstConnect();
+			}
+			this.onConnect();
+		}
+		
+		disconnectedCallback() {
+			this.onDisconnect();
 		}
 
+
+		static define(tagName=null) {
+			defineClass(this, tagName, extendsTag);
+		}
 	}
-	return state.context;
 }
 
+// Trick to prevent minifier from renaming this method.
+let define = 'define';
+let getName = 'getName';
+
+
+
+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();
 
-htmlContext.Attribute = 'Attribute';
-htmlContext.Text = 'Text';
-htmlContext.Tag = 'Tag';
-//htmlContext.Comment = 'Comment';
-let defaultState = {
-	context: htmlContext.Text, // possible values: 'TEXT', 'TAG', 'ATTRIBUTE'
-	quote: null, // possible values: null, '"', "'"
-	buffer: '',
-	lastChar: null
-};
-let state = {...defaultState};
+/**
+ * @param obj {Object|string|Node}
+ * @returns {string} */
+function getObjectId(obj) {
+	// if (typeof obj === 'function')
+	// 	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()
+		objectIds.set(obj, result);
+	}
+	return result;
+}
+
+/**
+ * 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. */
+let isHashing = true;
+function toJSON() {
+	return isHashing ? getObjectId(this) : this
+}
 
 
-// For debugging only
-
+// Node.prototype.toJSON = toJSON;
+// Function.prototype.toJSON = toJSON;
+
+
+/**
+ * Get a string that uniquely maps to the values of the given object.
+ * If a value in obj changes, calling getObjectHash(obj) will then return a different hash.
+ * This is used by NodeGroupManager to create a hash that represents the current values of a NodeGroup.
+ *
+ * Relies on the Node and Function prototypes being overridden above.
+ *
+ * Note that passing an integer may collide with the number we get from hashing an object.
+ * But we don't handle that case because we need max performance and Solarite never passes integers to this function.
+ *
+ * @param obj {*}
+ * @returns {string} */
+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()
+	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);
+	}
+	catch(e) {
+		result = getObjectHashCircular(obj);
+	}
+	isHashing = false;
+	return result;
+}
+
+/**
+ * Slower hashing method that supports.
+ * @param obj
+ * @returns {string} */
+function getObjectHashCircular(obj) {
+
+	//console.log('circular')
+	// Slower version that handles circular references.
+	// Just adding any callback at all, even one that just returns the value, makes JSON.stringify() twice as slow.
+	const seen = new Set();
+	return JSON.stringify(obj, (key, value) => {
+		if (typeof value === 'object' && value !== null) {
+			if (seen.has(value))
+				return getObjectId(value);
+			seen.add(value);
+		}
+		return value;
+	});
+}
 
 class MultiValueMap {
 
@@ -718,23 +751,14 @@ class MultiValueMap {
 	 * @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) {
-		// if (key === '["Html2",[[["Html3",["F1","A"]],["Html3",["F1","B"]]]]]')
-		// 	debugger;
-
 		let data = this.data;
-
-		// if (!data.hasOwnProperty(key))
-		// 	return undefined;
-
-		// Delete a specific value.
 		let result;
 		let set = data[key];
-		if (!set) // slower than pre-check.
+		if (!set)
 			return undefined;
 
 		// Delete any value.
 		if (val === undefined) {
-			//result = set.values().next().value; // get first item from set.
 			[result] = set; // Does the same as above and seems to be about the same speed.
 			set.delete(result);
 		}
@@ -745,7 +769,6 @@ class MultiValueMap {
 			result = val;
 		}
 
-		// TODO: Will this make it slower?
 		if (set.size === 0)
 			delete data[key];
 
@@ -753,27 +776,64 @@ class MultiValueMap {
 	}
 
 	/**
-	 * Try to delete an item that matches the key and the isPreferred function.
-	 * if not the latter, just delete any item that matches the key.
+	 * Remove one value from a key, and return it.
 	 * @param key {string}
-	 * @param isPreferred {function}
 	 * @returns {*|undefined} The deleted item. */
-	deletePreferred(key, isPreferred) {
-		let result;
+	deleteAny(key) {
 		let data = this.data;
+		let result;
 		let set = data[key];
-		if (!set)
+		if (!set) // slower than pre-check.
 			return undefined;
 
-		for (let val of set)
-			if (isPreferred(val)) {
-				set.delete(val);
-				result = val;
-				break;
-			}
-		if (!result) {
-			[result] = set;
-			set.delete(result);
+		[result] = set; // Does the same as above and seems to be about the same speed.
+		set.delete(result);
+
+		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];
+
+		return result;
+	}
+
+
+	/**
+	 * Try to delete an item that matches the key and the isPreferred function.
+	 * if not the latter, just delete any item that matches the key.
+	 * @param key {string}
+	 * @returns {*|undefined} The deleted item. */
+	deletePreferred(key, parent) {
+		let result;
+		let data = this.data;
+		let set = data[key];
+		if (!set)
+			return undefined;
+
+		for (let val of set) {
+			if (val?.parentNode === parent) {
+				set.delete(val);
+				result = val;
+				break;
+			}
+		}
+		if (!result) {
+			[result] = set;
+			set.delete(result);
 		}
 
 		if (set.size === 0)
@@ -982,14 +1042,19 @@ const udomdiff = (parentNode, a, b, before) => {
 	return b;
 };
 
+//import {ArraySpliceOp} from "./watch.js";
+
+
 /**
  * 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 {
 
+	
+
 	/**
-	 * @type {PathType} */
+	 * @type {ExprPathType} */
 	type;
 
 	// Used for attributes:
@@ -1005,8 +1070,6 @@ class ExprPath {
 	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
 	attrNames;
 
-
-
 	/**
 	 * @type {Node} Node that occurs before this ExprPath's first Node.
 	 * This is necessary because udomdiff() can steal nodes from another ExprPath.
@@ -1048,16 +1111,23 @@ class ExprPath {
 	nodeMarkerPath;
 
 
-	/** @type {?function} */
+	/** @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;
+
 	/**
 	 * @param nodeBefore {Node}
 	 * @param nodeMarker {?Node}
-	 * @param type {PathType}
+	 * @param type {ExprPathType}
 	 * @param attrName {?string}
 	 * @param attrValue {string[]} */
-	constructor(nodeBefore, nodeMarker, type=PathType.Content, attrName=null, attrValue=null) {
+	constructor(nodeBefore, nodeMarker, type=ExprPathType.Content, attrName=null, attrValue=null) {
 
 		// If path is a node.
 		this.nodeBefore = nodeBefore;
@@ -1065,7 +1135,7 @@ class ExprPath {
 		this.type = type;
 		this.attrName = attrName;
 		this.attrValue = attrValue;
-		if (type === PathType.Multiple)
+		if (type === ExprPathType.AttribMultiple)
 			this.attrNames = new Set();
 	}
 
@@ -1079,36 +1149,27 @@ class ExprPath {
 	 * We should modify path.applyValueAttrib so it stores the procssed parts and then only calls
 	 * setAttribute() once all the pieces are in place.
 	 *
-	 * @param expr {Expr}
 	 * @param exprs {Expr[]}
-	 * @param exprIndex {int}
-	 * @param componentExprs {object}
-	 * @returns {int} */
-	apply(expr, exprs=null, exprIndex=0, componentExprs={}) {
+	 * @param freeNodeGroups {boolean} */
+	apply(exprs, freeNodeGroups=true) {
 		switch (this.type) {
 			case 1: // PathType.Content:
-				this.applyNodes(expr);
+				this.applyNodes(exprs[0], freeNodeGroups);
 				break;
 			case 2: // PathType.Multiple:
-				this.applyMultipleAttribs(this.nodeMarker, expr);
+				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, expr, this.parentNg.rootNg.root);
+				this.applyEventAttrib(this.nodeMarker, exprs[0], this.parentNg.rootNg.root);
 				break;
-			default:
-				if (this.type === 4 /*PathType.Component*/ && this.nodeMarker !== this.parentNg.rootNg.root)
-					componentExprs[this.attrName] = expr;
-				else {
-					// One attribute value may have multiple expressions.  Here we apply them all at once.
-					exprIndex = this.applyValueAttrib(this.nodeMarker, exprs || [expr], exprIndex);
-				}
+			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;
 		}
-
-		return exprIndex;
 	}
 
 	/**
@@ -1116,14 +1177,16 @@ class ExprPath {
 	 * Called by applyExprs()
 	 * This function is recursive, as the functions it calls also call it.
 	 * @param expr {Expr}
+	 * @param freeNodeGroups {boolean}
 	 * @return {Node[]} New Nodes created. */
-	applyNodes(expr) {
+	applyNodes(expr, freeNodeGroups=true) {
 		let path = this;
 
 		// This can be done at the beginning or the end of this function.
 		// If at the end, we may get rendering done faster.
 		// But when at the beginning, it leaves all the nodes in-use so we can do a renderWatched().
-		path.freeNodeGroups();
+		if (freeNodeGroups)
+			path.freeNodeGroups();
 
 		
 
@@ -1133,10 +1196,10 @@ class ExprPath {
 		
 		let secondPass = []; // indices
 
-		path.nodeGroups = []; // Reset before applyExact and the code below rebuilds it.
-		path.applyExact(expr, newNodes, secondPass);
+		path.nodeGroups = []; // Reset before applyExactNodes and the code below rebuilds it.
+		path.applyExactNodes(expr, newNodes, secondPass);
 
-		this.existingTextNodes = null;
+		//this.existingTextNodes = null;
 
 		// TODO: Create an array of old vs Nodes and NodeGroups together.
 		// If they're all the same, skip the next steps.
@@ -1195,7 +1258,7 @@ class ExprPath {
 
 			for (let ng of oldNodeGroups)
 				if (!ng.startNode.parentNode)
-					ng.saveOrphans();
+					ng.removeAndSaveOrphans();
 		}
 
 
@@ -1203,49 +1266,143 @@ class ExprPath {
 	}
 
 	/**
-	 * Used by watch() for replacing individual loop items. */
-	applyLoopItemUpdate(index, template) {
-		// At this point none of the nodes being used will be in nodeGroupsFree.
-		let oldNg = this.nodeGroups[index];
-		this.nodeGroupsFree.add(oldNg.exactKey, oldNg);
-		this.nodeGroupsFree.add(oldNg.closeKey, oldNg);
+	 * Used by watch() for inserting/removing/replacing individual loop items.
+	 * @param op {ArraySpliceOp} */
+	applyArrayOp(op) {
 
-		let ng = this.getNodeGroup(template, true);
-		if (ng) {
-			return; // It's an exactl match, so replace nothing.
-		}
+		// 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?
 
-		ng = this.getNodeGroup(template, false);
+					// Splice in the new nodes.
+					let insertBefore = oldNg.startNode;
+					for (let node of ng.getNodes())
+						insertBefore.parentNode.insertBefore(node, insertBefore);
 
-		this.nodeGroups[index] = ng;
+					// Remove the old nodes.
+					if (ng !== oldNg)
+						oldNg.removeAndSaveOrphans();
+				}
+			});
+		}
 
-		// Splice in the new nodes.
-		for (let node of ng.getNodes()) {
-			oldNg.startNode.parentNode.insertBefore(node, oldNg.startNode);
+		// 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);
 		}
 
-		if (oldNg !== ng) {
-			for (let node of oldNg.getNodes())
-				node.remove();
-			oldNg.saveOrphans();
+		// 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);
+
+		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()
+
+			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;
+
+			this.exprToTemplates(expr, callback);
+		}
+
+		// 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);
+	}
+
 
 	/**
-	 * Apply Nodes that are an exact match.
+	 * Try to apply Nodes that are an exact match, by finding existing nodes from the last render
+	 * that have the same value as created by the expr.
+	 * This is called from ExprPath.applyNodes().
+	 *
 	 * @param expr {Template|Node|Array|function|*}
-	 * @param newNodes {(Node|Template)[]}
-	 * @param secondPass {Array} Locations within newNodes to evaluate later. */
-	applyExact(expr, newNodes, secondPass) {
+	 * @param newNodes {(Node|Template)[]} An inout parameter; we add the nodes here as we go.
+	 * @param secondPass {[int, int][]} Locations within newNodes for ExprPath.applyNodes() to evaluate later,
+	 *   when it tries to find partial matches. */
+	applyExactNodes(expr, newNodes, secondPass) {
 
 		if (expr instanceof Template) {
-
 			let ng = this.getNodeGroup(expr, true);
 			if (ng) {
 
@@ -1263,7 +1420,7 @@ class ExprPath {
 			}
 		}
 
-		// Node created by an expression.
+		// Node(s) created by an expression.
 		else if (expr instanceof Node) {
 
 			// DocumentFragment created by an expression.
@@ -1276,49 +1433,50 @@ class ExprPath {
 		// Arrays and functions.
 		// I tried iterating over the result of a generator function to avoid this recursion and simplify the code,
 		// but that consistently made the js-framework-benchmarks a few percentage points slower.
-		else if (Array.isArray(expr))
+		else {
+			this.exprToTemplates(expr, template => {
+				this.applyExactNodes(template, newNodes, secondPass);
+			});
+
+		}
+
+		// Old version
+		/*else if (Array.isArray(expr))
 			for (let subExpr of expr)
-				this.applyExact(subExpr, newNodes, secondPass);
+				this.applyExactNodes(subExpr, newNodes, secondPass);
 
 		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.currentExprPath = [this, expr]; // Used by watch3()
+			Globals.currentExprPath = this; // Used by watch()
+
 			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
-			let result = expr();
+			let result = expr(); // As expr accesses watched variables, watch() uses Globals.currentExprPath to mark where those watched variables are being used.
 			Globals.currentExprPath = null;
 
-			this.applyExact(result, newNodes, secondPass);
+			this.applyExactNodes(result, newNodes, secondPass);
 		}
 
-		// Text
+		// String
 		else {
-			// Convert falsy values (but not 0) to empty string.
-			// Convert numbers to string so they compare the same.
-			let text = (expr === undefined || expr === false || expr === null) ? '' : (expr + '');
-
-			// Fast path for updating the text of a single text node.
-			let first = this.nodeBefore.nextSibling;
-			if (first.nodeType === 3 && first.nextSibling === this.nodeMarker && !newNodes.includes(first)) {
-				if (first.textContent !== text)
-					first.textContent = text;
-
-				newNodes.push(first);
+			// Convert expression to a string.
+			let stringExpr = expr;
+			if (expr === undefined || expr === false || expr === null) // Util.isFalsy()
+				stringExpr = '';
+			else if (typeof expr !== 'string')
+				stringExpr = expr + '';
+
+			// Get the same Template for the same string each time.
+			let template = Globals.stringTemplates[stringExpr];
+			if (!template) {
+			template = new Template([stringExpr], []);
+				Globals.stringTemplates[stringExpr] = template;
 			}
 
-			else {
-				// TODO: Optimize this into a Set or Map or something?
-				if (!this.existingTextNodes)
-					this.existingTextNodes = this.getNodes().filter(n => n.nodeType === 3);
-
-				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
-				if (idx !== -1)
-					newNodes.push(...this.existingTextNodes.splice(idx, 1));
-				else
-					newNodes.push(this.nodeMarker.ownerDocument.createTextNode(text));
-			}
-		}
+			// Recurse.
+			this.applyExactNodes(template, newNodes, secondPass);
+		}*/
 	}
 
 	applyMultipleAttribs(node, expr) {
@@ -1331,6 +1489,13 @@ class ExprPath {
 		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;
+			}
+
 			let attrs = (expr +'') // Split string into multiple attributes.
 				.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s]+))/g)
 				.map(text => text.trim())
@@ -1364,46 +1529,51 @@ class ExprPath {
 
 		let eventName = this.attrName.slice(2); // remove "on-" prefix.
 		let func;
-
-		// Convert array to function.
 		let args = [];
-		if (Array.isArray(expr)) {
-
-			// oninput=${[this.doSomething, 'meow']}
-			if (typeof expr[0] === 'function') {
-				func = expr[0];
-				args = expr.slice(1);
-			}
 
-			// oninput=${[this, 'value']}
-			else {
-				func = setValue;
-				args = [expr[0], expr.slice(1), node];
-				node.value = delve(expr[0], expr.slice(1));
-				// root.render(); // TODO: This causes infinite recursion.
-			}
+		// Convert array to function.
+		// oninput=${[this.doSomething, 'meow']}
+		if (Array.isArray(expr) && typeof expr[0] === 'function') {
+			func = expr[0];
+			args = expr.slice(1);
 		}
-		else
+		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.nodeEvents.get(node);
+		let nodeEvents = Globals$1.nodeEvents.get(node);
 		if (!nodeEvents) {
 			nodeEvents = {[key]: new Array(3)};
-			Globals.nodeEvents.set(node, nodeEvents);
+			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);
@@ -1433,68 +1603,144 @@ class ExprPath {
 		nodeEvents[key][2] = args;
 	}
 
-	applyValueAttrib(node, exprs, exprIndex) {
-		let expr = exprs[exprIndex];
-
-		// Values to toggle an attribute
-		if (!this.attrValue && (expr === false || expr === null || expr === undefined))
-			node.removeAttribute(this.attrName);
-
-		else if (!this.attrValue && expr === true)
-			node.setAttribute(this.attrName, '');
+	/**
+	 * 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.createNewComponent() for components.
-		else if ((this.attrName === 'value' || this.attrName === 'data-value') && Util.isPath(expr)) {
+		if (Util.isPath(expr)) {
 			let [obj, path] = [expr[0], expr.slice(1)];
-			node.value = delve(obj, path);
-			// TODO: We need to remove any old listeners, like in bindEventAttribute
 
+			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 = () => {
-				delve(obj, path, Util.getInputValue(node));
+				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.
-			this.bindEvent(node, path[0], 'value', 'input', func, [], true);
+			// 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 {
-			let value = [];
-
-			// We go backward because NodeGroup.applyExprs() calls this function, and it goes backward through the exprs.
-			if (this.attrValue) {
-				for (let i=this.attrValue.length-1; i>=0; i--) {
-					value.unshift(this.attrValue[i]);
-					if (i > 0) {
-						let val = exprs[exprIndex];
-						if (val !== false && val !== null && val !== undefined)
-							value.unshift(val);
-						exprIndex--;
+			// 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);
+
+			// 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();
 				}
-				exprIndex ++;
+				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, '');
 			}
-			else
-				value.unshift(expr);
 
-			let joinedValue = value.join('');
+			// A non-toggled attribute
+			else {
 
-			// Only update attributes if the value has changed.
-			// The .value property is special.  If it changes we don't update the attribute.
-			let oldVal = this.attrName === 'value' ? node.value : node.getAttribute(this.attrName);
-			if (oldVal !== joinedValue) {
-				node.setAttribute(this.attrName, joinedValue);
-			}
+				// 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('');
+				}
 
-			// This is needed for setting input.value, .checked, option.selected, etc.
-			// But in some cases setting the attribute is enough.  such as div.setAttribute('title') updates div.title.
-			// TODO: How to tell which is which?
-			if (this.attrName in node)
-				node[this.attrName] = joinedValue;
+				// If the attribute is one expression with no strings:
+				else
+					joinedValue = expr;
+
+				// 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;
+					// TODO: Putting an 'else' here would be more performant
+					node.setAttribute(this.attrName, joinedValue);
+				}
+			}
 		}
-
-		return exprIndex;
 	}
 
 
@@ -1510,7 +1756,8 @@ class ExprPath {
 		let nodeMarker, nodeBefore;
 		let root = newRoot;
 		let path = pathOffset ? this.nodeMarkerPath.slice(0, -pathOffset) : this.nodeMarkerPath;
-		for (let i=path.length-1; i>0; i--) // Resolve the path.
+		let length = path.length-1;
+		for (let i=length; i>0; i--) // Resolve the path.
 			root = root.childNodes[path[i]];
 		let childNodes = root.childNodes;
 
@@ -1550,7 +1797,7 @@ class ExprPath {
 
 	/**
 	 * Attempt to remove all of this ExprPath's nodes from the DOM, if it can be done using a special fast method.
-	 * @returns {boolean} Returns false if Nodes werne't removed, and they should instead be removed manually. */
+	 * @returns {boolean} Returns false if Nodes weren't removed, and they should instead be removed manually. */
 	fastClear() {
 		let parent = this.nodeBefore.parentNode;
 		if (this.nodeBefore === parent.firstChild && this.nodeMarker === parent.lastChild) {
@@ -1586,6 +1833,10 @@ class ExprPath {
 		// 	result2.push(...ng.getNodes())
 		// return result2;
 
+		if (this.type === ExprPathType.AttribValue || this.type === ExprPathType.AttribMultiple || this.type === ExprPathType.ComponentAttribValue) {
+			return [this.nodeMarker];
+		}
+
 
 		let result;
 
@@ -1610,7 +1861,8 @@ class ExprPath {
 		return result;
 	}
 
-	getParentNode() { // Same as this.parentNode
+	/** @return {HTMLElement|ParentNode} */
+	getParentNode() {
 		return this.nodeMarker.parentNode
 	}
 
@@ -1627,28 +1879,39 @@ class ExprPath {
 	 *         or createa  new NodeGroup from the template.
 	 * @return {NodeGroup} */
 	getNodeGroup(template, exact=true) {
-		//if (exact && this.nodeGroupsFree.isEmpty())
-		//	return null;
 
 		let result;
+		let collection = this.nodeGroupsAttachedAvailable;
 
 		// TODO: Would it be faster to maintain a separate list of detached nodegroups?
 		if (exact) { // [below] parentElement will be null if the parent is a DocumentFragment
-			result = this.nodeGroupsFree.deletePreferred(template.getExactKey(), ng=>ng.startNode.parentElement);
+			result = collection.deleteAny(template.getExactKey());
+			if (!result) { // try searching detached
+				collection = this.nodeGroupsDetachedAvailable;
+				result = collection.deleteAny(template.getExactKey());
+			}
+
 			if (result) // also delete the matching close key.
-				this.nodeGroupsFree.delete(template.getCloseKey(), result);
-			else
+				collection.deleteSpecific(template.getCloseKey(), result);
+			else {
 				return null;
+			}
 		}
 
 		// Find a close match.
 		// This is a match that has matching html, but different expressions applied.
 		// We can then apply the expressions to make it an exact match.
-		else {
-			result = this.nodeGroupsFree.deletePreferred(template.getCloseKey(), ng=>ng.startNode.parentElement);
+		// If the template has no expressions, the key is the html, and we've already searched for an exact match.  There won't be an inexact match.
+		else if (template.exprs.length) {
+			result = collection.deleteAny(template.getCloseKey());
+			if (!result) { // try searching detached
+				collection = this.nodeGroupsDetachedAvailable;
+				result = collection.deleteAny(template.getCloseKey());
+			}
+
 			if (result) {
 				
-				this.nodeGroupsFree.delete(result.exactKey, result);
+				collection.deleteSpecific(result.exactKey, result);
 
 				// Update this close match with the new expression values.
 				result.applyExprs(template.exprs);
@@ -1660,95 +1923,85 @@ class ExprPath {
 			result = new NodeGroup(template, this);
 
 		// old:
-		this.nodeGroupsInUse.push(result);
-
-		// new:
-		// let ngiu = this.nodeGroupsInUse;
-		// ngiu.add(result.exactKey, result);
-		// ngiu.add(result.closeKey, result);
+		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[]} */
-	nodeGroupsInUse = [];
-
-	/** @type {MultiValueMap<key:string, value:NodeGroup>} */
-	//nodeGroupsInUse = new MultiValueMap();
+	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>} */
-	nodeGroupsFree = new MultiValueMap();
+	nodeGroupsAttachedAvailable = new MultiValueMap();
 
-	nodeGroupsDetached = 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.nodeGroupsInUse to this.nodeGroupsFree.
+	 * Move everything from this.nodeGroupsRendered to this.nodeGroupsAttached and nodeGroupsDetached.
+	 * Called at the beginning of applyNodes() so it can have NodeGroups to use.
 	 * TODO: this could run as needed in getNodeGroup? */
 	freeNodeGroups() {
-		// old:
-
-		//this.nodeGroupsDetached = this.nodeGroupsFree;
-		//this.nodeGroupsFree = new MultiValueMap();
+		// Add nodes that weren't used during render() to nodeGroupsDetached
+		let previouslyAttached = this.nodeGroupsAttachedAvailable.data;
+		let detached = this.nodeGroupsDetachedAvailable.data;
+		for (let key in previouslyAttached) {
+			let set = detached[key];
+			if (!set)
+				detached[key] = previouslyAttached[key];
+			else
+				for (let ng of previouslyAttached[key])
+					set.add(ng);
+		}
 
-		let ngf = this.nodeGroupsFree;
-		for (let ng of this.nodeGroupsInUse) {
-			ngf.add(ng.exactKey, ng);
-			ngf.add(ng.closeKey, ng);
+		// Add nodes that were used during render() to nodeGroupsRendered.
+		this.nodeGroupsAttachedAvailable = new MultiValueMap();
+		let nga = this.nodeGroupsAttachedAvailable;
+		for (let ng of this.nodeGroupsRendered) {
+			nga.add(ng.exactKey, ng);
+			nga.add(ng.closeKey, ng);
 		}
-		this.nodeGroupsInUse = [];
 
-		// new:
-		// for (let key in this.nodeGroupsFree.data)
-		// 	for (let item of this.nodeGroupsFree.data[key])
-		// 		this.nodeGroupsInUse.add(key, item);
-		//
-		// this.nodeGroupsFree = this.nodeGroupsInUse;
-		// this.nodeGroupsInUse = new MultiValueMap();
+		this.nodeGroupsRendered = [];
 	}
 
 	
 }
 
-
-
-/**
- *
- * @param root
- * @param path {string[]}
- * @param node {HTMLElement}
- */
-function setValue(root, path, node) {
-	let val = node.value;
-	if (node.type === 'number')
-		val = parseFloat(val);
-
-	delve(root, path, val);
-}
-
 /** @enum {int} */
-const PathType = {
+const ExprPathType = {
 	/** Child of a node */
 	Content: 1,
-	
+
 	/** One or more whole attributes */
-	Multiple: 2,
-	
+	AttribMultiple: 2,
+
 	/** Value of an attribute. */
-	Value: 3,
-	
+	AttribValue: 3,
+
 	/** Value of an attribute being passed to a component. */
-	Component: 4,
-	
+	ComponentAttribValue: 4,
+
 	/** Expressions inside Html comments. */
 	Comment: 5,
 
@@ -1774,116 +2027,177 @@ function getNodePath(node) {
  * 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} */
+ * @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};
+	}
+
+	reset() {
+		this.state = {...this.defaultState};
+		return this.state.context;
+	}
+
+	/**
+	 * 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();
+
+		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';
+
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
  * but without any expressions filled in.
  * Only one Shell is created for all the items in a loop.
  *
  * When a NodeGroup is created from a Template's html strings,
- * the NodeGroup then clones the Shell's fragmentn to be its nodes. */
+ * the NodeGroup then clones the Shell's fragment to be its nodes. */
 class Shell {
 
 	/**
-	 * @type {DocumentFragment} DOM parent of the shell nodes. */
+	 * @type {DocumentFragment|Text} DOM parent of the shell's nodes. */
 	fragment;
 
 	/** @type {ExprPath[]} Paths to where expressions should go. */
 	paths = [];
 
-	// Embeds and ids
-	events = [];
+	// Elements with events.  Not yet used.
+	// events = [];
 
 	/** @type {int[][]} Array of paths */
 	ids = [];
+
+	/** @type {int[][]} Array of paths */
 	scripts = [];
+
+	/** @type {int[][]} Array of paths */
 	styles = [];
 
+	/** @type {int[][]} Array of paths.  Used by activateEmbeds() to quickly find components. */
 	staticComponents = [];
 
+	/** @type {{path:int[], attribs:Object<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.
-	 * @param html {string[]} */
+	 * @param html {string[]} Html strings, split on places where an expression exists.  */
 	constructor(html=null) {
 		if (!html)
 			return;
 
 		
 
-		// 1.  Add placeholders
-		// We increment the placeholder char as we go because nodes can't have the same attribute more than once.
-		let placeholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_Areas  6400.
-
-		let buffer = [];
-		let commentPlaceholder = `<!--!✨!-->`;
-		let componentNames = {};
-
-		htmlContext(null); // Reset the context.
-		for (let i=0; i<html.length; i++) {
-			let lastHtml = html[i];
-			let context = htmlContext(lastHtml);
-
-			// Swap out Embedded Solarite Components with ${} attributes.
-			// Later, NodeGroup.render() will search for these and replace them with the real components.
-			// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-			if (context === htmlContext.Attribute) {
-
-				let lastIndex, lastMatch;
-				lastHtml.replace(/<[a-z][a-z0-9]*-[a-z0-9-]+/ig, (match, index) => {
-					lastIndex = index+1; // +1 for after opening <
-					lastMatch = match.slice(1);
-				});
-
-				if (lastMatch) {
-					let newTagName = lastMatch + '-solarite-placeholder';
-					lastHtml = lastHtml.slice(0, lastIndex) + newTagName + lastHtml.slice(lastIndex + lastMatch.length);
-					componentNames[lastMatch] = newTagName;
-				}
-			}
-
-			buffer.push(lastHtml);
-			//console.log(lastHtml, context)
-			if (i < html.length-1)
-				if (context === htmlContext.Text)
-					buffer.push(commentPlaceholder); // Comment Placeholder. because we can't put text in between <tr> tags for example.
-				else
-					buffer.push(String.fromCharCode(placeholder+i));
+		if (html.length === 1 && !html[0].match(/[<&]/)) {
+			this.fragment = document.createTextNode(html[0]);
+			return;
 		}
 
-		// 2. Create elements from html with placeholders.
-		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
-		let joinedHtml = buffer.join('');
 
-		// Replace '-solarite-placeholder' close tags.
-		// TODO: is there a better way?  What if the close tag is inside a comment?
-		for (let name in componentNames)
-			joinedHtml = joinedHtml.replaceAll(`</${name}>`, `</${componentNames[name]}>`);
-		
-        if (joinedHtml)
-		    template.innerHTML = joinedHtml;
-        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(''));
+		// 1.  Add placeholders
+		let joinedHtml = 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;
+		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(''));
 		this.fragment = template.content;
 
-		// 3. Find placeholders
+		// 2. Find placeholders
 		let node;
 		let toRemove = [];
-		const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		let placeholdersUsed = 0;
+		const walker = document.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.
 			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.
@@ -1891,7 +2205,8 @@ class Shell {
 					// Whole attribute
 					let matches = attr.name.match(/^[\ue000-\uf8ff]$/);
 					if (matches) {
-						this.paths.push(new ExprPath(null, node, PathType.Multiple));
+						this.paths.push(new ExprPath(null, node, ExprPathType.AttribMultiple));
+						placeholdersUsed ++;
 						node.removeAttribute(matches[0]);
 					}
 
@@ -1900,16 +2215,17 @@ 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 = isEvent(attr.name) ? PathType.Event : PathType.Value;
+							let type = isEvent(attr.name) ? ExprPathType.Event : ExprPathType.AttribValue;
 
 							this.paths.push(new ExprPath(null, node, type, attr.name, nonEmptyParts));
+							placeholdersUsed += parts.length - 1;
 							node.setAttribute(attr.name, parts.join(''));
 						}
 					}
 				}
 			}
 			// Replace comment placeholders
-			else if (node.nodeType === Node.COMMENT_NODE && node.nodeValue === '!✨!') {
+			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
@@ -1934,12 +2250,14 @@ class Shell {
 				}
 				
 
-
-
-				let path = new ExprPath(nodeBefore, nodeMarker, PathType.Content);
-
+				let path = new ExprPath(nodeBefore, nodeMarker, ExprPathType.Content);
 				this.paths.push(path);
+				placeholdersUsed ++;
 			}
+
+			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.
@@ -1950,8 +2268,9 @@ class Shell {
 				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 = PathType.Comment;
+					path.type = ExprPathType.Comment;
 					this.paths.push(path);
+					placeholdersUsed ++;
 				}
 			}
 
@@ -1969,8 +2288,9 @@ class Shell {
 					}
 
 					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new ExprPath(node.previousSibling, node, PathType.Content);
+						let path = new ExprPath(node.previousSibling, node, ExprPathType.Content);
 						this.paths.push(path);
+						placeholdersUsed ++;
 
 						
 					}
@@ -1982,17 +2302,17 @@ class Shell {
 		}
 		toRemove.map(el => el.remove());
 
+		// Less than or equal because there can be one path to multiple expressions
+		// if those expressions are in the same attribute value.
+		if (placeholdersUsed !== html.length-1)
+			throw new Error(`Could not parse expressions in template.  Check for duplicate attributes or malformed html: ${html.join('${...}')}`);
+
 		// Handle solarite-placeholder's.
-		// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-		//if (componentNames.size)
-		//	this.components = [...this.fragment.querySelectorAll([...componentNames].join(','))]
 
-		// Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
+		// 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]')) {
+		for (let el of this.fragment.querySelectorAll('[is]'))
 			el.setAttribute('_is', el.getAttribute('is'));
-		//	this.components.push(el);
-		}
 
 		for (let path of this.paths) {
 			if (path.nodeBefore)
@@ -2000,16 +2320,63 @@ class Shell {
 			path.nodeMarkerPath = getNodePath(path.nodeMarker);
 
 			// Cache so we don't have to calculate this later inside NodeGroup.applyExprs()
-			if (path.type === PathType.Value && path.nodeMarker.nodeType === 1 && /*path.nodeMarker !== template.content.children[0] &&*/
+			if (path.type === ExprPathType.AttribValue && path.nodeMarker.nodeType === 1 &&
 				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.type = PathType.Component;
+				path.type = ExprPathType.ComponentAttribValue;
 			}
 		}
 
 		this.findEmbeds();
 
 		
-	} // end constructor
+	}
+
+	/**
+	 * 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.
+	 * @param htmlChunks {string[]}
+	 * @returns {string} */
+	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.
+				// This way we can gather their constructor arguments and their children before we call their constructor.
+				// Later, NodeGroup.createNewComponent() 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');
+			}
+			tokens.push(token);
+		}
+
+		let htmlParser = new HtmlParser(); // Reset the context.
+		for (let i = 0; i < htmlChunks.length; i++) {
+			let lastHtml = htmlChunks[i];
+
+			// Append -solarite-placholder to web component tags, so we can pass args to them when they're instantiated.
+			let lastIndex = 0;
+			let context = htmlParser.parse(lastHtml, (html, index, oldContext, newContext) => {
+				if (lastIndex !== index) {
+					let token = html.slice(lastIndex, index);
+					addToken(token, oldContext);
+				}
+				lastIndex = index;
+			});
+
+			// 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.
+				else
+					tokens.push(String.fromCharCode(attribPlaceholder + i));
+			}
+		}
+
+		return tokens.join('');
+	}
 
 	/**
 	 * We find the path to every embed here once in the Shell, instead of every time a NodeGroup is instantiated.
@@ -2021,36 +2388,30 @@ class Shell {
 	 * this.staticComponents */
 	findEmbeds() {
 		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => getNodePath(el));
+
+		// TODO: only find styles that have ExprPaths in them?
 		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => getNodePath(el));
 
 		let idEls = this.fragment.querySelectorAll('[id],[data-id]');
-		
 
 		// Check for valid id names.
 		for (let el of idEls) {
 			let id = el.getAttribute('data-id') || el.getAttribute('id');
-			if (div.hasOwnProperty(id))
+			if (Globals$1.div.hasOwnProperty(id))
 				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
 		}
 
-
 		this.ids = Array.prototype.map.call(idEls, el => getNodePath(el));
 
-		// Events (not yet used)
 		for (let el of this.fragment.querySelectorAll('*')) {
-			for (let attrib of el.attributes)
-				if (isEvent(attrib.name))
-					this.events.push([attrib.name, getNodePath(el)]);
-
 			if (el.tagName.includes('-') || el.hasAttribute('_is'))
 
-				// Dynamic components have attributes with expression values.
+				// 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));
 		}
-
 	}
 
 	/**
@@ -2058,10 +2419,10 @@ class Shell {
 	 * @param htmlStrings {string[]} Typically comes from a Template.
 	 * @returns {Shell} */
 	static get(htmlStrings) {
-		let result = Globals.shells.get(htmlStrings);
+		let result = Globals$1.shells.get(htmlStrings);
 		if (!result) {
 			result = new Shell(htmlStrings);
-			Globals.shells.set(htmlStrings, result); // cache
+			Globals$1.shells.set(htmlStrings, result); // cache
 		}
 
 		
@@ -2069,11 +2430,18 @@ class Shell {
 	}
 
 	
-}
-
-/** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
+}
 
-/**
+
+const commentPlaceholder = `<!--!✨!-->`;
+
+
+// We increment the placeholder char as we go because nodes can't have the same attribute more than once.
+const attribPlaceholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_Areas  6400.
+
+/** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
+
+/**
  * A group of Nodes instantiated from a Shell, with Expr's filled in.
  *
  * The range is determined by startNode and nodeMarker.
@@ -2095,7 +2463,8 @@ class NodeGroup {
 	startNode;
 
 	/** @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.*/
+	 * 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. */
 	endNode;
 
 	/** @type {ExprPath[]} */
@@ -2113,11 +2482,11 @@ class NodeGroup {
 	nodesCache;
 
 	/**
+	 * A map between <style> Elements and their text content.
+	 * This lets NodeGroup.updateStyles() see when the style text has changed.
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
-	currentComponentProps = {};
-	
 
 	/**
 	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
@@ -2125,14 +2494,26 @@ class NodeGroup {
 	 * @param parentPath {?ExprPath} */
 	constructor(template, parentPath=null) {
 		if (!(this instanceof RootNodeGroup)) {
+
 			let [fragment, shell] = this.init(template, parentPath);
 
-			this.updatePaths(fragment, shell.paths);
+			if (fragment && template.exprs.length) {
+				this.updatePaths(fragment, shell.paths);
 
-			this.activateEmbeds(fragment, shell);
+				// 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);
 
-			// Apply exprs
-			this.applyExprs(template.exprs);
+				this.activateEmbeds(fragment, shell);
+
+				// Apply exprs
+				this.applyExprs(template.exprs);
+
+				this.activateStaticComponents(staticComponents);
+			}
+			else if (shell)
+				this.activateEmbeds(fragment, shell);
 		}
 	}
 
@@ -2160,57 +2541,103 @@ class NodeGroup {
 		template.nodeGroup = this;
 
 		// Get a cached version of the parsed and instantiated html, and ExprPaths.
-		let shell = Shell.get(template.html);
-		let fragment = shell.fragment.cloneNode(true);
 
-		let childNodes = fragment.childNodes;
-		this.startNode = childNodes[0];
-		this.endNode = childNodes[childNodes.length - 1];
+		// 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);
 
-		return [fragment, shell];
+			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];
+		}
 	}
 
 	/**
 	 * 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.  */
+	 * @param paths {?ExprPath[]} Optional.  Only used for testing.  Normally uses this.paths.  */
 	applyExprs(exprs, paths=null) {
 		paths = paths || this.paths;
 
 		
 
-		// Update exprs at paths.
-		let exprIndex = exprs.length-1, expr, lastNode;
+		// Things to consider:
+		// 1. One path may use multipe expressions.  E.g. <div class="${1} ${2}">
+		// 2. One component may need to use multiple attribute paths to be instantiated.
+		// 3. We apply them in reverse order so that a <select> box has its children created from an expression
+		//    before its instantiated and its value attribute is set via an expression.
+
+		let 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];
+
+			// 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--;
+			}
 
-		// We apply them in reverse order so that a <select> box has its options created from an expression
-		// before its value attribute is set via an expression.
-		for (let path of paths.toReversed()) {
-			expr = exprs[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.
 
-			// Nodes
+			// If 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()) {
 
-			// This is necessary both here and below.
-			if (lastNode && lastNode !== this.rootNg.root && lastNode !== path.nodeMarker && Object.keys(this.currentComponentProps).length) {
-				this.applyComponentExprs(lastNode, this.currentComponentProps);
-				this.currentComponentProps = {};
-			}
+				if (!nextPath || !nextPath.isComponent() || nextPath.nodeMarker !== path.nodeMarker)
+					lastComponentPathIndex = i;
+				let isFirstComponentPath = !prevPath || !prevPath.isComponent() || prevPath.nodeMarker !== path.nodeMarker;
 
-			exprIndex = path.apply(expr, exprs, exprIndex, this.currentComponentProps);
+				if (isFirstComponentPath) {
 
-			lastNode = path.nodeMarker;
+					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];
+					}
 
+					this.applyComponentExprs(path.nodeMarker, componentProps);
 
-			exprIndex--;
-		} // end for(path of this.paths)
+					// Set attributes on component.
+					for (let j=i; j<=lastComponentPathIndex; j++)
+						paths[j].apply(pathExprs[j]);
+				}
+			}
 
+			// Else apply it normally
+			else
+				path.apply(pathExprs[i]);
 
-		// Check again after we iterate through all paths to apply to a component.
-		if (lastNode && lastNode !== this.rootNg.root && Object.keys(this.currentComponentProps).length) {
-			this.applyComponentExprs(lastNode, this.currentComponentProps);
-			this.currentComponentProps = {};
-		}
 
+		} // end for(path of this.paths)
+
+
+		// TODO: Only do this if we have ExprPaths within styles?
 		this.updateStyles();
 
 		// Invalidate the nodes cache because we just changed it.
@@ -2245,14 +2672,18 @@ class NodeGroup {
 
 		// Call render() with the same params that would've been passed to the constructor.
 		else if (el.render) {
-			let oldHash = Globals.componentHash.get(el);
-			if (oldHash !== newHash)
-				el.render(props); // Pass new values of props to render so it can decide how it wants to respond.
+			let oldHash = Globals$1.componentArgsHash.get(el);
+			if (oldHash !== newHash) {
+				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.
+			}
 		}
 
-		Globals.componentHash.set(el, newHash);
+		Globals$1.componentArgsHash.set(el, newHash);
 	}
-	
+
 	/**
 	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
 	 * to its constructor.
@@ -2266,72 +2697,48 @@ class NodeGroup {
 	createNewComponent(el, isPreHtmlElement=undefined, props=undefined) {
 		if (isPreHtmlElement === undefined)
 			isPreHtmlElement = !el.hasAttribute('_is');
-		
+
 		let tagName = (isPreHtmlElement
-			? el.tagName.endsWith('-SOLARITE-PLACEHOLDER')
-				? el.tagName.slice(0, -21)
-				: el.tagName
+			? el.tagName.slice(0, -21) // Remove -SOLARITE-PLACEHOLDER
 			: el.getAttribute('is')).toLowerCase();
 
-		let dynamicProps = {...(props || {})};
-		
+
+		// 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 args = {};
+		for (let name in props || {})
+			args[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) {
-			if (!props)
-				props = {};
-			for (let attrib of el.attributes)
-				if (!props.hasOwnProperty(attrib.name))
-					props[attrib.name] = attrib.value;
+			for (let attrib of el.attributes) {
+				let attribName = Util.dashesToCamel(attrib.name);
+				if (!args.hasOwnProperty(attribName))
+					args[attribName] = attrib.value;
+			}
 		}
-		
-		// Create CustomElement and
-		let Constructor = customElements.get(tagName);
-		if (!Constructor)
-			throw new Error(`The custom tag name ${tagName} is not registered.`)
 
-		// We pass the childNodes to the constructor so it can know about them,
-		// instead of only afterward when they're appended to the slot below.
-		// This is useful for a custom selectbox, for example.
-		// Globals.pendingChildren stores the childen so the super construtor call to Solarite's constructor
-		// can add them as children before the rest of the constructor code executes.
-		let ch = [... el.childNodes];
-		Globals.pendingChildren.push(ch);  // pop() is called in Solarite constructor.
-		let newEl = new Constructor(props, ch);
+		// Create the web component.
+		// Get the children that aren't Solarite's comment placeholders.
+		let ch = [...el.childNodes].filter(node => node.nodeType !== Node.COMMENT_NODE || !node.nodeValue.startsWith('ExprPath'));
+		let newEl = new Constructor(args, ch);
 
 		if (!isPreHtmlElement)
 			newEl.setAttribute('is', el.getAttribute('is').toLowerCase());
+
+		// Replace the placeholder tag with the instantiated web component.
 		el.replaceWith(newEl);
 
-		// Set children / slot children
-		// TODO: Match named slots.
-		// TODO: This only appends to slot if render() is called in the constructor.
-		//let slot = newEl.querySelector('slot') || newEl;
-		//slot.append(...el.childNodes);
-
-		// Copy over event attributes.
-		for (let propName in props) {
-			let val = props[propName];
-			if (propName.startsWith('on') && typeof val === 'function')
-				newEl.addEventListener(propName.slice(2), e => val(e, newEl));
-
-			// Bind array based event attributes on value.
-			// This same logic is in ExprPath.applyValueAttrib() for non-components.
-			if ((propName === 'value' || propName === 'data-value') && Util.isPath(val)) {
-				let [obj, path] = [val[0], val.slice(1)];
-				newEl.value = delve(obj, path);
-				newEl.addEventListener('input', e => {
-					delve(obj, path, Util.getInputValue(newEl));
-				}, true); // We use capture so we update the values before other events added by the user.
-			}
-		}
-		
 		// 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);
-		
-		
+
+
 		// Update paths to use replaced element.
 		for (let path of this.paths) {
 			if (path.nodeMarker === el)
@@ -2343,31 +2750,31 @@ class NodeGroup {
 			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')
 				newEl.setAttribute(attrib.name, attrib.value);
 
 		// Set dynamic attributes if they are primitive types.
-		for (let name in dynamicProps) {
-			let val = dynamicProps[name];
+		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 isn't an object or array, set the attribute.
+			// If type is a non-boolean primitive, set the attribute value.
 			else if (['number', 'bigint', 'string'].includes(typeof val))
 				newEl.setAttribute(name, val);
 		}
-		
+
 		return newEl;
 	}
 
@@ -2413,8 +2820,7 @@ class NodeGroup {
 
 	/**
 	 * Requires the nodeCache to be present. */
-	saveOrphans() {
-		
+	removeAndSaveOrphans() {
 		
 		let fragment = document.createDocumentFragment();
 		for (let node of this.getNodes())
@@ -2424,8 +2830,9 @@ class NodeGroup {
 
 	updatePaths(fragment, paths, offset) {
 		// Update paths to point to the fragment.
-		this.paths.length = paths.length;
-		for (let i=0; i<paths.length; i++) {
+		let pathLength = paths.length;
+		this.paths.length = pathLength;
+		for (let i=0; i<pathLength; i++) {
 			let path = paths[i].clone(fragment, offset);
 			path.parentNg = this;
 			this.paths[i] = path;
@@ -2443,61 +2850,70 @@ class NodeGroup {
 
 	
 
+	findStaticComponents(root, shell, pathOffset=0) {
+		let result = [];
 
-	/**
-	 * @param root {HTMLElement}
-	 * @param shell {Shell}
-	 * @param pathOffset {int} */
-	activateEmbeds(root, shell, pathOffset=0) {
-
-		// static components.  These are WebComponents not created by an expression.
-		// Must happen before ids.
+		// 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 createNewcomponent().
+		// Maybe someday these two paths will be merged?
+		// Must happen before ids because createNewComponent 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?
-				this.createNewComponent(el);
+				result.push(el);
 		}
+		return result;
+	}
+
+	activateStaticComponents(staticComponents) {
+		for (let el of staticComponents)
+			this.createNewComponent(el);
+	}
+
+	/**
+	 * @param root {HTMLElement}
+	 * @param shell {Shell}
+	 * @param pathOffset {int} */
+	activateEmbeds(root, shell, pathOffset=0) {
 
 		let rootEl = this.rootNg.root;
 		if (rootEl) {
+			let options = this.rootNg.options;
 
 			// ids
-			if (this.options?.ids !== false)
+			if (options?.ids !== false) {
 				for (let path of shell.ids) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
 					let el = resolveNodePath(root, path);
-					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 (rootEl[id] && !(rootEl[id] instanceof Node))
-							throw new Error(`${rootEl.constructor.name}.${id} already has a value.  ` +
-								`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
-
-						delve(rootEl, id.split(/\./g), el);
-					}
+					Util.bindId(rootEl, el);
+				}
 				}
 
 			// styles
-			if (this.options?.styles !== false) {
+			if (options?.styles !== false) {
 				if (shell.styles.length)
 					this.styles = new Map();
 				for (let path of shell.styles) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
+
+					/** @type {HTMLStyleElement} */
 					let style = resolveNodePath(root, path);
-					Util.bindStyles(style, rootEl);
-					this.styles.set(style, style.textContent);
+					if (rootEl.nodeType === 1) {
+						Util.bindStyles(style, rootEl);
+						this.styles.set(style, style.textContent);
+					}
 				}
 
 			}
 			// scripts
-			if (this.options?.scripts !== false) {
+			if (options?.scripts !== false) {
 				for (let path of shell.scripts) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
@@ -2518,20 +2934,8 @@ class RootNodeGroup extends NodeGroup {
 	root;
 
 	/**
-	 * Store the expressions that use this watched variable,
-	 * along with the functions used to get their values.
-	 * @type {Object<field:string, Set<ExprPath>>} */
-	watchedExprPaths = {};
-
-	/**
-	 * Map from arrays where .map is called and their callback functions.
-	 * TODO: One array might be called with two different map functions in different places!
-	 * @type {Map<Array, function>} */
-	mapCallbacks = new Map();
-
-	/**
-	 *
-	 * @type {Map<ExprPath, boolean|Array>} */
+	 * 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();
 
 	/**
@@ -2548,82 +2952,102 @@ class RootNodeGroup extends NodeGroup {
 		this.rootNg = this;
 		let [fragment, shell] = this.init(template);
 
-		// 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.nodeGroups.set(el, this);
-
-			// Save slot children
-			let slotFragment;
-			if (el.childNodes.length) {
-				slotFragment = document.createDocumentFragment();
-				slotFragment.append(...el.childNodes);
+		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 {
 
-			this.root = el;
+			// 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);
+				}
 
-			// If el should replace the root node of the fragment.
-			if (isReplaceEl(fragment, el)) {
-				el.append(...fragment.children[0].childNodes);
+				this.root = el;
 
-				// Copy attributes
-				for (let attrib of fragment.children[0].attributes)
-					if (!el.hasAttribute(attrib.name))
-						el.setAttribute(attrib.name, attrib.value);
+				// If el should replace the root node of the fragment.
+				if (isReplaceEl(fragment, el)) {
+					el.append(...fragment.children[0].childNodes);
 
-				// 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);
-			}
+					// Copy attributes
+					for (let attrib of fragment.children[0].attributes)
+						if (!el.hasAttribute(attrib.name))
+							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) {
 
-			// Setup slots
-			if (slotFragment) {
-				for (let slot of el.querySelectorAll('slot[name]')) {
-					let name = slot.getAttribute('name');
-					if (name) {
-						let slotChildren = slotFragment.querySelectorAll(`[slot='${name}']`);
-						slot.append(...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);
 				}
-				let unamedSlot = el.querySelector('slot:not([name])');
-				if (unamedSlot)
-					unamedSlot.append(slotFragment);
-				else
-					el.append(slotFragment);
-			}
 
-			root = el;
+				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.
+				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.nodeGroups.set(this.root, this);
-			if (singleEl) {
-				root = singleEl;
-				offset = 1;
+				Globals$1.nodeGroups.set(this.root, this);
+				if (singleEl) {
+					root = singleEl;
+					offset = 1;
+				}
 			}
-		}
 
-		this.updatePaths(root, shell.paths, offset);
+			this.updatePaths(root, shell.paths, offset);
 
-		this.activateEmbeds(root, shell, 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);
 
-		// Apply exprs
-		this.applyExprs(template.exprs);
-	}
+			this.activateEmbeds(root, shell, offset);
 
-	clearRenderWatched() {
-		this.watchedExprPaths = {};
-		this.mapCallbacks = new Map();
+			// Apply exprs
+			this.applyExprs(template.exprs);
+
+			this.activateStaticComponents(staticComponents);
+		}
 	}
 }
 
@@ -2645,8 +3069,8 @@ function getSingleEl(fragment) {
  * @param el {HTMLElement}
  * @returns {boolean} */
 function isReplaceEl(fragment, el) {
-	return el.tagName.includes('-')
-		&& fragment.children.length===1
+	return fragment.children.length===1
+		&& el.tagName.includes('-')
 		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
 }
 
@@ -2665,19 +3089,9 @@ class Template {
 	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
 
-	/**
-    * @deprecated
-    * @type {ExprPath} Used with forEach() from watch.js
-	 * Set in ExprPath.apply() */
-	parentPath;
-
 	/** @type {NodeGroup} */
 	nodeGroup;
 
-	/**
-	 * @type {string[][]} */
-	paths = [];
-
 	/**
 	 *
 	 * @param htmlStrings {string[]}
@@ -2719,17 +3133,21 @@ class Template {
 		if (standalone) {
 			ng = new RootNodeGroup(this, null, options);
 			el = ng.getRootNode();
-			//Globals.nodeGroups.set(el, ng);
+			Globals$1.nodeGroups.set(el, ng); // Why was this commented out?
 			firstTime = true;
 		}
 		else {
-			ng = Globals.nodeGroups.get(el);
+			ng = Globals$1.nodeGroups.get(el);
 			if (!ng) {
 				ng = new RootNodeGroup(this, el, options);
-				//Globals.nodeGroups.set(el, ng);
+				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.`);		}
 
 		// Creating the root nodegroup also renders it.
 		// If we didn't just create it, we need to render it.
@@ -2737,23 +3155,32 @@ class Template {
 			if (this.html?.length === 1 && !this.html[0])
 				el.innerHTML = ''; // Fast path for empty component.
 			else {
-				ng.clearRenderWatched();
 				ng.applyExprs(this.exprs);
 			}
 		}
 
+		ng.exprsToRender = new Map();
 		return el;
 	}
 
 	getExactKey() {
-		if (!this.exactKey)
-			this.exactKey = getObjectHash(this); // calls this.toJSON().
+		if (!this.exactKey) {
+			if (this.exprs.length)
+				this.exactKey = getObjectHash(this);// calls this.toJSON().
+			else // Don't hash plain html.
+				this.exactKey = this.html[0];
+		}
 		return this.exactKey;
 	}
 
 	getCloseKey() {
-		if (!this.closeKey)
-			this.closeKey = '@'+this.toJSON()[0];
+		//console.log(this.exprs.length)
+		if (!this.closeKey) {
+			if (this.exprs.length)
+				this.closeKey = /*'@' + */this.toJSON()[0];
+			else
+				this.closeKey = this.html[0];
+		}
 		// Use the joined html when debugging?  But it breaks some tests.
 		//return '@'+this.html.join('|')
 
@@ -2776,8 +3203,8 @@ class Template {
 
 /**
  * Convert strings to HTMLNodes.
- * Using r as a tag will always create a Template.
- * Using r() as a function() will always create a DOM element.
+ * 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
@@ -2787,24 +3214,25 @@ class Template {
  * 5. TODO:  list more
  *
  * Currently supported:
- * 1. r(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
- * 2. r(el, template, ?options)        // Render the Template created by #1 to element.
+ * 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. r`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
+ * 3. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
  *
- * 4. r('Hello');                      // Create single text node.
- * 5. r('<b>Hello</b>');               // Create single HTMLElement
- * 6. r('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 7. r()`Hello<b>${'World'}!</b>`     // Same as 4-6, but evaluates the string as a Solarite template, which
+ * 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. r(template)                      // Render Template created by #1.
- *
- * 9. r({render(){...}})              // Pass an object with a render method, and optionally other props/methods.
+ * 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 r(htmlStrings=undefined, ...exprs) {
+function h(htmlStrings=undefined, ...exprs) {
+
 
 	// TODO: Make this a more flat if/else and call other functions for the logic.
 	if (htmlStrings instanceof Node) {
@@ -2819,7 +3247,7 @@ function r(htmlStrings=undefined, ...exprs) {
 
 			// Return a tagged template function that applies the tagged themplate to parent.
 			let taggedTemplate = (htmlStrings, ...exprs) => {
-				Globals.rendered.add(parent);
+				Globals$1.rendered.add(parent);
 				let template = new Template(htmlStrings, exprs);
 				return template.render(parent, options);
 			};
@@ -2856,6 +3284,22 @@ function r(htmlStrings=undefined, ...exprs) {
 	}
 
 	else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
+		// 10. JSX
+		if (typeof exprs[0] === 'object') {
+			exprs[0] || {};
+			exprs.slice(1);
+
+			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?
+
+			assert(templateHtmlStrings.length === templateExprs.length+1);
+			return new Template(templateHtmlStrings, templateExprs);
+		}
+
+
 		// If it starts with a string, trim both ends.
 		// TODO: Also trim if it ends with whitespace?
 		if (htmlStrings.match(/^\s^</))
@@ -2879,7 +3323,7 @@ function r(htmlStrings=undefined, ...exprs) {
 	else if (htmlStrings === undefined) {
 		return (htmlStrings, ...exprs) => {
 			//Globals.rendered.add(parent)
-			let template = r(htmlStrings, ...exprs);
+			let template = h(htmlStrings, ...exprs);
 			return template.render();
 		}
 	}
@@ -2891,338 +3335,168 @@ function r(htmlStrings=undefined, ...exprs) {
 
 
 	// 9. Create dynamic element with render() function.
+	// TODO: This path doesn't handle embeds like data-id="..."
 	else if (typeof htmlStrings === 'object') {
 		let obj = htmlStrings;
 
+		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.
-		if (Globals.objToEl.has(obj)) {
+		// Intercepts the main r`...` function call inside render().
+		if (Globals$1.objToEl.has(obj)) {
 			return function(...args) {
-			   let template = r(...args);
+			   let template = h(...args);
 			   let el = template.render();
-				Globals.objToEl.set(obj, el);
+				Globals$1.objToEl.set(obj, el);
 			}.bind(obj);
 		}
 
 		// Normal path
 		else {
-			Globals.objToEl.set(obj, null);
-			obj.render(); // Calls the Special rebound render path above, when the render function calls r(this)
-			let el = Globals.objToEl.get(obj);
-			Globals.objToEl.delete(obj);
+			Globals$1.objToEl.set(obj, null);
+			obj[renderF](); // Calls the Special rebound render path above, when the render function calls r(this)
+			let el = Globals$1.objToEl.get(obj);
+			Globals$1.objToEl.delete(obj);
 
 			for (let name in obj)
 				if (typeof obj[name] === 'function')
-					el[name] = obj[name].bind(el);
+					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 }}}
 				else
 					el[name] = obj[name];
 
+			// Bind id's
+			// This doesn't work for id's referenced by attributes.
+			// for (let idEl of el.querySelectorAll('[id],[data-id]')) {
+			// 	Util.bindId(el, idEl);
+			// 	Util.bindId(obj, idEl);
+			// }
+			// TODO: Bind styles
+
 			return el;
 		}
 	}
 
 	else
 		throw new Error('Unsupported arguments.')
-}
-
-//import {watchGet, watchSet} from "./watch.js";
-
-
-
-function defineClass(Class, tagName, extendsTag) {
-	if (!customElements.getName(Class)) { // If not previously defined.
-		tagName = tagName || camelToDashes(Class.name);
-		if (!tagName.includes('-'))
-			tagName += '-element';
-
-		let options = null;
-		if (extendsTag)
-			options = {extends: extendsTag};
-
-		customElements.define(tagName, Class, options);
-	}
 }
 
-
-
-
-
+// Trick to prevent minifier from renaming this function.
+let renderF = 'render';
+
 /**
- * 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.
- * 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.
- * 4.  We can use this.html = r`...` to set html.
- * 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.
+ * 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.
  *
- * 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.
+ * 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
+ * example.  Note that constructor args are embedded in an object, and must be all lower-case because
+ * Browsers make all html attribute names lowercase.
  *
- * @param extendsTag {?string}
- * @return {Class} */
-function createSolarite(extendsTag=null) {
-
-	let BaseClass = HTMLElement;
-	if (extendsTag && !extendsTag.includes('-')) {
-		extendsTag = extendsTag.toLowerCase();
-
-		BaseClass = Globals.elementClasses[extendsTag];
-		if (!BaseClass) { // TODO: Use Cache
-			BaseClass = document.createElement(extendsTag).constructor;
-			Globals.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 = Util$1.callback();
+ * @example
+ * 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);
+ * }
+ *
+ * @param el {HTMLElement}
+ * @param attributeName {string} Attribute name.  Not case-sensitive.
+ * @param defaultValue {*} Default value to use if attribute doesn't exist.
+ * @param type {ArgType|function|*[]}
+ *     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) {
+	let val = defaultValue;
+	let attrVal = el.getAttribute(attributeName) || el.getAttribute(Util.camelToDashes(attributeName));
+	if (attrVal !== null) // If attribute doesn't exist.
+		val = attrVal;
 		
-		onFirstConnect = Util$1.callback();
-		onDisconnect = Util$1.callback();
-
-		/**
-		 * @param options {RenderOptions} */
-		constructor(options={}) {
-			super();
-
-			// TODO: Is options.render ever used?
-			if (options.render===true)
-				this.render();
-
-			else if (options.render===false)
-				Globals.rendered.add(this); // Don't render on connectedCallback()
-
-			// Add children before constructor code executes.
-			// PendingChildren is setup in NodeGroup.createNewComponent()
-			// TODO: Match named slots.
-			let ch = Globals.pendingChildren.pop();
-			if (ch)
-				(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;
-					}
+	if (Array.isArray(type))
+		return type.includes(val) ? val : fallback;
+	
+	if (typeof type === 'function')
+		return type(val);
+	
+	// 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;
+		if (['false', '0', false, 0, null, undefined, NaN].includes(lAttrVal))
+			return false;
+		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
+			return true;
+		return fallback;
+	}
+	
+	// Attribute doesn't exist
+	let result;
+	switch (type) {
+		case ArgType.Int:
+			result = parseInt(val);
+			return isNaN(result) ? fallback : result;
+		case ArgType.Float:
+			result = parseFloat(val);
+			return isNaN(result) ? fallback : result;
+		case ArgType.String:
+			return [undefined, null, false].includes(val) ? '' : val+'';
+		case ArgType.Json:
+		case ArgType.Eval:
+			if (typeof val === 'string' && val.length)
+				try {
+					if (type === ArgType.Json)
+						return JSON.parse(val);
 					else
-						this.modifications = r(this, html, options);
-				}
-			});
-
-			/*
-			let pthis = new Proxy(this, {
-				get(obj, prop) {
-					return Reflect.get(obj, prop)
+						return eval(`(${val})`);
+				} catch (e) {
+					return val;
 				}
-			});
-			this.render = this.render.bind(pthis);
-			*/
-		}
+			else return val;
 
-		/**
-		 * Call render() only if it hasn't already been called.	 */
-		renderFirstTime() {
-			if (!Globals.rendered.has(this) && this.render)
-				this.render();
-		}
-		
-		/**
-		 * Called automatically by the browser. */
-		connectedCallback() {
-			this.renderFirstTime();
-			if (!Globals.connected.has(this)) {
-				Globals.connected.add(this);
-				this.onFirstConnect();
-			}
-			this.onConnect();
-		}
-		
-		disconnectedCallback() {
-			this.onDisconnect();
-		}
-
-
-		static define(tagName=null) {
-			defineClass(this, tagName, extendsTag);
-		}
-
-		
+		// type not provided
+		default:
+			return val;
 	}
-}
-
-/**
- * Trying to be able to automatically watch primitive values.
- * TODO:
- * 1.  Have get() return Proxies for nested updates.
- * 2.  Override .map() for loops to capture changes.
- */
-
-let unusedArg = Symbol('unusedArg');
-
-/**
- * Custom map function triggers the get() Proxy.
- * @param array {Array}
- * @param callback {function}
- * @returns {*[]} */
-function map(array, callback) {
-	let result = [];
-	for (let i=0; i<array.length; i++)
-		result.push(callback(array[i], i, array));
-	return result;
 }
 
-
 /**
- *
- * @param root {HTMLElement}
- * @param field {string}
- * @param value {string|Symbol} */
-function watch3(root, field, value=unusedArg) {
-	// Store internal value used by get/set.
-	if (value !== unusedArg)
-		root[field] = value;
-	else
-		value = root[field];
-
-
-	// use a single object for both defineProperty and new Proxy's handler.
-	const handler = {
-		get(obj, prop, receiver) {
-
-			let result = (obj === receiver && field === prop)
-				? value // top-level value.
-				: Reflect.get(obj, prop, receiver); // avoid infinite recursion.
-
-			if (prop === 'map')
-
-				// Double function so the ExprPath calls it as a function,
-				// instead of it being evaluated immediately when the Templat eis created.
-				return (callback) => () => {
-					let rootNg = Globals.nodeGroups.get(root);
-					rootNg.mapCallbacks.set(obj, callback);
-					return map(new Proxy(obj, handler), callback);
-				}
-
-			// Track which ExprPath is using this variable.
-			if (Globals.currentExprPath) {
-				let [exprPath, exprFunction] = Globals.currentExprPath; // Set in ExprPath.applyExact()
-
-				let rootNg = Globals.nodeGroups.get(root);
-
-				// Init for field.
-				rootNg.watchedExprPaths[field] = rootNg.watchedExprPaths[field] || new Set();
-				rootNg.watchedExprPaths[field].add(exprPath);
-			}
-
-			if (result && typeof result === 'object')
-				return new Proxy(result, handler);
-
-			return result;
-		},
-
-
-		// TODO: Will fail for attribute w/ a value having multiple ExprPaths.
-		// TODO: This won't update a component's expressions.
-		set(obj, prop, val, receiver) {
-
-			// 1. Set the value.
-			if (obj === receiver && field === prop)
-				value = val; // top-level value.
-			else // avoid infinite recursion.
-				Reflect.set(obj, prop, val, receiver);
-
-			// 2. Add to the list of ExprPaths to re-render.
-			let rootNg = Globals.nodeGroups.get(root);
-			for (let exprPath of rootNg.watchedExprPaths[field]) {
-
-				// Update a single NodeGroup created by array.map()
-				if (Array.isArray(obj) && parseInt(prop) == prop) {
-					let exprsToRender = rootNg.exprsToRender.get(exprPath);
-
-					// If we're not re-rendering the whole thing.
-					if (exprsToRender !== true)
-						Util$1.mapAdd(rootNg.exprsToRender, exprPath, [obj, prop, val]);
-				}
-
-				// Reapply the whole expression.
-				else
-					rootNg.exprsToRender.set(exprPath, true);
-			}
-			return true;
-		}
-	};
-
-	Object.defineProperty(root, field, {
-		get: () => handler.get(root, field, root),
-		set: (val) => handler.set(root, field, val, root)
-	});
-}
-
-/**
- * TODO: Rename so we have watch.add() and watch.render() ?
- * @param root
- * @returns {*[]} */
-function renderWatched(root) {
-	let rootNg = Globals.nodeGroups.get(root);
-	let modified = [];
-
-	for (let [exprPath, params] of rootNg.exprsToRender) {
-
-		// Reapply the whole expression.
-		if (params === true) {
-			exprPath.apply(exprPath.watchFunction);
-
-			// TODO: freeNodeGroups() could be skipped if applyExprs() never marked them as in-use.
-			exprPath.freeNodeGroups();
-
-			modified.push(...exprPath.getNodes());
-		}
-
-		// Update a single NodeGroup created by array.map()
-		else {
-			for (let row of params) {
-				let [obj, prop, value] = row;
-				let callback = rootNg.mapCallbacks.get(obj);
-				let template = callback(value);
-				exprPath.applyLoopItemUpdate(prop, template);
+ * @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',
 
-				modified.push(...exprPath.nodeGroups[prop].getNodes());
-			}
-		}
-	}
+	/** @deprecated for Json */
+	JSON: 'Json',
 
-	rootNg.exprsToRender = new Map(); // clear
+	/**
+	 * Parse the string value as JSON.
+	 * If it's not parsable, return the value as a string. */
+	Json: 'Json',
 
-	return modified;
-}
+	/**
+	 * Evaluate the string as JavaScript using the eval() function.
+	 * If it can't be evaluated, return the original string. */
+	Eval: 'Eval'
+};
 
 /**
  * Solarite JavasCript UI library.
@@ -3239,6 +3513,9 @@ let Solarite = new Proxy(createSolarite(), {
 	}
 });
 let getInputValue = Util.getInputValue;
- // unfinished
+
+//Experimental:
+//export {default as watch, renderWatched} from './watch.js'; // unfinished
 
-export { ArgType, Globals, Solarite, Template, delve, getArg, getInputValue, r, renderWatched, watch3 as watch };
+export default h;
+export { ArgType, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, delve, getArg, getInputValue, h, h as r };