@solidjs/web 2.0.0-beta.12 → 2.0.0-beta.14

package/dist/server.js

@@ -3,6 +3,34 @@ export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, S
 import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    defaultValue: 2,
+    checked: 1,
+    defaultChecked: 2
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1,
+    defaultSelected: 2
+  },
+  TEXTAREA: {
+    value: 1,
+    defaultValue: 2
+  },
+  VIDEO: {
+    muted: 1,
+    defaultMuted: 2
+  },
+  AUDIO: {
+    muted: 1,
+    defaultMuted: 2
+  }
+};
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -951,6 +979,9 @@ function getAssets() {
   for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
   return out;
 }
+function Assets(props) {
+  useAssets(() => props.children);
+}
 function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
@@ -1175,4 +1206,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEventListener, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };
+export { Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEvent, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, notSup as getDelegatedRoot, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as ref, notSup as registerDelegatedContainer, notSup as registerDelegatedRoot, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as setStyleProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, notSup as unregisterDelegatedContainer, notSup as unregisterDelegatedRoot, useAssets };

package/dist/web.cjs

@@ -31,6 +31,7 @@ const DOMWithState = {
   }
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
+const $$SLOT = /*#__PURE__*/Symbol("slot");
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -64,14 +65,18 @@ const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectF
 } : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
-function reconcileArrays(parentNode, a, b) {
+function reconcileArrays(parentNode, a, b, marker) {
   let bLength = b.length,
     aEnd = a.length,
     bEnd = bLength,
     aStart = 0,
     bStart = 0,
-    after = a[aEnd - 1].nextSibling,
-    map = null;
+    tail = a[aEnd - 1],
+    tailTag = tail[$$SLOT],
+    after = tail.parentNode === parentNode && (!tailTag || tailTag === marker) ? tail.nextSibling : marker || null,
+    map = null,
+    anchor,
+    anchorTag;
   while (aStart < aEnd || bStart < bEnd) {
     if (a[aStart] === b[bStart]) {
       aStart++;
@@ -83,20 +88,43 @@ function reconcileArrays(parentNode, a, b) {
       bEnd--;
     }
     if (aEnd === aStart) {
-      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
-      while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
+      let node;
+      if (bEnd < bLength) {
+        if (bStart) {
+          const prev = b[bStart - 1];
+          const prevTag = prev[$$SLOT];
+          node = prev.parentNode === parentNode && (!prevTag || prevTag === marker) ? prev.nextSibling : after;
+        } else node = b[bEnd - bStart];
+      } else node = after;
+      while (bStart < bEnd) {
+        const n = b[bStart++];
+        parentNode.insertBefore(n, node);
+        if (marker) n[$$SLOT] = marker;
+      }
     } else if (bEnd === bStart) {
       while (aStart < aEnd) {
-        if (!map || !map.has(a[aStart])) a[aStart].remove();
-        aStart++;
+        const n = a[aStart++];
+        if (!map || !map.has(n)) {
+          const tag = n[$$SLOT];
+          if (n.parentNode === parentNode && (!tag || tag === marker)) n.remove();
+        }
+      }
+    } else if ((anchor = a[aStart]) === b[bEnd - 1] && b[bStart] === a[aEnd - 1] && anchor.parentNode === parentNode && (!(anchorTag = anchor[$$SLOT]) || anchorTag === marker)) {
+      if (marker) {
+        do {
+          const n = a[--aEnd];
+          parentNode.insertBefore(n, anchor);
+          n[$$SLOT] = marker;
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
+      } else {
+        do {
+          parentNode.insertBefore(a[--aEnd], anchor);
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
       }
-    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const anchor = a[aStart];
-      do {
-        parentNode.insertBefore(a[--aEnd], anchor);
-        bStart++;
-        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
-      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
       if (!map) {
         map = new Map();
@@ -114,35 +142,64 @@ function reconcileArrays(parentNode, a, b) {
             sequence++;
           }
           if (sequence > index - bStart) {
-            const node = a[aStart];
-            while (bStart < index) parentNode.insertBefore(b[bStart++], node);
-          } else parentNode.replaceChild(b[bStart++], a[aStart++]);
+            const head = a[aStart];
+            const headTag = head[$$SLOT];
+            const node = head.parentNode === parentNode && (!headTag || headTag === marker) ? head : after;
+            while (bStart < index) {
+              const n = b[bStart++];
+              parentNode.insertBefore(n, node);
+              if (marker) n[$$SLOT] = marker;
+            }
+          } else {
+            const oldNode = a[aStart++];
+            const newNode = b[bStart++];
+            const oldTag = oldNode[$$SLOT];
+            if (oldNode.parentNode === parentNode && (!oldTag || oldTag === marker)) {
+              parentNode.replaceChild(newNode, oldNode);
+            } else {
+              parentNode.insertBefore(newNode, after);
+            }
+            if (marker) newNode[$$SLOT] = marker;
+          }
         } else aStart++;
-      } else a[aStart++].remove();
+      } else {
+        const n = a[aStart++];
+        const nTag = n[$$SLOT];
+        if (n.parentNode === parentNode && (!nTag || nTag === marker)) n.remove();
+      }
     }
   }
 }
 
-const $$EVENTS = "_$DX_DELEGATE";
+const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
 const INNER_OWNED = {};
+const delegatedEvents = new Set();
+const delegatedContainers = new Map();
 function render$1(code, element, init, options = {}) {
-  const renderRoot = getChildRoot(element);
   let disposer;
-  solidJs.createRoot(dispose => {
-    disposer = dispose;
-    if (element === document) {
-      const tree = code();
-      effect(() => solidJs.flatten(tree), () => {});
-    } else {
-      const tree = code();
-      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
-    }
-  }, {
-    id: options.renderId
-  });
+  registerDelegatedRoot(element);
+  try {
+    solidJs.createRoot(dispose => {
+      disposer = dispose;
+      if (element === document) {
+        const tree = code();
+        effect(() => solidJs.flatten(tree), () => {});
+      } else {
+        const tree = code();
+        insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
+      }
+    }, {
+      id: options.renderId
+    });
+  } catch (err) {
+    if (disposer) disposer();
+    unregisterDelegatedRoot(element);
+    throw err;
+  }
   return () => {
     disposer();
-    renderRoot.textContent = "";
+    unregisterDelegatedRoot(element);
+    element.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -155,20 +212,66 @@ function template(html, flag) {
   const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
   return fn;
 }
-function delegateEvents(eventNames, document = window.document) {
-  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
+function delegateEvents(eventNames) {
   for (let i = 0, l = eventNames.length; i < l; i++) {
     const name = eventNames[i];
-    if (!e.has(name)) {
-      e.add(name);
-      document.addEventListener(name, eventHandler);
+    if (!delegatedEvents.has(name)) {
+      delegatedEvents.add(name);
+      delegatedContainers.forEach((state, container) => attachDelegatedEvent(name, container, state));
     }
   }
 }
-function clearDelegatedEvents(document = window.document) {
-  if (document[$$EVENTS]) {
-    for (let name of document[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
-    delete document[$$EVENTS];
+function registerDelegatedRoot(root) {
+  const state = registerDelegatedContainer(root, root);
+  if (state) state.roots = (state.roots || 0) + 1;
+}
+function unregisterDelegatedRoot(root) {
+  const state = delegatedContainers.get(root);
+  if (state) state.roots > 1 ? state.roots-- : delete state.roots;
+  unregisterDelegatedContainer(root, root);
+}
+function registerDelegatedContainer(container, owner = container) {
+  if (!container || !owner) return;
+  let state = delegatedContainers.get(container);
+  if (!state) delegatedContainers.set(container, state = {
+    owners: new Map(),
+    handlers: new Map()
+  });
+  state.owners.set(owner, (state.owners.get(owner) || 0) + 1);
+  delegatedEvents.forEach(name => attachDelegatedEvent(name, container, state));
+  return state;
+}
+function unregisterDelegatedContainer(container, owner = container) {
+  const state = delegatedContainers.get(container);
+  if (!state) return;
+  const count = state.owners.get(owner);
+  if (count > 1) state.owners.set(owner, count - 1);else state.owners.delete(owner);
+  if (state.owners.size) return;
+  state.handlers.forEach((handler, name) => container.removeEventListener(name, handler));
+  delegatedContainers.delete(container);
+}
+function attachDelegatedEvent(name, container, state) {
+  if (state.handlers.has(name)) return;
+  const handler = e => eventHandler(e, container, state);
+  state.handlers.set(name, handler);
+  container.addEventListener(name, handler);
+}
+function getDelegatedRoot(node) {
+  while (node) {
+    if (delegatedContainers.get(node)?.roots) return node;
+    node = node._$host || node.parentNode || node.host;
+  }
+}
+function findOwner(target, state) {
+  let node = target;
+  let distance = 0;
+  while (node) {
+    if (state.owners.has(node)) return {
+      owner: node,
+      distance
+    };
+    distance++;
+    node = node._$host || node.parentNode || node.host;
   }
 }
 function setProperty(node, name, value) {
@@ -213,7 +316,7 @@ function className(node, value, prev) {
     node.classList.add(key);
   }
 }
-function addEventListener(node, name, handler, delegate) {
+function addEvent(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
       node[`$$${name}`] = handler[0];
@@ -279,11 +382,10 @@ function ref(fn, element) {
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial, options) {
-  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -298,7 +400,7 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    childRoot.insertBefore(placeholder, marker);
+    parent.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
   let current = initial;
@@ -353,7 +455,7 @@ function loadModuleAssets(mapping) {
   return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -389,7 +491,7 @@ function hydrate$1(code, element, options = {}) {
       let disposer;
       p.then(() => {
         try {
-          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+          disposer = render$1(code, element, [...element.childNodes], options);
         } finally {
           solidJs.sharedConfig.hydrating = false;
         }
@@ -401,7 +503,7 @@ function hydrate$1(code, element, options = {}) {
   }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...getChildRoot(element).childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -444,7 +546,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = getChildRoot(node).firstChild;
+  const child = node.firstChild;
   return child;
 }
 function getNextSibling(node, expectedTag) {
@@ -464,7 +566,17 @@ function runHydrationEvents() {
         const [el, e] = events[0];
         if (!completed.has(el)) return;
         events.shift();
-        eventHandler(e);
+        let match;
+        for (const [container, state] of delegatedContainers) {
+          if (!state.handlers.has(e.type)) continue;
+          const entry = findOwner(e.target, state);
+          if (entry && (!match || entry.distance < match.distance)) match = {
+            container,
+            state,
+            distance: entry.distance
+          };
+        }
+        if (match) eventHandler(e, match.container, match.state);
       }
       if (solidJs.sharedConfig.done) {
         solidJs.sharedConfig.events = _$HY.events = null;
@@ -477,9 +589,6 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
 }
-function getChildRoot(node) {
-  return node && node.localName === "template" ? node.content : node;
-}
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
@@ -514,11 +623,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
     return value;
   }
   const hasNamespace = prop.indexOf(":") > -1;
-  if (hasNamespace && prop.slice(0, 3) === "on:") {
-    const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
-    value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (!hasNamespace && prop.slice(0, 2) === "on") {
+  if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -526,7 +631,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
       node.removeEventListener(name, h);
     }
     if (delegate || value) {
-      addEventListener(node, name, value, delegate);
+      addEvent(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
   } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
@@ -538,14 +643,18 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
   }
   return value;
 }
-function eventHandler(e) {
+function eventHandler(e, container, state) {
   if (solidJs.sharedConfig.registry && solidJs.sharedConfig.events) {
     if (solidJs.sharedConfig.events.find(([el, ev]) => ev === e)) return;
   }
+  if (e[$$EVENT_OWNER]) return;
+  const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
+  if (state && !owner) return;
+  e[$$EVENT_OWNER] = owner || true;
   let node = e.target;
   const key = `$$${e.type}`;
   const oriTarget = e.target;
-  const oriCurrentTarget = e.currentTarget;
+  const boundary = owner || container || e.currentTarget;
   const retarget = value => Object.defineProperty(e, "target", {
     configurable: true,
     value
@@ -561,29 +670,34 @@ function eventHandler(e) {
     return true;
   };
   const walkUpTree = () => {
-    while (handleNode() && (node = node._$host || node.parentNode || node.host));
+    while (handleNode()) {
+      if (node === boundary || node.parentNode === boundary) break;
+      node = node._$host || node.parentNode || node.host;
+    }
   };
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node || document;
+      return node || boundary || document;
     }
   });
   if (e.composedPath) {
     const path = e.composedPath();
-    retarget(path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        walkUpTree();
-        break;
-      }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
+    if (path.length) {
+      retarget(path[0]);
+      for (let i = 0; i < path.length; i++) {
+        node = path[i];
+        if (!handleNode()) break;
+        if (node._$host) {
+          node = node._$host;
+          walkUpTree();
+          break;
+        }
+        if (node === boundary || node.parentNode === boundary) {
+          break;
+        }
       }
-    }
+    } else walkUpTree();
   }
   else walkUpTree();
   retarget(oriTarget);
@@ -591,22 +705,26 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
-  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      childRoot.firstChild.data = value;
-    } else childRoot.textContent = value;
+      parent.firstChild.data = value;
+    } else parent.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !childRoot.firstChild) {
-      childRoot.appendChild(value);
-    } else childRoot.replaceChild(value, childRoot.firstChild);
+    } else if (current && current.nodeType) {
+      current.parentNode === parent ? parent.replaceChild(value, current) : parent.appendChild(value);
+    } else if (current && parent.firstChild) {
+      parent.replaceChild(value, parent.firstChild);
+    } else {
+      parent.appendChild(value);
+    }
+    if (marker) value[$$SLOT] = marker;
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -614,7 +732,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(childRoot, current, value);
+      } else reconcileArrays(parent, current, value, marker);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -639,22 +757,26 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
-  parent = getChildRoot(parent);
-  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
+  for (let i = 0, len = array.length; i < len; i++) {
+    const n = array[i];
+    parent.insertBefore(n, marker);
+    if (marker) n[$$SLOT] = marker;
+  }
 }
 function cleanChildren(parent, current, marker, replacement) {
-  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;
     for (let i = current.length - 1; i >= 0; i--) {
       const el = current[i];
       if (replacement !== el) {
-        const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        const tag = el[$$SLOT];
+        const owns = el.parentNode === parent && (!tag || tag === marker);
+        if (replacement && !inserted && !i) owns ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else if (owns) el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
+  if (replacement && marker) replacement[$$SLOT] = marker;
 }
 function gatherHydratable(element, root) {
   const templates = element.querySelectorAll(`*[_hk]`);
@@ -716,8 +838,8 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = solidJs.createMemo(() => [startMarker, props.children]);
+    mount = () => createElementProxy(props.mount || document.body, treeMarker),
+    content = solidJs.createMemo(() => [startMarker, props.children]);
   solidJs.createRenderEffect(() => [mount(), content()], ([m, c]) => {
     m.appendChild(endMarker);
     insert(m, c, endMarker);
@@ -730,6 +852,12 @@ function Portal(props) {
       }
     };
   });
+  solidJs.createEffect(mount, m => {
+    const ownerRoot = getDelegatedRoot(treeMarker);
+    if (!ownerRoot || ownerRoot.contains(m)) return;
+    registerDelegatedContainer(m, ownerRoot);
+    return () => unregisterDelegatedContainer(m, ownerRoot);
+  });
   return treeMarker;
 }
 function dynamic(source) {
@@ -843,11 +971,10 @@ exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.VoidElements = VoidElements;
-exports.addEventListener = addEventListener;
+exports.addEvent = addEvent;
 exports.applyRef = applyRef;
 exports.assign = assign;
 exports.className = className;
-exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamic = dynamic;
 exports.dynamicProperty = dynamicProperty;
@@ -855,6 +982,7 @@ exports.effect = effect;
 exports.escape = escape;
 exports.generateHydrationScript = voidFn;
 exports.getAssets = voidFn;
+exports.getDelegatedRoot = getDelegatedRoot;
 exports.getFirstChild = getFirstChild;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
@@ -869,6 +997,8 @@ exports.isServer = isServer;
 exports.memo = memo;
 exports.mergeProps = mergeProps;
 exports.ref = ref;
+exports.registerDelegatedContainer = registerDelegatedContainer;
+exports.registerDelegatedRoot = registerDelegatedRoot;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
@@ -888,4 +1018,6 @@ exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;
+exports.unregisterDelegatedContainer = unregisterDelegatedContainer;
+exports.unregisterDelegatedRoot = unregisterDelegatedRoot;
 exports.useAssets = voidFn;