solarite 0.2.4 → 0.3.1

package/src/{solarite/NodeGroup.js → NodeGroup.js}

@@ -1,14 +1,11 @@
-import {assert} from "../util/Errors.js";
-import ExprPath, {PathType, resolveNodePath} from "./ExprPath.js";
+import {assert} from "./assert.js";
+import ExprPath, {ExprPathType, resolveNodePath} from "./ExprPath.js";
 import {getObjectHash} from "./hash.js";
 import Shell from "./Shell.js";
-import udomdiff from "./udomdiff.js";
-import Util, {arraySame, flattenAndIndent, isEvent, nodeToArrayTree, setIndent} from "./Util.js";
+import Util, {flattenAndIndent, nodeToArrayTree, setIndent} from "./Util.js";
 //import NodeGroupManager from "./NodeGroupManager.js";
-import delve from "../util/delve.js";
+import delve from "./delve.js";
 import Globals from "./Globals.js";
-import MultiValueMap from "../util/MultiValueMap.js";
-
 
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
 
@@ -34,7 +31,8 @@ export default 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[]} */
@@ -52,11 +50,11 @@ export default 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.
@@ -64,14 +62,26 @@ export default 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.instantiateStaticComponents(staticComponents);
+			}
+			else if (shell)
+				this.activateEmbeds(fragment, shell);
 		}
 	}
 
@@ -99,68 +109,119 @@ export default 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]);
 
-		return [fragment, shell];
+			this.startNode = this.endNode = textNode;
+			return [];
+		}
+		else {
+			let shell = Shell.get(template.html);
+			let fragment = shell.fragment.cloneNode(true);
+
+			if (fragment instanceof DocumentFragment) {
+				let childNodes = fragment.childNodes;
+				this.startNode = childNodes[0];
+				this.endNode = childNodes[childNodes.length - 1];
+			}
+			else {
+				this.startNode = this.endNode = fragment;
+			}
+			return [fragment, shell];
+		}
 	}
 
 	/**
 	 * 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;
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEV*/
+		this.verify();/*#ENDIF*/
+
+		// Things to consider:
+		// 1. One path may use multipe expressions.  E.g. <div class="${1} ${2}">
+		// 2. One component may need to use multiple attribute paths to be instantiated.
+		// 3. We apply them in reverse order so that a <select> box has its children created from an expression
+		//    before its instantiated and its value attribute is set via an expression.
+
+		let 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--;
+			}
 
-		// Update exprs at paths.
-		let exprIndex = exprs.length-1, expr, lastNode;
+			// 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.
 
-		// 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];
+			// If expr is an attribute in a component:
+			// 1. Instantiate it if it hasn't already been, sending all expr's to its constructor.
+			// 2. Otherwise send them to its render function.
+			// Components with no expressions as attributes are instead activated in activateEmbeds().
+			if (path.nodeMarker !== this.rootNg.root && path.isComponent()) {
 
-			// Nodes
+				if (!nextPath || !nextPath.isComponent() || nextPath.nodeMarker !== path.nodeMarker)
+					lastComponentPathIndex = i;
+				let isFirstComponentPath = !prevPath || !prevPath.isComponent() || prevPath.nodeMarker !== path.nodeMarker;
 
-			// 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 (isFirstComponentPath) {
 
-			exprIndex = path.apply(expr, exprs, exprIndex, this.currentComponentProps);
+					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];
+					}
 
-			lastNode = path.nodeMarker;
+					this.applyComponentExprs(path.nodeMarker, componentProps);
 
+					// Set attributes on component.
+					for (let j=i; j<=lastComponentPathIndex; j++)
+						paths[j].apply(pathExprs[j]);
+				}
+			}
 
-			exprIndex--;
-		} // end for(path of this.paths)
+			// 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.
 		this.nodesCache = null;
 
 		// If there's leftover expressions, there's probably an issue with the Shell that created this NodeGroup,
 		// and the number of paths not matching.
-		/*#IFDEV*/assert(exprIndex === -1);/*#ENDIF*/
+		/*#IFDEV*/
+		assert(exprIndex === -1);/*#ENDIF*/
 
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEV*/
+		this.verify();/*#ENDIF*/
 	}
 
 	/**
@@ -174,24 +235,30 @@ export default class NodeGroup {
 		// then we could re-use the hash and logic from NodeManager?
 		let newHash = getObjectHash(props);
 
-		let isPreHtmlElement = el.tagName.endsWith('-SOLARITE-PLACEHOLDER');
+		let isPreHtmlElement = el.hasAttribute('solarite-placeholder');
 		let isPreIsElement = el.hasAttribute('_is')
 
 
 		// Instantiate a placeholder.
 		if (isPreHtmlElement || isPreIsElement)
-			el = this.createNewComponent(el, isPreHtmlElement, props);
+			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.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.componentArgsHash.get(el);
+			//if (oldHash !== newHash) { //  Only if not changed.
+				let args = {};
+				for (let name in props || {})
+					args[Util.dashesToCamel(name)] = props[name];
+				el.render(args); // Pass new values of props to render so it can decide how it wants to respond.
+			//}
 		}
 
-		Globals.componentHash.set(el, newHash);
+		Globals.componentArgsHash.set(el, newHash);
 	}
-	
+
 	/**
 	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
 	 * to its constructor.
@@ -199,78 +266,54 @@ export default class NodeGroup {
 	 * The logic of this function is complex and could use cleaning up.
 	 *
 	 * @param el
-	 * @param isPreHtmlElement
+	 * @param isPreHtmlElement {?boolean} True if the element's tag name ends with -solarite-placeholder
 	 * @param props {Object} Attributes with dynamic values.
 	 * @return {HTMLElement} */
-	createNewComponent(el, isPreHtmlElement=undefined, props=undefined) {
+	instantiateComponent(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) && attribName !== 'solarite-placeholder')
+					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())
+			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)
@@ -282,31 +325,31 @@ export default 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')
+			if (attrib.name !== '_is' && attrib.name !== 'solarite-placeholder')
 				newEl.setAttribute(attrib.name, attrib.value);
 
 		// Set dynamic attributes if they are primitive types.
-		for (let name in 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;
 	}
 
@@ -352,8 +395,7 @@ export default class NodeGroup {
 
 	/**
 	 * Requires the nodeCache to be present. */
-	saveOrphans() {
-		/*#IFDEV*/assert(!this.startNode.parentNode);/*#ENDIF*/
+	removeAndSaveOrphans() {
 		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
 		let fragment = document.createDocumentFragment();
 		for (let node of this.getNodes())
@@ -363,8 +405,9 @@ export default 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;
@@ -386,23 +429,23 @@ export default class NodeGroup {
 	 * An interleaved array of sets of nodes and top-level ExprPaths
 	 * @type {(Node|HTMLElement|ExprPath)[]} */
 	get nodes() { throw new Error('')};
-	
+
 	get debug() {
 		return [
 			`parentNode: ${this.parentNode?.tagName?.toLowerCase()}`,
 			'nodes:',
 			...setIndent(this.getNodes().map(item => {
 				if (item instanceof Node) {
-					
+
 					let tree = nodeToArrayTree(item, nextNode => {
-						
-						let path = this.paths.find(path=>path.type === PathType.Content && path.getNodes().includes(nextNode));
+
+						let path = this.paths.find(path=>path.type === ExprPathType.Content && path.getNodes().includes(nextNode));
 						if (path)
 							return [`Path.nodes:`]
-						
+
 						return [];
 					})
-					
+
 					// TODO: How to indend nodes belonging to a path vs those that just occur after the path?
 					return flattenAndIndent(tree)
 				}
@@ -413,10 +456,10 @@ export default class NodeGroup {
 	}
 
 	get debugNodes() { return this.getNodes() }
-	
-	
+
+
 	get debugNodesHtml() { return this.getNodes().map(n => n.outerHTML || n.textContent) }
-	
+
 	verify() {
 		if (!window.verify)
 			return;
@@ -431,7 +474,7 @@ export default class NodeGroup {
 
 		// if (this.parentPath)
 		// 	assert(this.parentPath.nodeGroups.includes(this));
-		
+
 		for (let path of this.paths) {
 			assert(path.parentNg === this)
 
@@ -447,61 +490,70 @@ export default class NodeGroup {
 	}
 	//#ENDIF
 
+	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 instantiateComponent().
+		// Maybe someday these two paths will be merged?
+		// Must happen before ids because instantiateComponent will replace the element.
 		for (let path of shell.staticComponents) {
 			if (pathOffset)
 				path = path.slice(0, -pathOffset);
 			let el = resolveNodePath(root, path);
 
 			// Shell doesn't know if a web component is the pseudoRoot so we have to detect it here.
+			// Recreating it is necessary so we can pass the constructor args to it.
 			if (root !== el/* && !isReplaceEl(root, el)*/) // TODO: is isReplaceEl necessary?
-				this.createNewComponent(el)
+				result.push(el);
 		}
+		return result;
+	}
+
+	instantiateStaticComponents(staticComponents) {
+		for (let el of staticComponents)
+			this.instantiateComponent(el)
+	}
+
+	/**
+	 * @param root {HTMLElement|DocumentFragment}
+	 * @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);
@@ -522,20 +574,8 @@ export 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();
 
 	/**
@@ -552,82 +592,102 @@ export 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.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.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) && attrib.name !== 'solarite-placeholder')
+							el.setAttribute(attrib.name, attrib.value);
+
+					// Go one level deeper into all of shell's paths.
+					offset = 1;
+				} else {
+					let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
+					if (!isEmpty)
+						el.append(...fragment.childNodes);
+				}
+
+				// Setup children
+				if (slotChildren) {
 
-			// 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.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);
+
+			// Apply exprs
+			this.applyExprs(template.exprs);
 
-	clearRenderWatched() {
-		this.watchedExprPaths = {};
-		this.mapCallbacks = new Map();
+			this.instantiateStaticComponents(staticComponents);
+		}
 	}
 }
 
@@ -649,7 +709,7 @@ 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('-') // TODO: Check for solarite-placeholder attribute instead?
 		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
 }