@spearwolf/shadow-objects 0.33.0 → 0.35.0

package/src/elements/ShaeEntElement.js

@@ -1,11 +1,37 @@
 import { on } from "@spearwolf/eventize";
-import { beQuiet, createEffect, createSignal } from "@spearwolf/signalize";
+import { beQuiet, createEffect, createSignal, Effect, hibernate } from "@spearwolf/signalize";
 import { VoidToken } from "../constants.js";
+import { readBooleanAttribute } from "../utils/attr-utils.js";
+import { ConsoleLogger } from "../utils/ConsoleLogger.js";
+import { MicrotaskGate } from "../utils/MicrotaskGate.js";
 import { ComponentContext } from "../view/ComponentContext.js";
-import { ShadowEnv } from "../view/ShadowEnv.js";
 import { ViewComponent } from "../view/ViewComponent.js";
-import { ATTR_FORWARD_CUSTOM_EVENTS, ATTR_TOKEN, RequestEntParentEventName, ReRequestEntParentEventName } from "./constants.js";
+import {
+  ATTR_AUTO_DESTRUCT,
+  ATTR_FORWARD_CUSTOM_EVENTS,
+  ATTR_TOKEN,
+  RequestEntParentEventName,
+  ReRequestEntHostEventName,
+  ReRequestEntParentEventName
+} from "./constants.js";
+import { forwardCustomEventsFrom, isEmptyFilter, isSameFilter } from "./forwardCustomEvents.js";
+import { HostedSlots } from "./hostedSlots.js";
+import { stopWatchingForRemovalFrom, watchForRemovalFrom } from "./parentRemoval.js";
+import { requestEntAncestor } from "./requestEntAncestor.js";
 import { ShaeElement } from "./ShaeElement.js";
+const flattenedParentOf = (node) => node.assignedSlot ?? node.parentNode ?? node.host ?? void 0;
+const isBelow = (node, ancestor) => {
+  for (let current = flattenedParentOf(node); current != null; current = flattenedParentOf(current)) {
+    if (current === ancestor) return true;
+  }
+  return false;
+};
+const isInClosedShadowTree = (node) => {
+  for (let root = node.getRootNode(); root?.host != null; root = root.host.getRootNode()) {
+    if (root.mode === "closed") return true;
+  }
+  return false;
+};
 class ShaeEntElement extends ShaeElement {
   constructor() {
     super();
@@ -14,8 +40,63 @@ class ShaeEntElement extends ShaeElement {
     this.viewComponent$ = createSignal();
     this.token$ = createSignal();
     this.forwardCustomEvents$ = createSignal(false);
+    this.#logger = new ConsoleLogger("ShaeEntElement");
+    /**
+     * Whether this element already sat in a live tree while its constructor ran.
+     *
+     * An element created by the parser or by `createElement` runs its constructor before it enters
+     * the tree, so everything below it connects after it and finds it on the first request. Only an
+     * element upgraded in place can have entities below it that bound to a further ancestor while it
+     * was not yet answering. Markup written into a connected node through `innerHTML` reports the
+     * same, because the fragment parser builds the element undefined and upgrades it on insertion —
+     * that keeps the guard on the safe side, it errs towards asking too often.
+     */
+    this.#wasUpgradedInPlace = this.isConnected;
+    /**
+     * Bumped whenever the subscriptions this element holds on its component have to be set up again.
+     *
+     * Ending a component takes every subscription off it, this element's among them, and the
+     * component itself stays where it is — so nothing about `viewComponent$` changes and the effects
+     * below have no reason of their own to run again. This signal is that reason.
+     */
+    this.#reSubscribe$ = createSignal(0);
+    /**
+     * The wait for the next microtask is the point, not a detail: the subscriptions come off right
+     * behind the announcement, so a listener set up inside the handler would be taken off with them.
+     * And a context tearing itself down walks its own set of instances — the element stays out of
+     * that walk and comes back once it is over. However many announcements arrive in one task, one
+     * round of setting up answers them all.
+     */
+    this.#reSubscribe = new MicrotaskGate(() => {
+      this.#reSubscribe$.set(this.#reSubscribe$.value + 1);
+    });
+    this.#applyComponentContext = (context) => {
+      const token = this.token$.value;
+      let vc = this.viewComponent$.value;
+      try {
+        if (vc) {
+          vc.context = context;
+        } else if (context) {
+          vc = new ViewComponent(token ?? VoidToken, {
+            context,
+            // read here and only here: the flag is immutable on a ViewComponent, so the moment the
+            // component is built is the only moment the attribute can still decide anything. That is
+            // also why it is not observed — a later write has nowhere to go
+            autoDestructionOnParentRemoval: readBooleanAttribute(this, ATTR_AUTO_DESTRUCT)
+          });
+          this.viewComponent$.set(vc);
+        }
+      } catch (error) {
+        this.logger.error("applying the component context of this entity failed:", { ns: this.ns, uuid: vc?.uuid }, error);
+      }
+      this.syncShadowObjects();
+    };
     this.#shadowRootHostNeedsUpdate = true;
-    this.#onSlotChange = () => {
+    /** The `<slot>`s this element answers for. */
+    this.#hostedSlots = new HostedSlots(this);
+    this.#onSlotChange = (event) => {
+      this.#askPropertiesToReRequestHost();
+      this.#hostedSlots.takeUp(event);
       const shadowRootHost = this.findShadowRootHost();
       if (shadowRootHost == null) return;
       this.dispatchEvent(
@@ -37,33 +118,121 @@ class ShaeEntElement extends ShaeElement {
       }
     };
     this.#onRequestParent = (event) => {
-      const requester = event.detail?.requester;
-      if (requester === this) return;
-      if (!requester?.isShaeEntElement) return;
-      if (requester.ns !== this.ns) return;
+      const request = event.detail;
+      if (request?.requester == null || request.requester === this) return;
+      if (typeof request.answer !== "function") return;
+      if (request.ns !== void 0 && request.ns !== this.ns) return;
       event.stopPropagation();
-      requester.#setParent(this);
+      request.answer(this);
     };
-    this.ns$.onChange((ns) => {
+    this.#updateTokenValue();
+    this.#updateForwardCustomEventsValue();
+  }
+  static {
+    this.observedAttributes = [...ShaeElement.observedAttributes, ATTR_TOKEN, ATTR_FORWARD_CUSTOM_EVENTS];
+  }
+  #logger;
+  /** The logger this element reports through: a subclass reads it and does not replace it. */
+  get logger() {
+    return this.#logger;
+  }
+  get componentContext() {
+    return this.componentContext$.value;
+  }
+  get viewComponent() {
+    return this.viewComponent$.value;
+  }
+  get uuid() {
+    return this.viewComponent?.uuid;
+  }
+  get token() {
+    return this.token$.value;
+  }
+  set token(token) {
+    this.token$.set(token);
+  }
+  #wasUpgradedInPlace;
+  /** The node this element is watched on, for as long as it hangs in one. */
+  #observedParentNode;
+  #reSubscribe$;
+  #reSubscribe;
+  /** Moves this element's entity into the context of whichever namespace it names. */
+  #namespaceBinding;
+  /** Writes the token back onto the attribute. */
+  #tokenReflection;
+  /** Writes the event filter back onto the attribute. */
+  #forwardCustomEventsReflection;
+  /** The eventize subscriptions this element holds on its component. */
+  #viewComponentListeners;
+  /** The patch that carries the component's own events out as DOM events. */
+  #forwardCustomEventsPatch;
+  /** Carries a new token through to the entity. */
+  #tokenToViewComponent;
+  /**
+   * Take up everything this element listens to.
+   *
+   * Called from {@link ShaeEntElement.restore} and from nowhere else — that is the one place where
+   * this element's subscriptions begin, at the first connect as well as after a teardown.
+   */
+  #subscribe() {
+    this.#namespaceBinding = this.ns$.onChange((ns) => {
+      const previousContext = this.componentContext;
+      const previousNs = previousContext?.ns;
+      const previousViewComponent = this.viewComponent;
+      if (previousContext != null && previousViewComponent != null) {
+        previousContext.dispatchReRequestParentChildren(previousViewComponent);
+      }
+      this.#setParent(void 0);
       this.componentContext$.set(ComponentContext.get(ns));
       if (this.isConnected) {
         this.#dispatchRequestParent();
+        this.#askPeersToReRequestParent();
+      }
+      if (previousNs != null && previousNs !== ns) {
+        this.syncShadowObjectsOf(previousNs);
       }
     });
-    this.#updateTokenValue();
-    this.token$.onChange((token) => {
+    this.#tokenReflection = this.token$.onChange((token) => this.#reflectToken(token));
+    this.#forwardCustomEventsReflection = this.forwardCustomEvents$.onChange((val) => this.#reflectForwardCustomEvents(val));
+    this.#viewComponentListeners = createEffect(() => {
+      const vc = this.viewComponent$.get();
+      this.#reSubscribe$.get();
+      if (!vc) return;
+      const unsubscribe = [
+        on(vc, ComponentContext.ReRequestParentRoots, () => this.#reRequestParentAsRoot()),
+        on(vc, ComponentContext.ReRequestParent, (data) => this.#reRequestParent(data?.newAncestor)),
+        on(vc, ComponentContext.ReRequestEntHost, () => this.#askPropertiesToReRequestHost()),
+        // this one hangs on the same component as the three above and comes off with them, which
+        // is exactly why it belongs in the same effect: it is what puts all four back
+        on(vc, ViewComponent.Destroyed, () => this.#reSubscribe.schedule())
+      ];
+      return () => {
+        for (const un of unsubscribe) un();
+      };
+    });
+    this.#forwardCustomEventsPatch = createEffect(() => {
+      const vc = this.viewComponent$.get();
+      this.#reSubscribe$.get();
+      if (!vc) return;
+      return forwardCustomEventsFrom(vc, this, this.forwardCustomEvents$.get());
+    });
+    this.#tokenToViewComponent = this.token$.onChange((token) => this.#writeTokenToViewComponent(token));
+  }
+  #reflectToken(token) {
+    this.reflectAttribute(ATTR_TOKEN, () => {
       if (token == null) {
         this.removeAttribute(ATTR_TOKEN);
       } else if (this.getAttribute(ATTR_TOKEN) !== token) {
         this.setAttribute(ATTR_TOKEN, token);
       }
     });
-    this.#updateForwardCustomEventsValue();
-    this.forwardCustomEvents$.onChange((val) => {
-      if (!val) {
+  }
+  #reflectForwardCustomEvents(val) {
+    this.reflectAttribute(ATTR_FORWARD_CUSTOM_EVENTS, () => {
+      if (!val || isEmptyFilter(val)) {
         this.removeAttribute(ATTR_FORWARD_CUSTOM_EVENTS);
       } else if (val === true) {
-        if (!this.hasAttribute(ATTR_FORWARD_CUSTOM_EVENTS)) {
+        if (this.getAttribute(ATTR_FORWARD_CUSTOM_EVENTS) !== "") {
           this.setAttribute(ATTR_FORWARD_CUSTOM_EVENTS, "");
         }
       } else {
@@ -73,94 +242,42 @@ class ShaeEntElement extends ShaeElement {
         }
       }
     });
-    createEffect(() => {
-      const vc = this.viewComponent$.get();
-      if (vc) {
-        const unsubcribe = on(vc, ComponentContext.ReRequestParentRoots, () => this.#reReuestParentRoot());
-        const oldNs = vc.context?.ns;
-        return () => {
-          unsubcribe();
-          vc.destroy();
-          if (oldNs && oldNs !== this.ns) {
-            ShadowEnv.get(oldNs)?.sync();
-          } else {
-            this.syncShadowObjects();
-          }
-        };
-      }
-    });
-    createEffect(() => {
-      const vc = this.viewComponent$.get();
-      if (!vc) return;
-      const originalDispatchEvent = Object.hasOwn(vc, "dispatchEvent") ? Object.getPrototypeOf(vc).dispatchEvent : vc.dispatchEvent;
-      const filter = this.forwardCustomEvents$.get();
-      if (!filter) return;
-      const allowedTypes = filter instanceof Set ? filter : void 0;
-      const newDispatch = (type, data, traverseChildren) => {
-        originalDispatchEvent.call(vc, type, data, traverseChildren);
-        if (type === ComponentContext.ReRequestParentRoots) return;
-        if (allowedTypes && !allowedTypes.has(type)) return;
-        this.dispatchEvent(
-          new CustomEvent(type, {
-            bubbles: true,
-            composed: true,
-            detail: data
-          })
-        );
-      };
-      Object.defineProperty(vc, "dispatchEvent", {
-        value: newDispatch,
-        writable: true,
-        configurable: true
-      });
-      return () => {
-        if (Object.hasOwn(vc, "dispatchEvent") && vc.dispatchEvent === newDispatch) {
-          delete vc.dispatchEvent;
-        }
-      };
-    });
-    this.token$.onChange((token) => {
-      const vc = this.viewComponent$.value;
-      if (vc) {
-        vc.token = token;
-        this.syncShadowObjects();
-      }
-    });
-    this.style.display = "contents";
   }
-  static {
-    this.observedAttributes = [...ShaeElement.observedAttributes, ATTR_TOKEN, ATTR_FORWARD_CUSTOM_EVENTS];
-  }
-  get componentContext() {
-    return this.componentContext$.value;
-  }
-  get viewComponent() {
-    return this.viewComponent$.value;
-  }
-  get uuid() {
-    return this.viewComponent?.uuid;
-  }
-  get token() {
-    return this.token$.value;
+  #writeTokenToViewComponent(token) {
+    const vc = this.viewComponent$.value;
+    if (vc == null || vc.token === token) return;
+    vc.token = token;
+    this.syncShadowObjects();
   }
-  set token(token) {
-    this.token$.set(token);
+  /**
+   * Take the subscriptions up and settle what drifted while none of them were listening.
+   *
+   * Runs on the first connect, where this element has never listened to anything, and again for one
+   * that comes back after a teardown.
+   *
+   * The three catch-up calls are not decoration. A released element still takes writes, so `token`,
+   * `ns` and `forward-custom-events` can each stand on a value its attribute never heard about —
+   * and `connectedCallback` reads exactly those attributes back into exactly those signals a few
+   * lines further on. Without the catch-up that read would overwrite the newer value with the older
+   * one, and the entity would go on carrying a token nobody wrote.
+   *
+   * `super.restore()` runs first and takes `ns` with it. That it writes the `ns` attribute before
+   * this class has re-subscribed to `ns$` costs nothing: the write puts the value the signal
+   * already holds onto the attribute, so the read it triggers changes no signal and reaches no
+   * handler.
+   */
+  restore() {
+    super.restore();
+    this.#subscribe();
+    this.#reflectToken(this.token$.value);
+    this.#reflectForwardCustomEvents(this.forwardCustomEvents$.value);
+    this.#writeTokenToViewComponent(this.token$.value);
   }
-  #parentObserver;
   #unsubscribeViewComponentEffect;
+  #applyComponentContext;
   #setupViewComponentEffect() {
     this.#unsubscribeViewComponentEffect?.();
-    const unsubscribeComponentContext = this.componentContext$.onChange((context) => {
-      const token = this.token$.value;
-      let vc = this.viewComponent$.value;
-      if (vc) {
-        vc.context = context;
-      } else if (context) {
-        vc = new ViewComponent(token ?? VoidToken, { context });
-        this.viewComponent$.set(vc);
-      }
-      this.syncShadowObjects();
-    });
+    const unsubscribeComponentContext = this.componentContext$.onChange(this.#applyComponentContext);
     this.#unsubscribeViewComponentEffect = () => {
       unsubscribeComponentContext();
     };
@@ -169,70 +286,89 @@ class ShaeEntElement extends ShaeElement {
     this.#unsubscribeViewComponentEffect?.();
     this.#unsubscribeViewComponentEffect = void 0;
   }
+  // `getRootNode()` answers for every state of the tree — the shadow root for a node inside
+  // one, and the topmost node of its own chain for a node outside every tree. This reads `.host`
+  // off the result without checking for a `ShadowRoot` first: only a shadow root has one, so a
+  // node outside every tree reads no host, the same answer a check would have given
+  #readShadowRootHost() {
+    return this.getRootNode()?.host;
+  }
   #shadowRootHost;
   #shadowRootHostNeedsUpdate;
   findShadowRootHost() {
     if (this.#shadowRootHostNeedsUpdate) {
       this.#shadowRootHostNeedsUpdate = false;
-      let current = this;
-      while (current) {
-        if (current.parentElement == null) {
-          const root = current.parentNode;
-          if (root) {
-            this.#shadowRootHost = root.host;
-          }
-          break;
-        }
-        current = current.parentElement;
-      }
+      this.#shadowRootHost = this.#readShadowRootHost();
     }
     return this.#shadowRootHost;
   }
   getParentNodeForObserver() {
-    return this.parentNode ?? this.getRootNode()?.host ?? void 0;
+    return this.parentNode ?? this.#readShadowRootHost() ?? void 0;
   }
   connectedCallback() {
-    this.#shadowRootHostNeedsUpdate = true;
-    this.addEventListener("slotchange", this.#onSlotChange, { capture: false, passive: false });
-    this.addEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false, passive: false });
-    this.#setupViewComponentEffect();
-    beQuiet(() => this.#updateTokenValue());
-    beQuiet(() => this.#updateForwardCustomEventsValue());
-    if (this.componentContext == null) {
-      this.componentContext$.set(ComponentContext.get(this.ns));
-    }
-    this.#dispatchRequestParent();
-    this.componentContext?.dispatchReRequestParentRoots();
-    this.#createParentObserver();
-    this.syncShadowObjects();
+    hibernate(() => {
+      super.connectedCallback();
+      this.#shadowRootHostNeedsUpdate = true;
+      this.addEventListener("slotchange", this.#onSlotChange, { capture: false, passive: false });
+      this.addEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false, passive: false });
+      this.#setupViewComponentEffect();
+      beQuiet(() => this.#updateTokenValue());
+      const forwardCustomEvents = this.#readForwardCustomEventsAttribute();
+      if (!isSameFilter(forwardCustomEvents, this.forwardCustomEvents$.value)) {
+        this.forwardCustomEvents$.set(forwardCustomEvents);
+      }
+      if (this.componentContext == null) {
+        this.componentContext$.set(ComponentContext.get(this.ns));
+      } else {
+        this.#applyComponentContext(this.componentContext);
+      }
+      this.#dispatchRequestParent();
+      if (this.#wasUpgradedInPlace) {
+        this.#askPeersToReRequestParent();
+        this.#askPropertiesToReRequestHost();
+      }
+      this.#hostedSlots.collect();
+      this.#observeParentNode();
+      this.syncShadowObjects();
+    });
   }
-  #createParentObserver() {
-    this.#destroyParentObserver();
+  #observeParentNode() {
+    this.#unobserveParentNode();
     const parent = this.getParentNodeForObserver();
     if (parent) {
-      this.#parentObserver = new MutationObserver((mutations, _observer) => {
-        for (const { target, removedNodes } of mutations) {
-          if (target === parent) {
-            for (const node of removedNodes) {
-              if (node === this) {
-                this.#destroyParentObserver();
-                this.onParentChanged(this.getParentNodeForObserver(), parent);
-                break;
-              }
-            }
-          }
+      watchForRemovalFrom(parent, this, () => {
+        this.#observedParentNode = void 0;
+        const newParent = this.getParentNodeForObserver();
+        if (newParent === parent) {
+          this.#observeParentNode();
+          return;
         }
+        this.onParentChanged(newParent, parent);
       });
-      this.#parentObserver.observe(parent, { childList: true, subtree: false, attributes: false });
+      const parentAfterRegistration = this.getParentNodeForObserver();
+      if (parentAfterRegistration === parent) {
+        this.#observedParentNode = parent;
+      } else {
+        stopWatchingForRemovalFrom(parent, this);
+        if (this.#observedParentNode == null && this.isConnected) {
+          try {
+            this.onParentChanged(parentAfterRegistration, parent);
+          } catch (error) {
+            console.error("a removal watcher failed:", error);
+          }
+        }
+      }
     }
   }
+  #unobserveParentNode() {
+    if (this.#observedParentNode == null) return;
+    stopWatchingForRemovalFrom(this.#observedParentNode, this);
+    this.#observedParentNode = void 0;
+  }
   onParentChanged(_newParent, _oldParent) {
     this.#setParent(void 0);
     this.#dispatchRequestParent();
-  }
-  #destroyParentObserver() {
-    this.#parentObserver?.disconnect();
-    this.#parentObserver = void 0;
+    this.#observeParentNode();
   }
   attributeChangedCallback(name) {
     super.attributeChangedCallback(name);
@@ -244,28 +380,118 @@ class ShaeEntElement extends ShaeElement {
   }
   disconnectedCallback() {
     this.#shadowRootHostNeedsUpdate = true;
-    this.#destroyParentObserver();
-    this.removeEventListener("slotchange", this.#onSlotChange, { capture: false });
-    this.removeEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false });
+    this.#unobserveParentNode();
+    this.#hostedSlots.releaseAll();
+    this.#stopAnswering();
+    this.#askPropertiesToReRequestHost();
     this.#setParent(void 0);
+    const vc = this.viewComponent;
+    if (vc != null) {
+      this.componentContext?.dispatchReRequestParentChildren(vc);
+    }
     this.componentContext$.set(void 0);
     this.syncShadowObjects();
     this.#destroyViewComponentEffect();
+    super.disconnectedCallback();
+  }
+  /**
+   * Let go of everything this element listens to, and leave what it is made of standing.
+   *
+   * The signals are not destroyed — they are what carries this element's state across a teardown,
+   * and {@link ShaeEntElement.restore} subscribes to them again on the way back in.
+   *
+   * The `ViewComponent` stays too. `disconnectedCallback` has already taken it out of its
+   * `ComponentContext`, which is what unbinds it from this element's position; ending it on top of
+   * that would write a destroy entry into the change trail and take the entity down in the worker
+   * — a decision about the entity, not about this element. It is also what lets an element that
+   * comes back carry the same entity and the same uuid it left with.
+   *
+   * Both effects run their cleanup on `destroy()`, which is what this depends on: the one on the
+   * `dispatchEvent` patch has to, or the patched function would go on holding the component and
+   * everything reachable from it.
+   */
+  teardown() {
+    this.#namespaceBinding?.();
+    this.#namespaceBinding = void 0;
+    this.#tokenReflection?.();
+    this.#tokenReflection = void 0;
+    this.#forwardCustomEventsReflection?.();
+    this.#forwardCustomEventsReflection = void 0;
+    this.#viewComponentListeners?.destroy();
+    this.#viewComponentListeners = void 0;
+    this.#forwardCustomEventsPatch?.destroy();
+    this.#forwardCustomEventsPatch = void 0;
+    this.#tokenToViewComponent?.();
+    this.#tokenToViewComponent = void 0;
+    this.#destroyViewComponentEffect();
+    this.#unobserveParentNode();
+    this.#hostedSlots.releaseAll();
+    this.#setParent(void 0);
+    if (this.isConnected) {
+      this.#stopAnswering();
+      this.#askPropertiesToReRequestHost();
+      const vc = this.viewComponent;
+      if (vc != null) {
+        this.componentContext?.dispatchReRequestParentChildren(vc);
+      }
+    }
+    super.teardown();
+  }
+  /** Stop answering the parent and host requests that travel past this element. */
+  #stopAnswering() {
+    this.removeEventListener("slotchange", this.#onSlotChange, { capture: false });
+    this.removeEventListener(RequestEntParentEventName, this.#onRequestParent, { capture: false });
   }
-  #reReuestParentRoot() {
+  #reRequestParentAsRoot() {
     if (this.isConnected) {
       this.#setParent(void 0);
       this.#dispatchRequestParent();
     }
   }
+  // nothing is cleared here: an element already bound to its closest ancestor gets the same answer
+  // back and #setParent turns around without touching anything, so the round leaves every
+  // correctly bound sibling standing in its parent's children. Only an element that gets no answer
+  // at all loses its binding, and that one sits below nothing any more
+  #reRequestParent(newAncestor) {
+    if (!this.isConnected) return;
+    if (newAncestor?.isConnected && !isBelow(this, newAncestor)) return;
+    this.#dispatchRequestParent();
+  }
+  // An element that becomes an entity while the tree around it already stands can be the new
+  // closest ancestor for entities that bound while it was not yet answering. Those entities are
+  // its peers in the component context — the children of its own parent, or the roots while it
+  // has none — and they are asked to request their parent once more.
+  //
+  // The context collects the request and runs one round a microtask later, for everything that
+  // arrives in the same task. Which peers that round reaches is decided when it runs, from this
+  // element's parent as it stands then — an element with no entity of its own is in no tree and
+  // is nobody's ancestor, so there is nothing to ask for.
+  //
+  // Both ways of having no entity end here, and neither costs a peer its parent. This element
+  // reaches the early return only when the join into the context threw before a component was
+  // ever built; the reachable half of that case is a component that was built and refused, which
+  // the round drops on its own because a refused component is no member of the context. What such
+  // an element could have handed a peer is an `entParentNode` pointing at an element that stands
+  // in no entity tree — the peer's `viewComponent.parent` would stay empty and the peer would
+  // stay a root either way. The next namespace change books the round again.
+  #askPeersToReRequestParent() {
+    const vc = this.viewComponent;
+    if (vc == null) return;
+    const newAncestor = isInClosedShadowTree(this) ? void 0 : this;
+    this.componentContext?.collectPeerReRequest(vc, { newAncestor });
+  }
+  // Properties below this element bind to the closest entity above them. This element becoming
+  // one — or ceasing to be one — changes that answer, and no component context can carry the
+  // message: a <shae-prop> has no view component to receive it. The event travels the same
+  // ascent every request travels, so it passes exactly the entities a property could be bound
+  // to right now, and nothing else.
+  #askPropertiesToReRequestHost() {
+    this.dispatchEvent(new CustomEvent(ReRequestEntHostEventName, { bubbles: true, composed: true, detail: { requester: this } }));
+  }
   #dispatchRequestParent() {
-    this.dispatchEvent(
-      new CustomEvent(RequestEntParentEventName, {
-        bubbles: true,
-        composed: true,
-        detail: { requester: this }
-      })
-    );
+    let entParent;
+    requestEntAncestor(this, { ns: this.ns, answer: (entNode) => entParent = entNode });
+    this.#setParent(entParent);
   }
   #unsubscribeFromParent;
   #setParent(parent) {
@@ -287,7 +513,8 @@ class ShaeEntElement extends ShaeElement {
         const vc = this.viewComponent$.get();
         if (vc) {
           const parentVC = parent.viewComponent$.get();
-          vc.parent = parentVC && parentVC.context === vc.context ? parentVC : void 0;
+          const ctx = vc.context;
+          vc.parent = ctx != null && parentVC?.context === ctx ? parentVC : void 0;
           if (vc.parent == null) {
             queueMicrotask(() => {
               this.#dispatchRequestParent();
@@ -305,6 +532,7 @@ class ShaeEntElement extends ShaeElement {
       }
     }
   }
+  #hostedSlots;
   #onSlotChange;
   #onReRequestParent;
   #onRequestParent;
@@ -312,23 +540,25 @@ class ShaeEntElement extends ShaeElement {
     if (this.hasAttribute(ATTR_TOKEN)) {
       const token = this.getAttribute(ATTR_TOKEN)?.trim() || void 0;
       this.token$.set(token);
+    } else {
+      this.token$.set(void 0);
     }
   }
+  /** The filter the `forward-custom-events` attribute currently spells out. */
+  #readForwardCustomEventsAttribute() {
+    if (!this.hasAttribute(ATTR_FORWARD_CUSTOM_EVENTS)) return false;
+    const val = this.getAttribute(ATTR_FORWARD_CUSTOM_EVENTS);
+    if (!val || val.trim().length === 0) return true;
+    const types = new Set(
+      val.split(",").map((s) => s.trim()).filter((s) => s.length > 0)
+    );
+    return types.size > 0 ? types : false;
+  }
+  // the write is unconditional on purpose: a list read from the attribute is a fresh Set every
+  // time, and it is that change of identity which drives the normalization of the attribute back
+  // to its canonical spelling
   #updateForwardCustomEventsValue() {
-    if (this.hasAttribute(ATTR_FORWARD_CUSTOM_EVENTS)) {
-      const val = this.getAttribute(ATTR_FORWARD_CUSTOM_EVENTS);
-      if (!val || val.trim().length === 0) {
-        this.forwardCustomEvents$.set(true);
-      } else {
-        this.forwardCustomEvents$.set(
-          new Set(
-            val.split(",").map((s) => s.trim()).filter((s) => s.length > 0)
-          )
-        );
-      }
-    } else {
-      this.forwardCustomEvents$.set(false);
-    }
+    this.forwardCustomEvents$.set(this.#readForwardCustomEventsAttribute());
   }
 }
 export {