solarite 0.3.2 → 0.4.0

package/dist/Solarite-debug.js

@@ -105,8 +105,9 @@ function reset() {
 	Globals = {
 
 		/**
-		 * Used by NodeGroup.applyComponentExprs() */
-		componentArgsHash: new WeakMap(),
+		 * Dynamic values that should be passed to a Component's constructor and render() function.
+		 * @type {Map<HTMLElement, any[]>} */
+		componentArgs: new Map(),
 
 		/**
 		 * Store which instances of Solarite have already been added to the DOM.
@@ -121,6 +122,9 @@ function reset() {
 
 		div: document.createElement("div"),
 
+		/** @type {HTMLDocument} */
+		doc: document,
+
 		/**
 		 * @type {Record<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
 		elementClasses: {},
@@ -139,20 +143,20 @@ function reset() {
 		nodeGroups: new WeakMap(),
 
 		/**
-		 * Used by r() path 9. */
+		 * Used by h() path 9. */
 		objToEl: new WeakMap(),
 
 		//pendingChildren: [],
 
 
 		/**
-		 * Elements that have been rendered to by r() at least once.
+		 * Elements that have been rendered to by h() at least once.
 		 * This is used by the Solarite class to know when to call onFirstConnect()
 		 * @type {WeakSet<HTMLElement>} */
 		rendered: new WeakSet(),
 
 		/**
-		 * Elements that are currently rendering via the r() function.
+		 * Elements that are currently rendering via the h() function.
 		 * @type {WeakSet<HTMLElement>} */
 		rendering: new WeakSet(),
 
@@ -239,12 +243,25 @@ let Util = {
 		return true; // the same.
 	},
 
+	/**
+	 * Convert HTMLElement attributes to an object.
+	 * @param el {HTMLElement}
+	 * @param ignore {?string} Optionally ignore this attribute.
+	 * @return {Object} */
+	attribsToObject(el, ignore=null) {
+		let result = {};
+		for (let attrib of el.attributes)
+			if (attrib.name !== ignore)
+				result[Util.dashesToCamel(attrib.name)] = attrib.value;
+		return result;
+	},
+
 	bindId(root, el) {
 		let id = el.getAttribute('data-id') || el.getAttribute('id');
 		if (id) { // If something hasn't removed the id.
 
 			// Don't allow overwriting existing class properties if they already have a non-Node value.
-			if (root[id] && !(root[id] instanceof Node))
+			if (root[id] && !(root[id]?.nodeType))
 				throw new Error(`${root.constructor.name}.${id} already has a value.  ` +
 					`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
 
@@ -253,26 +270,50 @@ let Util = {
 	},
 
 	/**
+	 * If the style tab has a global attribute:
+	 * 1.  Put it in the document head as <style data-style="tag-name">...</style>
+	 * 2.  Replace the :host {...} CSS selector as tag-name {...}.
+	 * Otherwise keep it where it is and:
+	 * 1.  Add data-style="1" attribute to the root element.
+	 * 2.  Replace the :host {...} selector in the style as tag-name[data-style='1'] {...}
 	 * @param style {HTMLStyleElement}
 	 * @param root {HTMLElement} */
 	bindStyles(style, root) {
-		let styleId = root.getAttribute('data-style');
-		if (!styleId) {
-			// Keep track of one style id for each class.
-			// TODO: Put this outside the class in a map, so it doesn't conflict with static properties.
-			if (!root.constructor.styleId)
-				root.constructor.styleId = 1;
-			styleId = root.constructor.styleId++;
 
-			root.setAttribute('data-style', styleId);
+		let tagName = root.tagName.toLowerCase();
+		let styleId, attribSelector;
+
+		if (style.hasAttribute('global') || style.hasAttribute('data-global')) {
+			styleId = tagName;
+			attribSelector = '';
+			let doc = Globals$1.doc || root.ownerDocument || document;
+			if (!doc.head.querySelector(`style[data-style="${styleId}"]`)) {
+				doc.head.append(style);
+				style.setAttribute('data-style', styleId);
+			}
+			else // TODO: Make sure the style has no expressions.
+				style.remove(); // already in the head.
+		}
+		else {
+			let styleId = root.getAttribute('data-style');
+			if (!styleId) {
+				// Keep track of one style id for each class.
+				// TODO: Put this outside the class in a map, so it doesn't conflict with static properties.
+				if (!root.constructor.styleId)
+					root.constructor.styleId = 1;
+				styleId = root.constructor.styleId++;
+
+				root.setAttribute('data-style', styleId);
+			}
+
+			attribSelector = `[data-style="${styleId}"]`;
 		}
 
 		// Replace ":host" with "tagName[data-style=...]" in the css.
-		let tagName = root.tagName.toLowerCase();
 		for (let child of style.childNodes) {
 			if (child.nodeType === 3) {
 				let oldText = child.textContent;
-				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}[data-style="${styleId}"]`);
+				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}${attribSelector}`);
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
@@ -319,7 +360,6 @@ let Util = {
 		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
 	},
 
-
 	/**
 	 * A generator function that recursively traverses and flattens a value.
 	 *
@@ -360,7 +400,7 @@ let Util = {
 
 	/**
 	 * Get the value of an input as the most appropriate JavaScript type.
-	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
+	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLElement}
 	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
 	getInputValue(node) {
 		// .type is a built-in DOM property
@@ -374,6 +414,8 @@ let Util = {
 			return node.valueAsDate; // Date Object
 		if (node.type === 'select-multiple') // <select multiple>
 			return [...node.selectedOptions].map(option => option.value); // Array of Strings
+		if (node.hasAttribute('contenteditable'))
+			return node.innerHTML;
 
 		return node.value; // String
 	},
@@ -682,11 +724,6 @@ class MultiValueMap {
  * @returns {Node[]} The same list of future children.
  */
 const udomdiff = (parentNode, a, b, before) => {
-	//#IFDEV
-	// if (parentNode instanceof ExprPath)
-	// 	parentNode.verify();
-	//#ENDIF
-
 	const bLength = b.length;
 	let aEnd = a.length;
 	let bEnd = bLength;
@@ -708,13 +745,6 @@ const udomdiff = (parentNode, a, b, before) => {
 			while (bStart < bEnd) {
 				let bNode = b[bStart++];
 				parentNode.insertBefore(bNode, node);
-
-				//#IFDEV
-				if (bNode instanceof NodeGroup)
-					bNode.verify();
-				// if (parentNode instanceof ExprPath)
-				// 	parentNode.verify();
-				//#ENDIF
 			}
 		}
 		// remove head or tail: fast path
@@ -724,13 +754,6 @@ const udomdiff = (parentNode, a, b, before) => {
 				let aNode = a[aStart];
 				if (!map || !map.has(aNode)) {
 					parentNode.removeChild(aNode);
-
-					//#IFDEV
-					if (aNode instanceof NodeGroup)
-						aNode.verify();
-					// if (parentNode instanceof ExprPath)
-					// 	parentNode.verify();
-					//#ENDIF
 				}
 				aStart++;
 			}
@@ -767,24 +790,10 @@ const udomdiff = (parentNode, a, b, before) => {
 				a2,
 				b2.nextSibling
 			);
-			//#IFDEV
-			if (a2 instanceof NodeGroup)
-				a2.verify();
-			// if (parentNode instanceof ExprPath)
-			// 	parentNode.verify();
-			//#ENDIF
 
 			let bNode = b[--bEnd];
 			parentNode.insertBefore(bNode, node);
 
-			//#IFDEV
-			if (bNode instanceof NodeGroup)
-				bNode.verify();
-			// if (parentNode instanceof ExprPath)
-			// 	parentNode.verify();
-
-			//#ENDIF
-
 			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
 			// The main reason to do this, is that when a[aEnd] will be reached,
 			// the loop will likely be on the fast path, as identical to b[bEnd].
@@ -832,14 +841,6 @@ const udomdiff = (parentNode, a, b, before) => {
 						while (bStart < index) {
 							let bNode = b[bStart++];
 							parentNode.insertBefore(bNode, node);
-
-							//#IFDEV
-							if (bNode instanceof NodeGroup)
-								bNode.verify();
-							// if (parentNode instanceof ExprPath)
-							// 	parentNode.verify();
-
-							//#ENDIF
 						}
 					}
 						// if the effort wasn't good enough, fallback to a replace,
@@ -852,13 +853,6 @@ const udomdiff = (parentNode, a, b, before) => {
 							bNode,
 							aNode
 						);
-
-						//#IFDEV
-						if (aNode instanceof NodeGroup)
-							aNode.verify();
-						// if (parentNode instanceof ExprPath)
-						// 	parentNode.verify();
-						//#ENDIF
 					}
 				}
 				// otherwise move the source forward, 'cause there's nothing to do
@@ -871,13 +865,6 @@ const udomdiff = (parentNode, a, b, before) => {
 			else {
 				let aNode = a[aStart++];
 				parentNode.removeChild(aNode);
-
-				//#IFDEV
-				if (aNode instanceof NodeGroup)
-					aNode.verify();
-				// if (parentNode instanceof ExprPath)
-				// 	parentNode.verify();
-				//#ENDIF
 			}
 		}
 	}
@@ -1005,13 +992,13 @@ class ExprPath {
 			case 2: // PathType.Multiple:
 				this.applyMultipleAttribs(this.nodeMarker, exprs[0]);
 				break;
-			case 5: // PathType.Comment:
+			case 4: // PathType.Comment:
 				// Expressions inside Html comments.  Deliberately empty because we won't waste time updating them.
 				break;
-			case 6: // PathType.Event:
+			case 5: // PathType.Event:
 				this.applyEventAttrib(this.nodeMarker, exprs[0], this.parentNg.rootNg.root);
 				break;
-			default: // TODO: Is this still used?  Lots of tests fail without it.
+			default: // 3 PathType.Attribute
 				// One attribute value may have multiple expressions.  Here we apply them all at once.
 				this.applyValueAttrib(this.nodeMarker, exprs);
 				break;
@@ -1021,7 +1008,7 @@ class ExprPath {
 	/**
 	 * Insert/replace the nodes created by a single expression.
 	 * Called by applyExprs()
-	 * This function is recursive, as the functions it calls also call it.
+	 * This function is recursive.  It calls functions that call applyNodes().
 	 * @param expr {Expr}
 	 * @param freeNodeGroups {boolean}
 	 * @return {Node[]} New Nodes created. */
@@ -1056,7 +1043,6 @@ class ExprPath {
 		if (secondPass.length) {
 			for (let [nodesIndex, ngIndex] of secondPass) {
 				let ng = path.getNodeGroup(newNodes[nodesIndex], false);
-
 				let ngNodes = ng.getNodes();
 
 				/*#IFDEV*/assert(!(newNodes[nodesIndex] instanceof NodeGroup));/*#ENDIF*/
@@ -1077,11 +1063,8 @@ class ExprPath {
 
 		/*#IFDEV*/assert(!path.nodeGroups.includes(null));/*#ENDIF*/
 
-
-
 		let oldNodes = path.getNodes();
 
-
 		// This pre-check makes it a few percent faster?
 		let same = Util.arraySame(oldNodes, newNodes);
 		if (!same) {
@@ -1094,7 +1077,6 @@ class ExprPath {
 			// Fast clear method
 			let isNowEmpty = oldNodes.length && !newNodes.length;
 			if (!isNowEmpty || !path.fastClear())
-
 				// Rearrange nodes.
 				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
 
@@ -1107,18 +1089,17 @@ class ExprPath {
 					ng.removeAndSaveOrphans();
 
 			// Instantiate components created within ${...} expressions.
-			// Embedded style tags are handled elsewhere, but where?
+			// Also see this.applyExactNodes() which handles calling render() on web components even if they are unchanged.
 			for (let el of newNodes) {
-				if (el instanceof HTMLElement) {
+				if (el?.nodeType === 1) { // HTMLElement
 					if (el.hasAttribute('solarite-placeholder'))
-						this.parentNg.instantiateComponent(el);
+						this.parentNg.handleComponent(el, null, true);
 					for (let child of el.querySelectorAll('[solarite-placeholder]'))
-						this.parentNg.instantiateComponent(child);
+						this.parentNg.handleComponent(child, null, true);
 				}
 			}
 		}
 
-
 		/*#IFDEV*/path.verify();/*#ENDIF*/
 	}
 
@@ -1228,7 +1209,7 @@ class ExprPath {
 		}
 
 		// String/Number/Date/Boolean
-		else if (!(expr instanceof Template) && !(expr instanceof Node)){
+		else if (!(expr instanceof Template) && !(expr?.nodeType)){
 			// Convert expression to a string.
 			if (expr === undefined || expr === false || expr === null) // Util.isFalsy() inlined
 				expr = '';
@@ -1238,7 +1219,9 @@ class ExprPath {
 			// Get the same Template for the same string each time.
 			// let template = Globals.stringTemplates[expr];
 			// if (!template) {
+
 				let template = new Template([expr], []);
+				template.isText = true;
 			//	Globals.stringTemplates[expr] = template;
 			//}
 
@@ -1263,12 +1246,44 @@ class ExprPath {
 
 		if (expr instanceof Template) {
 			let ng = this.getNodeGroup(expr, true);
+
 			if (ng) {
+				let newestNodes = ng.getNodes();
+				newNodes.push(...newestNodes);
+
+				// New!
+				// Re-apply all expressions if there's a web component, so we can pass them to its constructor.
+				// NodeGroup.applyExprs() is used to call applyComponentExprs() on web components that have expression attributes.
+				// For those that don't, we call applyComponentExprs() directly here.
+				// Also see similar code at the end of this.applyNodes() which handles web components being instantiated the first time.
+				let apply = false;
+				for (let el of newestNodes) {
+					if (el?.nodeType === 1) { // HTMLElement
+
+						if (el.tagName.includes('-')) {
+							if (!expr.exprs.find(expr => expr?.nodeMarker === el))
+								this.parentNg.handleComponent(el, null, true);
+							else // Commenting out this "else" causes render() to be called too often, but other UI code fails if it's present.
+								apply = true;
+						}
+						for (let child of el.querySelectorAll('*')) {
+							if (child.tagName.includes('-')) {
+								if (!expr.exprs.find(expr => expr?.nodeMarker === child))
+									this.parentNg.handleComponent(child, null, true);
+								else
+									apply = true;
+							}
+						}
+					}
+				}
 
-				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
-				// But will that break the swap benchmark?
-				newNodes.push(...ng.getNodes());
+				// This calls render() on web components that have expressions as attributes.
+				if (apply)
+					ng.applyExprs(expr.exprs);
+				
 				this.nodeGroups.push(ng);
+
+				return ng;
 			}
 
 			// If expression, mark it to be evaluated later in ExprPath.apply() to find partial match.
@@ -1280,10 +1295,10 @@ class ExprPath {
 		}
 
 		// Node(s) created by an expression.
-		else if (expr instanceof Node) {
+		else if (expr?.nodeType) {
 
 			// DocumentFragment created by an expression.
-			if (expr instanceof DocumentFragment)
+			if (expr?.nodeType === 11) // DocumentFragment
 				newNodes.push(...expr.childNodes);
 			else
 				newNodes.push(expr);
@@ -1359,8 +1374,8 @@ class ExprPath {
 	 * @param root */
 	applyEventAttrib(node, expr, root) {
 		/*#IFDEV*/
-		assert(this.type === ExprPathType.Event/* || this.type === PathType.Component*/);
-		assert(root instanceof HTMLElement);
+		assert(this.type === ExprPathType.Event);
+		assert(root?.nodeType === 1);
 		/*#ENDIF*/
 
 		let eventName = this.attrName.slice(2); // remove "on-" prefix.
@@ -1440,7 +1455,7 @@ class ExprPath {
 	}
 
 	/**
-	 * Handle values, including two-way binding.
+	 * Set the value of an attribute.  This can be for any attribute, not just attributes named "value".
 	 * @param node
 	 * @param exprs */
 	// TODO: node is always this.nodeMarker?
@@ -1470,12 +1485,21 @@ class ExprPath {
 			}
 			else {
 				// TODO: should we remove isFalsy, since these are always props?
-				let strValue = Util.isFalsy(value) ? '' : value;
+				const 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;
+				// Special case for contenteditable
+				if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
+					const existingValue = node.innerHTML;
+					if (strValue !== existingValue)
+						node.innerHTML = strValue;
+				}
+				else {
+
+					// If we don't have this condition, when we call render(), the browser will scroll to the currently
+					// selected item in a <select> and mess up manually scrolling to a different value.
+					if (strValue !== node[this.attrName])
+						node[this.attrName] = strValue;
+				}
 			}
 
 			// TODO: We need to remove any old listeners, like in bindEventAttribute.
@@ -1495,16 +1519,8 @@ class ExprPath {
 
 		// Regular attribute
 		else {
-			// TODO: Cache this on ExprPath.isProp when Shell creates the props.  Have ExprPath.clone() copy .isProp
-			// Or make it a new PathType.
-			//if (this.attrName === 'disabled')
-			//	debugger;
-
-			// hasOwnProperty() checks only the object, not the parents
-			// this.attrName in node checks the node and the parents.
-			// This version checks the html element it extends from, to see if has a setter set:
-			//     Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set
-			//let isProp = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set;
+			// Cache this on ExprPath.isHtmlProperty when Shell creates the props.
+			// Have ExprPath.clone() copy .isHtmlProperty?
 			let isProp = this.isHtmlProperty;
 			if (isProp === undefined)
 				isProp = this.isHtmlProperty = Util.isHtmlProp(node, this.attrName);
@@ -1514,7 +1530,7 @@ class ExprPath {
 			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
+					if (this.isComponent) { // Don't evaluate functions before passing them to components
 						return
 					}
 					this.watchFunction = expr; // The function that gets the expression, used for renderWatched()
@@ -1572,6 +1588,13 @@ class ExprPath {
 					// since we also prohibit expressions that are a child of textarea.
 					if (isProp)
 						node[this.attrName] = joinedValue;
+
+					// Allow one-way binding to contenteditable value attribute.
+					// Contenteditables normally don't have a value attribute and have their content set via innerHTML.
+					// Solarite doesn't allow contenteditables to have expressions as their children.
+					else if (node.hasAttribute('contenteditable'))
+						node.innerHTML = joinedValue;
+
 					// TODO: Putting an 'else' here would be more performant
 					node.setAttribute(this.attrName, joinedValue);
 				}
@@ -1602,11 +1625,9 @@ class ExprPath {
 			nodeBefore = childNodes[this.nodeBeforeIndex];
 
 		let result = new ExprPath(nodeBefore, nodeMarker, this.type, this.attrName, this.attrValue);
+		result.isComponent = this.isComponent;
 
 		//#IFDEV
-		result.nodeMarker.exprPath = result;
-		if (result.nodeBefore)
-			result.nodeBefore.prevExprPath = result;
 		result.verify();
 		//#ENDIF
 
@@ -1615,9 +1636,7 @@ class ExprPath {
 
 	/**
 	 * Clear the nodeCache of this ExprPath, as well as all parent and child ExprPaths that
-	 * share the same DOM parent node.
-	 *
-	 * TODO: Is recursive clearing ever necessary? */
+	 * share the same DOM parent node. */
 	clearNodesCache() {
 		let path = this;
 
@@ -1630,9 +1649,6 @@ class ExprPath {
 			// If stuck in an infinite loop here, the problem is likely due to Template hash colisions.
 			// Which cause one path to be the descendant of itself, creating a cycle.
 		}
-
-		// Commented out on Sep 30, 2024 b/c it was making the benchmark never finish when adding 10k rows.
-		//clearChildNodeCache(this);
 	}
 
 
@@ -1674,7 +1690,7 @@ class ExprPath {
 		// 	result2.push(...ng.getNodes())
 		// return result2;
 
-		if (this.type === ExprPathType.AttribValue || this.type === ExprPathType.AttribMultiple || this.type === ExprPathType.ComponentAttribValue) {
+		if (this.type === ExprPathType.AttribValue || this.type === ExprPathType.AttribMultiple) {
 			return [this.nodeMarker];
 		}
 
@@ -1734,11 +1750,13 @@ class ExprPath {
 				result = collection.deleteAny(template.getExactKey());
 			}
 
-			if (result) // also delete the matching close key.
+			if (result) {// also delete the matching close key.
 				collection.deleteSpecific(template.getCloseKey(), result);
-			else {
-				return null;
+
+				//result.applyExprs(template.exprs);
 			}
+			else
+				return null;
 		}
 
 		// Find a close match.
@@ -1772,12 +1790,6 @@ class ExprPath {
 		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().
@@ -1835,7 +1847,7 @@ class ExprPath {
 			`parentNode: ${this.nodeBefore.parentNode?.tagName?.toLowerCase()}`,
 			'nodes:',
 			...setIndent(this.getNodes().map(item => {
-				if (item instanceof Node)
+				if (item?.nodeType)
 					return item.outerHTML || item.textContent
 				else if (item instanceof NodeGroup)
 					return item.debug
@@ -1892,7 +1904,7 @@ class ExprPath {
 /** @enum {int} */
 const ExprPathType = {
 	/** Child of a node */
-	Content: 1,
+	Content: 1, // TODO: Rename to Nodes
 
 	/** One or more whole attributes */
 	AttribMultiple: 2,
@@ -1900,14 +1912,11 @@ const ExprPathType = {
 	/** Value of an attribute. */
 	AttribValue: 3,
 
-	/** Value of an attribute being passed to a component. */
-	ComponentAttribValue: 4,
-
 	/** Expressions inside Html comments. */
-	Comment: 5,
+	Comment: 4,
 
 	/** Value of an attribute. */
-	Event: 6,
+	Event: 5,
 };
 
 
@@ -2075,7 +2084,7 @@ class Shell {
 		//#ENDIF
 
 		if (html.length === 1 && !html[0].match(/[<&]/)) {
-			this.fragment = document.createTextNode(html[0]);
+			this.fragment = Globals$1.doc.createTextNode(html[0]);
 			return;
 		}
 
@@ -2083,18 +2092,18 @@ class Shell {
 		// 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.
+		let template = Globals$1.doc.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
 		if (joinedHtml)
 			template.innerHTML = joinedHtml;
 		else // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
-			template.content.append(document.createTextNode(''));
+			template.content.append(Globals$1.doc.createTextNode(''));
 		this.fragment = template.content;
 
 		// 2. Find placeholders
 		let node;
 		let toRemove = [];
 		let placeholdersUsed = 0;
-		const walker = document.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		const walker = Globals$1.doc.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
 		while (node = walker.nextNode()) {
 
 			// Remove previous after each iteration, so paths will still be calculated correctly.
@@ -2130,10 +2139,13 @@ class Shell {
 			// Replace comment placeholders
 			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 
+				if (node?.parentNode?.closest && node?.parentNode?.closest('[contenteditable]'))
+					throw new Error(`Contenteditable can't have expressions inside them. Use <div contenteditable value="\${...}"> instead.`);
+
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
 				if (!nodeBefore) {
-					nodeBefore = document.createComment('ExprPath:'+this.paths.length);
+					nodeBefore = Globals$1.doc.createComment('ExprPath:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node);
 				}
 				/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
@@ -2158,9 +2170,9 @@ class Shell {
 				placeholdersUsed ++;
 			}
 
+			// Comments become text nodes when inside textareas.
 			else if (node.nodeType === 3 && node.parentNode?.tagName === 'TEXTAREA' && node.textContent.includes('<!--!✨!-->'))
 				throw new Error(`Textarea can't have expressions inside them. Use <textarea value="\${...}"> instead.`);
-
 			
 			
 			// Sometimes users will comment out a block of html code that has expressions.
@@ -2184,7 +2196,7 @@ class Shell {
 
 					let placeholders = [];
 					for (let i = 0; i<parts.length; i++) {
-						let current = document.createTextNode(parts[i]);
+						let current = Globals$1.doc.createTextNode(parts[i]);
 						node.parentNode.insertBefore(current, node);
 						if (i > 0)
 							placeholders.push(current);
@@ -2223,9 +2235,9 @@ class Shell {
 			path.nodeMarkerPath = getNodePath(path.nodeMarker);
 
 			// Cache so we don't have to calculate this later inside NodeGroup.applyExprs()
-			if (path.type === ExprPathType.AttribValue && path.nodeMarker.nodeType === 1 &&
+			if ((path.type === ExprPathType.AttribValue || path.type === ExprPathType.Event) && path.nodeMarker.nodeType === 1 &&
 				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.type = ExprPathType.ComponentAttribValue;
+				path.isComponent = true;
 			}
 		}
 
@@ -2399,30 +2411,39 @@ class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
+	dynamicComponents = new Set();
+	staticComponents = [];
+
+	/** @type {Template} */
+	template;
+
 
 	/**
 	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
 	 * @param template {Template}  Create it from the html strings and expressions in this template.
 	 * @param parentPath {?ExprPath} */
 	constructor(template, parentPath=null) {
+		this.rootNg = parentPath?.parentNg?.rootNg || this;
+		this.parentPath = parentPath;
+
 		if (!(this instanceof RootNodeGroup)) {
 
-			let [fragment, shell] = this.init(template, parentPath);
+			let [fragment, shell] = this.populateFromTemplate(template);
 
 			if (fragment && template.exprs.length) {
 				this.updatePaths(fragment, shell.paths);
 
 				// Static web components can sometimes have children created via expressions.
 				// But calling applyExprs() will mess up the shell's path to them.
-				// So we find them first, then call activateStaticComponents() after their children have been created.
-				let staticComponents = this.findStaticComponents(fragment, shell);
+				// So we find them first, then call instantiateStaticComponents() after their children have been created.
+				this.staticComponents = this.findStaticComponents(fragment, shell);
 
 				this.activateEmbeds(fragment, shell);
 
 				// Apply exprs
 				this.applyExprs(template.exprs);
 
-				this.instantiateStaticComponents(staticComponents);
+				this.instantiateStaticComponents(this.staticComponents);
 			}
 			else if (shell)
 				this.activateEmbeds(fragment, shell);
@@ -2433,47 +2454,33 @@ class NodeGroup {
 	 * Common init shared by RootNodeGroup and NodeGroup constructors.
 	 * But in a separate function because they need to do this at a different step.
 	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @param parentPath {?ExprPath}
-	 * @param exactKey {?string} Optional, if already calculated.
-	 * @param closeKey {?string}
-	 * @returns {[DocumentFragment, Shell]} */
-	init(template, parentPath=null, exactKey=null, closeKey=null) {
-		this.exactKey = exactKey || template.getExactKey();
-		this.closeKey = closeKey || template.getCloseKey();
-
-		this.parentPath = parentPath;
-		this.rootNg = parentPath?.parentNg?.rootNg || this;
-
+	 * @returns {[DocumentFragment, Shell]} The Shell created from the template,a nd the fragment cloned from the Shell.*/
+	populateFromTemplate(template) {
 		/*#IFDEV*/assert(this.rootNg);/*#ENDIF*/
-
-		/** @type {Template} */
 		this.template = template;
-
-		// new!  Is this needed?
-		template.nodeGroup = this;
-
-		// Get a cached version of the parsed and instantiated html, and ExprPaths.
+		this.exactKey = template.getExactKey();
+		this.closeKey = template.getCloseKey();
 
 		// If it's just a text node, skip a bunch of unnecessary steps.
-		if (!(this instanceof RootNodeGroup) && !template.exprs.length && !template.html[0].includes('<')) {
-			//let doc = this.rootNg.startNode?.ownerDocument || document;
-			let textNode = document.createTextNode(template.html[0]);
-
+		if (template.isText) {
+			let textNode = Globals$1.doc.createTextNode(template.html[0]);
 			this.startNode = this.endNode = textNode;
 			return [];
 		}
+
+		// Get a cached version of the parsed and instantiated html, and ExprPaths:
 		else {
 			let shell = Shell.get(template.html);
 			let fragment = shell.fragment.cloneNode(true);
 
-			if (fragment instanceof DocumentFragment) {
+			if (fragment?.nodeType === 11) { // DocumentFragment
 				let childNodes = fragment.childNodes;
 				this.startNode = childNodes[0];
 				this.endNode = childNodes[childNodes.length - 1];
 			}
-			else {
+			else
 				this.startNode = this.endNode = fragment;
-			}
+
 			return [fragment, shell];
 		}
 	}
@@ -2512,6 +2519,7 @@ class NodeGroup {
 				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.
@@ -2520,11 +2528,11 @@ class NodeGroup {
 			// 1. Instantiate it if it hasn't already been, sending all expr's to its constructor.
 			// 2. Otherwise send them to its render function.
 			// Components with no expressions as attributes are instead activated in activateEmbeds().
-			if (path.nodeMarker !== this.rootNg.root && path.isComponent()) {
+			if (path.nodeMarker !== this.rootNg.root && path.isComponent) {
 
-				if (!nextPath || !nextPath.isComponent() || nextPath.nodeMarker !== path.nodeMarker)
+				if (!nextPath || !nextPath.isComponent || nextPath.nodeMarker !== path.nodeMarker)
 					lastComponentPathIndex = i;
-				let isFirstComponentPath = !prevPath || !prevPath.isComponent() || prevPath.nodeMarker !== path.nodeMarker;
+				let isFirstComponentPath = !prevPath || !prevPath.isComponent || prevPath.nodeMarker !== path.nodeMarker;
 
 				if (isFirstComponentPath) {
 
@@ -2534,7 +2542,7 @@ class NodeGroup {
 						componentProps[attrName] = pathExprs[j].length > 1 ? pathExprs[j].join('') : pathExprs[j][0];
 					}
 
-					this.applyComponentExprs(path.nodeMarker, componentProps);
+					this.handleComponent(path.nodeMarker, componentProps, true);
 
 					// Set attributes on component.
 					for (let j=i; j<=lastComponentPathIndex; j++)
@@ -2553,7 +2561,10 @@ class NodeGroup {
 		// TODO: Only do this if we have ExprPaths within styles?
 		this.updateStyles();
 
-
+		// Call render() on static web components. This makes the component.staticAttribs() test work.
+		for (let el of this.staticComponents)
+			if (el.render)
+				el.render(Util.attribsToObject(el)); // It has no expressions.
 
 		// Invalidate the nodes cache because we just changed it.
 		this.nodesCache = null;
@@ -2569,50 +2580,39 @@ class NodeGroup {
 	}
 
 	/**
-	 * Create a nested Component or call render with the new props.
-	 * @param el {Solarite:HTMLElement}
-	 * @param props {Object} */
-	applyComponentExprs(el, props) {
-
-		// TODO: Does a hash of this already exist somewhere?
-		// Perhaps if Components were treated as child NodeGroups, which would need to be the child of an ExprPath,
-		// then we could re-use the hash and logic from NodeManager?
-		let newHash = getObjectHash(props);
-
+	 * Unified path to ensure a child component is instantiated (if placeholder) and optionally rendered.
+	 * @param el {HTMLElement}
+	 * @param props {?Object}
+	 * @param doRender {boolean}
+	 * @return {HTMLElement} The (possibly replaced) element. */
+	handleComponent(el, props=null, doRender=true) {
 		let isPreHtmlElement = el.hasAttribute('solarite-placeholder');
 		let isPreIsElement = el.hasAttribute('_is');
-
-
-		// Instantiate a placeholder.
+		let attribs, children;
 		if (isPreHtmlElement || isPreIsElement)
-			el = this.instantiateComponent(el, isPreHtmlElement, props);
-
-		// Call render() with the same params that would've been passed to the constructor.
-		// We do this even if the arguments haven't changed, so we can let the child component
-		// compare the arguments and then decide for itself whether it wants to re-render.
-		else if (el.render) {
-			//let oldHash = Globals.componentArgsHash.get(el);
-			//if (oldHash !== newHash) { //  Only if not changed.
-				let args = {};
+			[el, attribs, children] = this.instantiateComponent(el, isPreHtmlElement, props);
+		if (doRender && el.render) {
+			if (!attribs) {
+				attribs = Util.attribsToObject(el);
 				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.
-			//}
+					attribs[Util.dashesToCamel(name)] = props[name];
+				children = el.childNodes;
+			}
+			el.render(attribs, children);
 		}
-
-		Globals$1.componentArgsHash.set(el, newHash);
+		return el;
 	}
-
+	
 	/**
 	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
 	 * to its constructor.
+	 * This is only called by handleComponent()
+	 * This does not call render()
 	 *
-	 * The logic of this function is complex and could use cleaning up.
-	 *
-	 * @param el
+	 * @param el {HTMLElement}
 	 * @param isPreHtmlElement {?boolean} True if the element's tag name ends with -solarite-placeholder
 	 * @param props {Object} Attributes with dynamic values.
-	 * @return {HTMLElement} */
+	 * @return {[HTMLElement, attribs:Object, children:Node[]]}} */
 	instantiateComponent(el, isPreHtmlElement=undefined, props=undefined) {
 		if (isPreHtmlElement === undefined)
 			isPreHtmlElement = !el.hasAttribute('_is');
@@ -2627,19 +2627,12 @@ class NodeGroup {
 		if (!Constructor)
 			throw new Error(`The custom tag name ${tagName} is not registered.`)
 
-		let attribs = {};
+		// Pass other attribs to constructor, since otherwise they're not yet set on the element,
+		// and the constructor would otherwise have no way to see them.
+		let attribs = Util.attribsToObject(el, 'solarite-placeholder');
 		for (let name in props || {})
 			attribs[Util.dashesToCamel(name)] = props[name];
 
-		// Pass other attribs to constructor, since otherwise they're not yet set on the element,
-		// and the constructor would otherwise have no way to see them.
-		if (el.attributes.length) {
-			for (let attrib of el.attributes) {
-				let attribName = Util.dashesToCamel(attrib.name);
-				if (!attribs.hasOwnProperty(attribName) && attribName !== 'solarite-placeholder')
-					attribs[attribName] = attrib.value;
-			}
-		}
 
 		// Create the web component.
 		// Get the children that aren't Solarite's comment placeholders.
@@ -2670,7 +2663,7 @@ class NodeGroup {
 		if (this.endNode === el)
 			this.endNode = newEl;
 
-
+		// This is used only if inheriting from the Solarite class.
 		// applyComponentExprs() is called because we're rendering.
 		// So we want to render the sub-component also.
 		if (newEl.renderFirstTime)
@@ -2694,7 +2687,7 @@ class NodeGroup {
 				newEl.setAttribute(name, val);
 		}
 
-		return newEl;
+		return [newEl, attribs, children];
 	}
 
 	/**
@@ -2741,18 +2734,21 @@ class NodeGroup {
 	 * Requires the nodeCache to be present. */
 	removeAndSaveOrphans() {
 		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
-		let fragment = document.createDocumentFragment();
+		let fragment = Globals$1.doc.createDocumentFragment();
 		for (let node of this.getNodes())
 			fragment.append(node);
 	}
 
 
-	updatePaths(fragment, paths, offset) {
-		// Update paths to point to the fragment.
+	/**
+	 * @param fragment {DocumentFragment}
+	 * @param paths
+	 * @param startingPathDepth {int} */
+	updatePaths(fragment, paths, startingPathDepth) {
 		let pathLength = paths.length;
 		this.paths.length = pathLength;
 		for (let i=0; i<pathLength; i++) {
-			let path = paths[i].clone(fragment, offset);
+			let path = paths[i].clone(fragment, startingPathDepth);
 			path.parentNg = this;
 			this.paths[i] = path;
 		}
@@ -2779,7 +2775,7 @@ class NodeGroup {
 			`parentNode: ${this.parentNode?.tagName?.toLowerCase()}`,
 			'nodes:',
 			...setIndent(this.getNodes().map(item => {
-				if (item instanceof Node) {
+				if (item?.nodeType) {
 
 					let tree = nodeToArrayTree(item, nextNode => {
 
@@ -2834,7 +2830,7 @@ class NodeGroup {
 	}
 	//#ENDIF
 
-	findStaticComponents(root, shell, pathOffset=0) {
+	findStaticComponents(root, shell, startingPathDepth=0) {
 		let result = [];
 
 		// static components.  These are WebComponents that do not have any constructor arguments that are expressions.
@@ -2842,8 +2838,8 @@ class NodeGroup {
 		// Maybe someday these two paths will be merged?
 		// Must happen before ids because instantiateComponent will replace the element.
 		for (let path of shell.staticComponents) {
-			if (pathOffset)
-				path = path.slice(0, -pathOffset);
+			if (startingPathDepth)
+				path = path.slice(0, -startingPathDepth);
 			let el = resolveNodePath(root, path);
 
 			// Shell doesn't know if a web component is the pseudoRoot so we have to detect it here.
@@ -2855,8 +2851,9 @@ class NodeGroup {
 	}
 
 	instantiateStaticComponents(staticComponents) {
-		for (let el of staticComponents)
-			this.instantiateComponent(el);
+		// TODO: Why do we not call render() on the static component here?  The tests pass either way.
+		for (let i in staticComponents)
+			staticComponents[i] = this.handleComponent(staticComponents[i], null, false);
 	}
 
 	/**
@@ -2877,7 +2874,7 @@ class NodeGroup {
 					let el = resolveNodePath(root, path);
 					Util.bindId(rootEl, el);
 				}
-				}
+			}
 
 			// styles
 			if (options?.styles !== false) {
@@ -2907,9 +2904,8 @@ class NodeGroup {
 			}
 		}
 	}
-}
-
-
+}
+
 class RootNodeGroup extends NodeGroup {
 
 	/**
@@ -2923,18 +2919,18 @@ class RootNodeGroup extends NodeGroup {
 	exprsToRender = new Map();
 
 	/**
-	 *
-	 * @param template
-	 * @param el
-	 * @param options {?object}
-	 */
+	 * @param template {Template}
+	 * @param el {?HTMLElement} Optional, pre-existing htmlElement tat will be the root.
+	 * @param options {?object} */
 	constructor(template, el, options) {
 		super(template);
 
 		this.options = options;
 
-		this.rootNg = this;
-		let [fragment, shell] = this.init(template);
+		let [fragment, shell] = this.populateFromTemplate(template);
+
+		let startingPathDepth = 0;
+
 
 		if (fragment instanceof Text) {
 
@@ -2945,25 +2941,25 @@ class RootNodeGroup extends NodeGroup {
 					el.append(fragment);
 				this.root = el;
 			}
+			else
+				throw new Error('Cannot create a standalone text node');
 			Globals$1.nodeGroups.set(this.root, this);
 		}
+
+
 		else {
 
 			// If adding NodeGroup to an element.
-			let offset = 0;
-			let root = fragment; // TODO: Rename so it's not confused with this.root.
 			if (el) {
-				Globals$1.nodeGroups.set(el, this);
+				this.root = el;
 
 				// Save slot children
 				let slotChildren;
 				if (el.childNodes.length) {
-					slotChildren = document.createDocumentFragment();
+					slotChildren = Globals$1.doc.createDocumentFragment();
 					slotChildren.append(...el.childNodes);
 				}
 
-				this.root = el;
-
 				// If el should replace the root node of the fragment.
 				if (isReplaceEl(fragment, el)) {
 					el.append(...fragment.children[0].childNodes);
@@ -2974,8 +2970,10 @@ class RootNodeGroup extends NodeGroup {
 							el.setAttribute(attrib.name, attrib.value);
 
 					// Go one level deeper into all of shell's paths.
-					offset = 1;
-				} else {
+					startingPathDepth = 1;
+				}
+
+				else {
 					let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
 					if (!isEmpty)
 						el.append(...fragment.childNodes);
@@ -3003,35 +3001,35 @@ class RootNodeGroup extends NodeGroup {
 						el.append(slotChildren);
 				}
 
-				root = el;
-
 				this.startNode = el;
 				this.endNode = el;
-			} else {
+			}
+
+			// Instantiate as a standalone element.
+			else {
 				let singleEl = getSingleEl(fragment);
-				this.root = singleEl || fragment; // We return the whole fragment when calling r() with a collection of nodes.
+				this.root = singleEl || fragment; // We return the whole fragment when calling h() with a collection of nodes.
 
-				Globals$1.nodeGroups.set(this.root, this);
-				if (singleEl) {
-					root = singleEl;
-					offset = 1;
-				}
+				if (singleEl)
+					startingPathDepth = 1;
 			}
-
-			this.updatePaths(root, shell.paths, offset);
+			Globals$1.nodeGroups.set(this.root, this);
+			this.updatePaths(this.root, shell.paths, startingPathDepth);
 
 			// Static web components can sometimes have children created via expressions.
 			// But calling applyExprs() will mess up the shell's path to them.
 			// So we find them first, then call activateStaticComponents() after their children have been created.
-			let staticComponents = this.findStaticComponents(root, shell, offset);
+			this.staticComponents = this.findStaticComponents(this.root, shell, startingPathDepth);
 
-			this.activateEmbeds(root, shell, offset);
+			this.activateEmbeds(this.root, shell, startingPathDepth);
 
 			// Apply exprs
 			this.applyExprs(template.exprs);
 
-			this.instantiateStaticComponents(staticComponents);
+			this.instantiateStaticComponents(this.staticComponents);
 		}
+
+
 	}
 }
 
@@ -3073,8 +3071,7 @@ class Template {
 	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
 
-	/** @type {NodeGroup} */
-	nodeGroup;
+	isText;
 
 	/**
 	 *
@@ -3179,169 +3176,203 @@ class Template {
 
 		return this.closeKey;
 	}
-}
 
+	/**
+	 * @param tag {string}
+	 * @param props {?Record<string, any>}
+	 * @param children
+	 * @returns {Template} */
+	static fromJsx(tag, props, children) {
 
-/**
- * @typedef {Object} RenderOptions
- * @property {boolean=} styles - Replace :host in style tags to scope them locally.
- * @property {boolean=} scripts - Execute script tags.
- * @property {boolean=} ids - Create references to elements with id or data-id attributes.
- * @property {?boolean} render - Deprecated.
- * 	 Used only when options are given to a class super constructor inheriting from Solarite.
- *     True to call render() immediately in super constructor.
- *     False to automatically call render() at all.
- *     Undefined (default) to call render() when added to the DOM, unless already rendered.
- */
-
-/**
- * Convert strings to HTMLNodes.
- * Using h`...` as a tag will always create a Template.
- * Using h() as a function() will always create a DOM element.
- *
- * Features beyond what standard js tagged template strings do:
- * 1. r`` sub-expressions
- * 2. functions, nodes, and arrays of nodes as sub-expressions.
- * 3. html-escape all expressions by default, unless wrapped in r()
- * 4. event binding
- * 5. TODO:  list more
- *
- * Currently supported:
- * 1. h(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
- * 2. h(el, template, ?options)        // Render the Template created by #1 to element.
- *
- * 3. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
- *
- * 4. h('Hello');                      // Create single text node.
- * 5. h('<b>Hello</b>');               // Create single HTMLElement
- * 6. h('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 7. h()`Hello<b>${'World'}!</b>`     // Same as 4-6, but evaluates the string as a Solarite template, which
- *                                     // includes properly handling nested components and r`` sub-expressions.
- * 8. h(template)                      // Render Template created by #1.
- *
- * 9. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
- * 10. h(string, object, ...)          // JSX TODO
- * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
- * @param exprs {*[]|string|Template|Object}
- * @return {Node|HTMLElement|Template} */
-function h(htmlStrings=undefined, ...exprs) {
+		// HTML void elements that must not have closing tags
+		const isVoid = selfClosingTags.has(tag.toLowerCase());
 
-	if (htmlStrings === undefined && !exprs.length && arguments.length)
-		throw new Error('h() cannot be called with undefined.');
+		// Build htmlStrings/exprs so Shell can place placeholders in attribute values and child content.
+		let htmlStrings = [];
+		let templateExprs = [];
 
-	// TODO: Make this a more flat if/else and call other functions for the logic.
-	if (htmlStrings instanceof Node) {
-		let parent = htmlStrings, template = exprs[0];
+		// Opening tag
+		let open = `<${tag}`;
 
-		// 1
-		if (!(exprs[0] instanceof Template)) {
-			if (parent.shadowRoot)
-				parent.innerHTML = ''; // Remove shadowroot.  TODO: This could mess up paths?
+		// Attributes
+		if (props && typeof props === 'object') {
+			for (let name in props) {
+				let value = props[name];
 
-			let options = exprs[0];
+				// id and data-id are static in templates — never expressions
+				if (name === 'id' || name === 'data-id') {
+					// Write directly into the opening string with quotes
+					open += ` ${name}="${value}"`;
+					continue;
+				}
 
-			// Return a tagged template function that applies the tagged themplate to parent.
-			let taggedTemplate = (htmlStrings, ...exprs) => {
-				Globals$1.rendered.add(parent);
-				let template = new Template(htmlStrings, exprs);
-				return template.render(parent, options);
-			};
-			return taggedTemplate;
+				// Dynamic attribute value: functions are unquoted (e.g., onclick=${fn}), others quoted
+				if (typeof value === 'function') {
+					open += ` ${name}=`;
+					htmlStrings.push(open);
+					templateExprs.push(value);
+					// reset so subsequent attributes start fresh (e.g., ' title=')
+					open = ``;
+				}
+				else {
+					open += ` ${name}=`;
+					htmlStrings.push(open);
+					templateExprs.push(value);
+					// reset so subsequent attributes start fresh (e.g., ' title=')
+					open = ``;
+				}
+			}
 		}
 
-		// 2. Render template created by #4 to element.
-		else { // instanceof Template
-			let options = exprs[1];
-			template.render(parent, options);
-
-			// Append on the first go.
-			if (!parent.childNodes.length && this) {
-				// TODO: Is this ever executed?
-				debugger;
-				parent.append(this.rootNg.getParentNode());
+		// Finalize opening tag precisely to match tagged template splitting
+		if (!isVoid) {
+			const pushedAny = htmlStrings.length > 0;
+			// If nothing pushed yet (no dynamic attrs), push the entire open + '>'
+			if (!pushedAny)
+				htmlStrings.push(open + '>');
+			else {
+				// If we were in a quoted attr (open === '"'), then the string after expr is '">' ;
+				// Otherwise (function-valued attr), the string after expr is just '>'
+				htmlStrings.push(open === '"' ? '">' : '>');
 			}
+
+			for (let child of children)
+				addChild(child, htmlStrings, templateExprs);
+		}
+
+		// Closing tag (not for void tags)
+		if (!isVoid) {
+			// If we never emitted the '>' for the open tag (no children were added),
+			// then it was appended above before children. Now just add the closing tag to the last html segment.
+			let lastIdx = htmlStrings.length - 1;
+			htmlStrings[lastIdx] += `</${tag}>`;
+		}
+		else {
+			// Void element: ensure we emitted a trailing '>' segment
+			const pushedAny = htmlStrings.length > 0;
+			if (!pushedAny)
+				htmlStrings.push(open + '>');
+			else
+				htmlStrings.push('>');
 		}
-	}
 
-	// 3. Path if used as a template tag.
-	else if (Array.isArray(htmlStrings)) {
-		return new Template(htmlStrings, exprs);
+		// Ensure invariant
+		//assert(htmlStrings.length === templateExprs.length + 1);
+		//console.log([htmlStrings, templateExprs])
+		return new Template(htmlStrings, templateExprs);
 	}
+}
 
-	else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
-		// 10. JSX
-		if (typeof exprs[0] === 'object') {
-			exprs[0] || {};
-			exprs.slice(1);
 
-			let templateHtmlStrings = [];
-			let templateExprs = [];
+const selfClosingTags = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
 
-			// 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);
+/**
+ * Add child Templates that were already created via h() and Template.fromJsx()
+ * @param template {Template}
+ * @param html {string[]}
+ * @param exprs {any[]} */
+const addChild = (template, html, exprs) => {
+
+	if (Array.isArray(template)) {
+		for (let c of template)
+			addChild(c, html, exprs);
+	}
+	else {
+		let flatten = false;
+		if (template instanceof Template) {
+			// Heuristic to match tagged-template splitting:
+			// - Flatten if the child has expressions (so JSX can inline attribute/value placeholders like tagged literals would).
+			// - Also flatten void elements (e.g., <img>) so they inline like literals.
+			// - Otherwise, keep as a dynamic child placeholder to match cases where the tagged template used an expression child.
+			const childHasExprs = template.exprs.length > 0;
+			if (childHasExprs)
+				flatten = true;
+			else {
+				const m = (template.html[0] || '').match(/^<([a-zA-Z][\w:-]*)/);
+				const childTag = m ? m[1].toLowerCase() : '';
+				flatten = selfClosingTags.has(childTag);
+			}
 		}
 
+		if (flatten) {
+			// Flatten/interleave into current segment to match tagged template splitting
+			html[html.length - 1] += template.html[0];
+			for (let i = 0; i < template.exprs.length; i++) {
+				exprs.push(template.exprs[i]);
+				html.push(template.html[i + 1] ?? '');
+			}
+		} else {
+			// Keep as dynamic child
+			exprs.push(template);
+			html.push('');
+		}
+	}
+};
 
-		// If it starts with a string, trim both ends.
-		// TODO: Also trim if it ends with whitespace?
-		if (htmlStrings.match(/^\s^</))
-			htmlStrings = htmlStrings.trim();
+
+/**
+ * @typedef {Object} RenderOptions
+ * @property {boolean=} styles - Replace :host in style tags to scope them locally.
+ * @property {boolean=} scripts - Execute script tags.
+ * @property {boolean=} ids - Create references to elements with id or data-id attributes.
+ * @property {?boolean} render - Deprecated.
+ * 	 Used only when options are given to a class super constructor inheriting from Solarite.
+ *     True to call render() immediately in super constructor.
+ *     False to automatically call render() at all.
+ *     Undefined (default) to call render() when added to the DOM, unless already rendered.
+ */
+
+/**
+ * Convert a template, string, or object into a DOM Node or Element
+ *
+ * 1. h('Hello');                      // Create single text node.
+ * 2. h('<b>Hello</b>');               // Create single HTMLElement
+ * 3. h('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
+ * 4. h(template)                      // Render Template created by h`<html>` or h();
+ * 5. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
+ * @param arg {string|Template|{render:()=>void}}
+ * @returns {Node|DocumentFragment|HTMLElement} */
+function toEl(arg) {
+
+	if (typeof arg === 'string') {
+		let html = arg;
+
+		// If it's an element with whitespace before or after it, trim both ends.
+		if (html.match(/^\s^</) || html.match(/>\s+$/))
+			html = html.trim();
 
 		// We create a new one each time because otherwise
 		// the returned fragment will have its content replaced by a subsequent call.
-		let templateEl = document.createElement('template');
-		templateEl.innerHTML = htmlStrings;
+		let templateEl = Globals$1.doc.createElement('template');
+		templateEl.innerHTML = html;
 
-		// 4+5. Return Node if there's one child.
+		// 1+2. Return Node if there's one child.
 		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
 		if (relevantNodes.length === 1)
 			return relevantNodes[0];
 
-		// 6. Otherwise return DocumentFragment.
+		// 3. Otherwise return DocumentFragment.
 		return templateEl.content;
 	}
 
-	// 7. Create a static element
-	else if (htmlStrings === undefined) {
-		return (htmlStrings, ...exprs) => {
-			//Globals.rendered.add(parent)
-			let template = h(htmlStrings, ...exprs);
-			return template.render();
-		}
-	}
-
-	// 8.
-	else if (htmlStrings instanceof Template) {
-		return htmlStrings.render();
+	// 4.
+	if (arg instanceof Template) {
+		return arg.render();
 	}
 
-
-	// 9. Create dynamic element with render() function.
+	// 5. Create dynamic element from an object with a render() function.
 	// TODO: This path doesn't handle embeds like data-id="..."
-	else if (typeof htmlStrings === 'object') {
-		let obj = htmlStrings;
+	else if (arg && typeof arg === 'object') {
+		let obj = arg;
 
-		if (obj.constructor.name !== 'Object') 
+		if (obj.constructor.name !== 'Object')
 			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
 
-
-		// Special rebound render path, called by normal path.
-		// Intercepts the main r`...` function call inside render().
-		if (Globals$1.objToEl.has(obj)) {
-			return function(...args) {
-			   let template = h(...args);
-			   let el = template.render();
-				Globals$1.objToEl.set(obj, el);
-			}.bind(obj);
-		}
-
 		// Normal path
-		else {
+		if (!Globals$1.objToEl.has(obj)) {
 			Globals$1.objToEl.set(obj, null);
-			obj[renderF](); // Calls the Special rebound render path above, when the render function calls r(this)
+			obj[renderF](); // Calls the Special rebound render path above, when the render function calls h(this)
 			let el = Globals$1.objToEl.get(obj);
 			Globals$1.objToEl.delete(obj);
 
@@ -3349,7 +3380,7 @@ function h(htmlStrings=undefined, ...exprs) {
 				if (typeof obj[name] === 'function')
 					el[name] = obj[name].bind(el);  // Make the "this" of functions be el.
 					// TODO: But this doesn't work for passing an object with functions as a constructor arg via an attribute:
-					// <my-element arg=${{myFunc() { return this }}}
+				// <my-element arg=${{myFunc() { return this }}}
 				else
 					el[name] = obj[name];
 
@@ -3365,13 +3396,145 @@ function h(htmlStrings=undefined, ...exprs) {
 		}
 	}
 
-	else
-		throw new Error('Unsupported arguments.')
+	throw new Error('toEl() does not support argument of type: ' + (arg ? typeof arg : arg));
+
 }
 
+
 // Trick to prevent minifier from renaming this function.
 let renderF = 'render';
 
+/**
+ * Convert strings to HTMLNodes.
+ * Using h`...` as a tag will always create a Template.
+ * Using h() as a function() will always create a DOM element.
+ *
+ * Features beyond what standard js tagged template strings do:
+ * 1. r`` sub-expressions
+ * 2. functions, nodes, and arrays of nodes as sub-expressions.
+ * 3. html-escape all expressions by default, unless wrapped in h()
+ * 4. event binding
+ * 5. TODO:  list more
+ *
+ * General rule:
+ * If h() is a function with null or an HTMLElement as its first argument create a Node.
+ * Otherwise create a template
+ *
+ * Currently supported:
+ *
+ * Create Tempataes
+ * 1. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
+ * 2. h('<b>Hello</b><u>Goodbye</u>'); // Create Template from string, that can later be used to create nodes.
+ *
+ * Add children to an element.
+ * 3. h(el, h`<b>${'Hi'}</b>`, ?options)
+ * 4. h(el, ?options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
+ *
+ * Create top-level element
+ * 5. h()`Hello<b>${'World'}!</b>`
+ *
+ * 6. h(string, object, ...)           // Used for JSX
+ * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
+ * @param exprs {*[]|string|Template|Object}
+ * @return {Node|HTMLElement|Template} */
+function h(htmlStrings=undefined, ...exprs) {
+
+	// 1. Tagged template
+	if (Array.isArray(arguments[0])) {
+		return new Template(arguments[0], exprs);
+	}
+
+	// 2. String to template, or JSX factory form h(tag, props, ...children)
+	else if (typeof arguments[0] === 'string' || arguments[0] instanceof String) {
+		let tagOrHtml = arguments[0];
+
+		// 2a. JSX: h("tag", {props}, ...children)
+		if (exprs.length && (typeof exprs[0] === 'object' || exprs[0] === null)) {
+			let tag = tagOrHtml + '';
+			let props = exprs[0] || {};
+			let children = exprs.slice(1);
+
+			return Template.fromJsx(tag, props, children);
+		}
+
+		// 2b. Plain html string => template
+		else {
+			let html = tagOrHtml;
+			// If it starts with whitespace, trim both ends.
+			// TODO: Also trim if it ends with whitespace?
+			if (html.match(/^\s^</))
+				html = html.trim();
+			return new Template([html], []);
+		}
+	}
+
+	else if (arguments[0] instanceof HTMLElement || arguments[0] instanceof DocumentFragment) {
+
+		// 3. Render template to element.
+		if (arguments[1] instanceof Template) {
+
+			/** @type Template */
+			let template = arguments[1];
+			let parent = arguments[0];
+			let options = arguments[2]; // deprecated?
+			template.render(parent, options);
+		}
+
+		// 4. Render tagged template to element
+		else {
+			let parent = arguments[0], options = arguments[1];
+
+			// Remove shadowroot.  TODO: This could mess up paths?
+			if (parent.shadowRoot)
+				parent.innerHTML = '';
+
+			// Return a tagged template function that applies the tagged template to parent.
+			let taggedTemplate = (htmlStrings, ...exprs) => {
+				Globals$1.rendered.add(parent);
+				let template = new Template(htmlStrings, exprs);
+				return template.render(parent, options);
+			};
+			return taggedTemplate;
+		}
+	}
+
+	// 5. Create a static element  h()'<div></div>' (Deprecated?)
+	else if (!arguments.length) {
+		return (htmlStrings, ...exprs) => {
+				let template = h(htmlStrings, ...exprs);
+				return toEl(template); // Go to path 6.
+			}
+	}
+
+	// 6. Help toEl() with objects.
+	// Special rebound render path, called by normal path.
+	// Intercepts the main h(this)`...` function call inside render().
+	// TODO: This path doesn't handle embeds like data-id="..."
+	else if (typeof arguments[0] === 'object' && Globals$1.objToEl.has(arguments[0])) {
+		let obj = arguments[0];
+
+		if (obj.constructor.name !== 'Object')
+			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
+
+		// Jsx with h(this, <jsx>)
+		if (arguments[1] instanceof Template) {
+			let template = arguments[1];
+			let el = template.render();
+			Globals$1.objToEl.set(obj, el);
+		}
+
+		// h(this)`<div>...</div>
+		else
+			return function(...args) {
+				let template = h(...args);
+				let el = template.render();
+				Globals$1.objToEl.set(obj, el);
+			}.bind(obj);
+	}
+	else
+		throw new Error('h() does not support argument of type: ' + (arguments[0] ? typeof arguments[0] : arguments[0]))
+}
+
 /**
  * There are three ways to create an instance of a Solarite Component:
  * 1.  new ComponentName();                                         // direct class instantiation
@@ -3545,7 +3708,7 @@ function createSolarite(extendsTag=null) {
 
 		BaseClass = Globals$1.elementClasses[extendsTag];
 		if (!BaseClass) { // TODO: Use Cache
-			BaseClass = document.createElement(extendsTag).constructor;
+			BaseClass = Globals$1.doc.createElement(extendsTag).constructor;
 			Globals$1.elementClasses[extendsTag] = BaseClass;
 		}
 	}
@@ -3606,7 +3769,7 @@ function createSolarite(extendsTag=null) {
 						this.innerHTML = html;
 					}
 					else
-						this.modifications = r(this, html, options);
+						this.modifications = h(this, html, options);
 				}
 			})*/
 
@@ -3656,11 +3819,14 @@ function createSolarite(extendsTag=null) {
 let define = 'define';
 let getName = 'getName';
 
-/**
- * Solarite JavasCript UI library.
- * MIT License
- * https://vorticode.github.io/solarite/
- */
+/*
+┏┓  ┓    •
+┗┓┏┓┃┏┓┏┓┓╋▗▖
+┗┛┗┛┗┗┻╹ ╹╹┗
+JavasCript UI library
+@license MIT
+@copyright Vorticode LLC
+https://vorticode.github.io/solarite/ */
 
 /**
  * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
@@ -3674,4 +3840,4 @@ const Solarite = new Proxy(createSolarite(), {
 //export {default as watch, renderWatched} from './watch.js'; // unfinished
 
 export default h;
-export { ArgType, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, delve, getArg, h, h as r, setArgs };
+export { ArgType, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, getArg, h, h as r, setArgs, toEl };