@vue/runtime-dom 3.5.0-alpha.5 → 3.5.0-beta.1

package/dist/runtime-dom.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.0-alpha.5
+* @vue/runtime-dom v3.5.0-beta.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -64,9 +64,11 @@ var VueRuntimeDOM = (function (exports) {
     };
   };
   const camelizeRE = /-(\w)/g;
-  const camelize = cacheStringFunction((str) => {
-    return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
-  });
+  const camelize = cacheStringFunction(
+    (str) => {
+      return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+    }
+  );
   const hyphenateRE = /\B([A-Z])/g;
   const hyphenate = cacheStringFunction(
     (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
@@ -74,10 +76,12 @@ var VueRuntimeDOM = (function (exports) {
   const capitalize = cacheStringFunction((str) => {
     return str.charAt(0).toUpperCase() + str.slice(1);
   });
-  const toHandlerKey = cacheStringFunction((str) => {
-    const s = str ? `on${capitalize(str)}` : ``;
-    return s;
-  });
+  const toHandlerKey = cacheStringFunction(
+    (str) => {
+      const s = str ? `on${capitalize(str)}` : ``;
+      return s;
+    }
+  );
   const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
   const invokeArrayFns = (fns, ...arg) => {
     for (let i = 0; i < fns.length; i++) {
@@ -322,6 +326,7 @@ var VueRuntimeDOM = (function (exports) {
        * @internal
        */
       this.cleanups = [];
+      this._isPaused = false;
       this.parent = activeEffectScope;
       if (!detached && activeEffectScope) {
         this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -332,6 +337,37 @@ var VueRuntimeDOM = (function (exports) {
     get active() {
       return this._active;
     }
+    pause() {
+      if (this._active) {
+        this._isPaused = true;
+        if (this.scopes) {
+          for (let i = 0, l = this.scopes.length; i < l; i++) {
+            this.scopes[i].pause();
+          }
+        }
+        for (let i = 0, l = this.effects.length; i < l; i++) {
+          this.effects[i].pause();
+        }
+      }
+    }
+    /**
+     * Resumes the effect scope, including all child scopes and effects.
+     */
+    resume() {
+      if (this._active) {
+        if (this._isPaused) {
+          this._isPaused = false;
+          if (this.scopes) {
+            for (let i = 0, l = this.scopes.length; i < l; i++) {
+              this.scopes[i].resume();
+            }
+          }
+          for (let i = 0, l = this.effects.length; i < l; i++) {
+            this.effects[i].resume();
+          }
+        }
+      }
+    }
     run(fn) {
       if (this._active) {
         const currentEffectScope = activeEffectScope;
@@ -402,6 +438,7 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   let activeSub;
+  const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
   class ReactiveEffect {
     constructor(fn) {
       this.fn = fn;
@@ -430,6 +467,18 @@ var VueRuntimeDOM = (function (exports) {
         activeEffectScope.effects.push(this);
       }
     }
+    pause() {
+      this.flags |= 128;
+    }
+    resume() {
+      if (this.flags & 128) {
+        this.flags &= ~128;
+        if (pausedQueueEffects.has(this)) {
+          pausedQueueEffects.delete(this);
+          this.trigger();
+        }
+      }
+    }
     /**
      * @internal
      */
@@ -483,7 +532,9 @@ var VueRuntimeDOM = (function (exports) {
       }
     }
     trigger() {
-      if (this.scheduler) {
+      if (this.flags & 128) {
+        pausedQueueEffects.add(this);
+      } else if (this.scheduler) {
         this.scheduler();
       } else {
         this.runIfDirty();
@@ -803,9 +854,15 @@ var VueRuntimeDOM = (function (exports) {
     link.dep.subs = link;
   }
   const targetMap = /* @__PURE__ */ new WeakMap();
-  const ITERATE_KEY = Symbol("Object iterate" );
-  const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate" );
-  const ARRAY_ITERATE_KEY = Symbol("Array iterate" );
+  const ITERATE_KEY = Symbol(
+    "Object iterate" 
+  );
+  const MAP_KEY_ITERATE_KEY = Symbol(
+    "Map keys iterate" 
+  );
+  const ARRAY_ITERATE_KEY = Symbol(
+    "Array iterate" 
+  );
   function track(target, type, key) {
     if (shouldTrack && activeSub) {
       let depsMap = targetMap.get(target);
@@ -1095,7 +1152,7 @@ var VueRuntimeDOM = (function (exports) {
         return isShallow2;
       } else if (key === "__v_raw") {
         if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
-        // this means the reciever is a user proxy of the reactive proxy
+        // this means the receiver is a user proxy of the reactive proxy
         Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
           return target;
         }
@@ -1219,9 +1276,7 @@ var VueRuntimeDOM = (function (exports) {
   }
   const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
   const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
-  const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
-    true
-  );
+  const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
   const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
 
   const toShallow = (value) => value;
@@ -1716,13 +1771,14 @@ var VueRuntimeDOM = (function (exports) {
   class CustomRefImpl {
     constructor(factory) {
       this["__v_isRef"] = true;
+      this._value = void 0;
       const dep = this.dep = new Dep();
       const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
       this._get = get;
       this._set = set;
     }
     get value() {
-      return this._get();
+      return this._value = this._get();
     }
     set value(newVal) {
       this._set(newVal);
@@ -1747,10 +1803,11 @@ var VueRuntimeDOM = (function (exports) {
       this._key = _key;
       this._defaultValue = _defaultValue;
       this["__v_isRef"] = true;
+      this._value = void 0;
     }
     get value() {
       const val = this._object[this._key];
-      return val === void 0 ? this._defaultValue : val;
+      return this._value = val === void 0 ? this._defaultValue : val;
     }
     set value(newVal) {
       this._object[this._key] = newVal;
@@ -1764,9 +1821,10 @@ var VueRuntimeDOM = (function (exports) {
       this._getter = _getter;
       this["__v_isRef"] = true;
       this["__v_isReadonly"] = true;
+      this._value = void 0;
     }
     get value() {
-      return this._getter();
+      return this._value = this._getter();
     }
   }
   function toRef(source, key, defaultValue) {
@@ -1800,7 +1858,8 @@ var VueRuntimeDOM = (function (exports) {
       /**
        * @internal
        */
-      this["__v_isRef"] = true;
+      this.__v_isRef = true;
+      // TODO isolatedDeclarations "__v_isReadonly"
       // A computed is also a subscriber that tracks other deps
       /**
        * @internal
@@ -2425,6 +2484,9 @@ var VueRuntimeDOM = (function (exports) {
           "[HMR] Root or manually mounted instance modified. Full reload required."
         );
       }
+      if (instance.root.ce && instance !== instance.root) {
+        instance.root.ce._removeChildStyle(oldComp);
+      }
     }
     queuePostFlushCb(() => {
       hmrDirtyComponents.clear();
@@ -2504,9 +2566,7 @@ var VueRuntimeDOM = (function (exports) {
   function devtoolsUnmountApp(app) {
     emit$1("app:unmount" /* APP_UNMOUNT */, app);
   }
-  const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
-    "component:added" /* COMPONENT_ADDED */
-  );
+  const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */);
   const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
   const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
     "component:removed" /* COMPONENT_REMOVED */
@@ -2530,12 +2590,8 @@ var VueRuntimeDOM = (function (exports) {
       );
     };
   }
-  const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
-    "perf:start" /* PERFORMANCE_START */
-  );
-  const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
-    "perf:end" /* PERFORMANCE_END */
-  );
+  const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */);
+  const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */);
   function createDevtoolsPerformanceHook(hook) {
     return (component, type, time) => {
       emit$1(hook, component.appContext.app, component.uid, component, type, time);
@@ -3713,6 +3769,7 @@ Server rendered element contains more child nodes than client vdom.`
         }
         if (props) {
           {
+            const isCustomElement = el.tagName.includes("-");
             for (const key in props) {
               if (// #11189 skip if this node has directives that have created hooks
               // as it could have mutated the DOM in any possible way
@@ -3720,7 +3777,7 @@ Server rendered element contains more child nodes than client vdom.`
                 logMismatchError();
               }
               if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
-              key[0] === ".") {
+              key[0] === "." || isCustomElement) {
                 patchProp(el, key, null, props[key], void 0, parentComponent);
               }
             }
@@ -4045,24 +4102,19 @@ Server rendered element contains fewer child nodes than client vdom.`
     }
   }
 
-  const hydrateOnIdle = () => (hydrate) => {
-    const id = requestIdleCallback(hydrate);
+  const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
+    const id = requestIdleCallback(hydrate, { timeout });
     return () => cancelIdleCallback(id);
   };
-  const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
-    const ob = new IntersectionObserver(
-      (entries) => {
-        for (const e of entries) {
-          if (!e.isIntersecting) continue;
-          ob.disconnect();
-          hydrate();
-          break;
-        }
-      },
-      {
-        rootMargin: isString(margin) ? margin : margin + "px"
+  const hydrateOnVisible = (opts) => (hydrate, forEach) => {
+    const ob = new IntersectionObserver((entries) => {
+      for (const e of entries) {
+        if (!e.isIntersecting) continue;
+        ob.disconnect();
+        hydrate();
+        break;
       }
-    );
+    }, opts);
     forEach((el) => ob.observe(el));
     return () => ob.disconnect();
   };
@@ -4371,7 +4423,7 @@ Server rendered element contains fewer child nodes than client vdom.`
       }
       function pruneCacheEntry(key) {
         const cached = cache.get(key);
-        if (!current || !isSameVNodeType(cached, current)) {
+        if (cached && (!current || !isSameVNodeType(cached, current))) {
           unmount(cached);
         } else if (current) {
           resetShapeFlag(current);
@@ -4433,6 +4485,10 @@ Server rendered element contains fewer child nodes than client vdom.`
           return rawVNode;
         }
         let vnode = getInnerChild(rawVNode);
+        if (vnode.type === Comment) {
+          current = null;
+          return vnode;
+        }
         const comp = vnode.type;
         const name = getComponentName(
           isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -4562,17 +4618,19 @@ Server rendered element contains fewer child nodes than client vdom.`
   };
   const onBeforeMount = createHook("bm");
   const onMounted = createHook("m");
-  const onBeforeUpdate = createHook("bu");
+  const onBeforeUpdate = createHook(
+    "bu"
+  );
   const onUpdated = createHook("u");
-  const onBeforeUnmount = createHook("bum");
-  const onUnmounted = createHook("um");
-  const onServerPrefetch = createHook("sp");
-  const onRenderTriggered = createHook(
-    "rtg"
+  const onBeforeUnmount = createHook(
+    "bum"
   );
-  const onRenderTracked = createHook(
-    "rtc"
+  const onUnmounted = createHook("um");
+  const onServerPrefetch = createHook(
+    "sp"
   );
+  const onRenderTriggered = createHook("rtg");
+  const onRenderTracked = createHook("rtc");
   function onErrorCaptured(hook, target = currentInstance) {
     injectHook("ec", hook, target);
   }
@@ -4699,9 +4757,14 @@ If this is a native custom element, make sure to exclude it from component resol
   }
 
   function renderSlot(slots, name, props = {}, fallback, noSlotted) {
-    if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
+    if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
       if (name !== "default") props.name = name;
-      return createVNode("slot", props, fallback && fallback());
+      return openBlock(), createBlock(
+        Fragment,
+        null,
+        [createVNode("slot", props, fallback && fallback())],
+        64
+      );
     }
     let slot = slots[name];
     if (slot && slot.length > 1) {
@@ -4774,6 +4837,7 @@ If this is a native custom element, make sure to exclude it from component resol
       $refs: (i) => shallowReadonly(i.refs) ,
       $parent: (i) => getPublicInstance(i.parent),
       $root: (i) => getPublicInstance(i.root),
+      $host: (i) => i.ce,
       $emit: (i) => i.emit,
       $options: (i) => resolveMergedOptions(i) ,
       $forceUpdate: (i) => i.f || (i.f = () => {
@@ -4925,29 +4989,25 @@ If this is a native custom element, make sure to exclude it from component resol
       return Reflect.ownKeys(target);
     };
   }
-  const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
-    {},
-    PublicInstanceProxyHandlers,
-    {
-      get(target, key) {
-        if (key === Symbol.unscopables) {
-          return;
-        }
-        return PublicInstanceProxyHandlers.get(target, key, target);
-      },
-      has(_, key) {
-        const has = key[0] !== "_" && !isGloballyAllowed(key);
-        if (!has && PublicInstanceProxyHandlers.has(_, key)) {
-          warn$1(
-            `Property ${JSON.stringify(
-            key
-          )} should not start with _ which is a reserved prefix for Vue internals.`
-          );
-        }
-        return has;
+  const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend({}, PublicInstanceProxyHandlers, {
+    get(target, key) {
+      if (key === Symbol.unscopables) {
+        return;
+      }
+      return PublicInstanceProxyHandlers.get(target, key, target);
+    },
+    has(_, key) {
+      const has = key[0] !== "_" && !isGloballyAllowed(key);
+      if (!has && PublicInstanceProxyHandlers.has(_, key)) {
+        warn$1(
+          `Property ${JSON.stringify(
+          key
+        )} should not start with _ which is a reserved prefix for Vue internals.`
+        );
       }
+      return has;
     }
-  );
+  });
   function createDevRenderContext(instance) {
     const target = {};
     Object.defineProperty(target, `_`, {
@@ -5646,7 +5706,7 @@ If this is a native custom element, make sure to exclude it from component resol
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
               );
             }
-            const vnode = createVNode(rootComponent, rootProps);
+            const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
             vnode.appContext = context;
             if (namespace === true) {
               namespace = "svg";
@@ -5748,7 +5808,7 @@ If you want to remount the same app, move your app creation logic into a factory
   function inject(key, defaultValue, treatDefaultAsFactory = false) {
     const instance = currentInstance || currentRenderingInstance;
     if (instance || currentApp) {
-      const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
+      const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
       if (provides && key in provides) {
         return provides[key];
       } else if (arguments.length > 1) {
@@ -5953,6 +6013,9 @@ If you want to remount the same app, move your app creation logic into a factory
         } else {
           value = defaultValue;
         }
+        if (instance.ce) {
+          instance.ce._setProp(key, value);
+        }
       }
       if (opt[0 /* shouldCast */]) {
         if (isAbsent && !hasDefault) {
@@ -6951,8 +7014,8 @@ If you want to remount the same app, move your app creation logic into a factory
       const componentUpdateFn = () => {
         if (!instance.isMounted) {
           let vnodeHook;
-          const { el, props, type } = initialVNode;
-          const { bm, m, parent } = instance;
+          const { el, props } = initialVNode;
+          const { bm, m, parent, root, type } = instance;
           const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
           toggleRecurse(instance, false);
           if (bm) {
@@ -6995,6 +7058,9 @@ If you want to remount the same app, move your app creation logic into a factory
               hydrateSubTree();
             }
           } else {
+            if (root.ce) {
+              root.ce._injectChildStyle(type);
+            }
             {
               startMeasure(instance, `render`);
             }
@@ -7668,13 +7734,13 @@ If you want to remount the same app, move your app creation logic into a factory
           namespace
         );
       }
+      container._vnode = vnode;
       if (!isFlushing) {
         isFlushing = true;
         flushPreFlushCbs();
         flushPostFlushCbs();
         isFlushing = false;
       }
-      container._vnode = vnode;
     };
     const internals = {
       p: patch,
@@ -7842,14 +7908,9 @@ If you want to remount the same app, move your app creation logic into a factory
       const _cb = cb;
       cb = (...args) => {
         _cb(...args);
-        unwatch();
+        watchHandle();
       };
     }
-    if (deep !== void 0 && typeof deep === "number") {
-      warn$1(
-        `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
-      );
-    }
     if (!cb) {
       if (immediate !== void 0) {
         warn$1(
@@ -7875,10 +7936,12 @@ If you want to remount the same app, move your app creation logic into a factory
       );
     };
     const instance = currentInstance;
-    const reactiveGetter = (source2) => deep === true ? source2 : (
-      // for deep: false, only traverse root-level properties
-      traverse(source2, deep === false ? 1 : void 0)
-    );
+    const reactiveGetter = (source2) => {
+      if (deep) return source2;
+      if (isShallow(source2) || deep === false || deep === 0)
+        return traverse(source2, 1);
+      return traverse(source2);
+    };
     let getter;
     let forceTrigger = false;
     let isMultiSource = false;
@@ -7924,7 +7987,8 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     if (cb && deep) {
       const baseGetter = getter;
-      getter = () => traverse(baseGetter());
+      const depth = deep === true ? Infinity : deep;
+      getter = () => traverse(baseGetter(), depth);
     }
     let cleanup;
     let onCleanup = (fn) => {
@@ -7971,12 +8035,15 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     effect.scheduler = scheduler;
     const scope = getCurrentScope();
-    const unwatch = () => {
+    const watchHandle = () => {
       effect.stop();
       if (scope) {
         remove(scope.effects, effect);
       }
     };
+    watchHandle.pause = effect.pause.bind(effect);
+    watchHandle.resume = effect.resume.bind(effect);
+    watchHandle.stop = watchHandle;
     {
       effect.onTrack = onTrack;
       effect.onTrigger = onTrigger;
@@ -7995,7 +8062,7 @@ If you want to remount the same app, move your app creation logic into a factory
     } else {
       effect.run();
     }
-    return unwatch;
+    return watchHandle;
   }
   function instanceWatch(source, value, options) {
     const publicThis = this.proxy;
@@ -8085,7 +8152,8 @@ If you want to remount the same app, move your app creation logic into a factory
           return options.get ? options.get(localValue) : localValue;
         },
         set(value) {
-          if (!hasChanged(value, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
+          const emittedValue = options.set ? options.set(value) : value;
+          if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
             return;
           }
           const rawProps = i.vnode.props;
@@ -8094,7 +8162,6 @@ If you want to remount the same app, move your app creation logic into a factory
             localValue = value;
             trigger();
           }
-          const emittedValue = options.set ? options.set(value) : value;
           i.emit(`update:${name}`, emittedValue);
           if (hasChanged(value, emittedValue) && hasChanged(value, prevSetValue) && !hasChanged(emittedValue, prevEmittedValue)) {
             trigger();
@@ -8132,9 +8199,9 @@ If you want to remount the same app, move your app creation logic into a factory
       } = instance;
       if (emitsOptions) {
         if (!(event in emitsOptions) && true) {
-          if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+          if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
             warn$1(
-              `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
+              `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
             );
           }
         } else {
@@ -9944,11 +10011,16 @@ Component that was made reactive: `,
     const r = shallowRef(null);
     if (i) {
       const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
-      Object.defineProperty(refs, key, {
-        enumerable: true,
-        get: () => r.value,
-        set: (val) => r.value = val
-      });
+      let desc;
+      if ((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
+        warn$1(`useTemplateRef('${key}') already exists.`);
+      } else {
+        Object.defineProperty(refs, key, {
+          enumerable: true,
+          get: () => r.value,
+          set: (val) => r.value = val
+        });
+      }
     } else {
       warn$1(
         `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -10182,7 +10254,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.5.0-alpha.5";
+  const version = "3.5.0-beta.1";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -10192,6 +10264,18 @@ Component that was made reactive: `,
   const compatUtils = null;
   const DeprecationTypes = null;
 
+  let policy = void 0;
+  const tt = typeof window !== "undefined" && window.trustedTypes;
+  if (tt) {
+    try {
+      policy = /* @__PURE__ */ tt.createPolicy("vue", {
+        createHTML: (val) => val
+      });
+    } catch (e) {
+      warn(`Error creating trusted types policy: ${e}`);
+    }
+  }
+  const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
   const svgNS = "http://www.w3.org/2000/svg";
   const mathmlNS = "http://www.w3.org/1998/Math/MathML";
   const doc = typeof document !== "undefined" ? document : null;
@@ -10239,7 +10323,9 @@ Component that was made reactive: `,
           if (start === end || !(start = start.nextSibling)) break;
         }
       } else {
-        templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
+        templateContainer.innerHTML = unsafeToTrustedHTML(
+          namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
+        );
         const template = templateContainer.content;
         if (namespace === "svg" || namespace === "mathml") {
           const wrapper = template.firstChild;
@@ -10602,11 +10688,17 @@ Component that was made reactive: `,
     }
     const setVars = () => {
       const vars = getter(instance.proxy);
-      setVarsOnVNode(instance.subTree, vars);
+      if (instance.ce) {
+        setVarsOnNode(instance.ce, vars);
+      } else {
+        setVarsOnVNode(instance.subTree, vars);
+      }
       updateTeleports(vars);
     };
-    onMounted(() => {
+    onBeforeMount(() => {
       watchPostEffect(setVars);
+    });
+    onMounted(() => {
       const ob = new MutationObserver(setVars);
       ob.observe(instance.subTree.el.parentNode, { childList: true });
       onUnmounted(() => ob.disconnect());
@@ -10959,16 +11051,24 @@ Expected function or array of functions, received type ${typeof value}.`
     if (isNativeOn(key) && isString(value)) {
       return false;
     }
-    return key in el;
+    if (key in el) {
+      return true;
+    }
+    if (el._isVueCE && (/[A-Z]/.test(key) || !isString(value))) {
+      return true;
+    }
+    return false;
   }
 
+  const REMOVAL = {};
   /*! #__NO_SIDE_EFFECTS__ */
   // @__NO_SIDE_EFFECTS__
-  function defineCustomElement(options, extraOptions, hydrate2) {
+  function defineCustomElement(options, extraOptions, _createApp) {
     const Comp = defineComponent(options, extraOptions);
+    if (isPlainObject(Comp)) extend(Comp, extraOptions);
     class VueCustomElement extends VueElement {
       constructor(initialProps) {
-        super(Comp, initialProps, hydrate2);
+        super(Comp, initialProps, _createApp);
       }
     }
     VueCustomElement.def = Comp;
@@ -10976,47 +11076,88 @@ Expected function or array of functions, received type ${typeof value}.`
   }
   /*! #__NO_SIDE_EFFECTS__ */
   const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
-    return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
+    return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
   };
   const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
   };
   class VueElement extends BaseClass {
-    constructor(_def, _props = {}, hydrate2) {
+    constructor(_def, _props = {}, _createApp = createApp) {
       super();
       this._def = _def;
       this._props = _props;
+      this._createApp = _createApp;
+      this._isVueCE = true;
       /**
        * @internal
        */
       this._instance = null;
+      /**
+       * @internal
+       */
+      this._app = null;
+      /**
+       * @internal
+       */
+      this._nonce = this._def.nonce;
       this._connected = false;
       this._resolved = false;
       this._numberProps = null;
+      this._styleChildren = /* @__PURE__ */ new WeakSet();
       this._ob = null;
-      if (this.shadowRoot && hydrate2) {
-        hydrate2(this._createVNode(), this.shadowRoot);
+      if (this.shadowRoot && _createApp !== createApp) {
+        this._root = this.shadowRoot;
+        this._mount(_def);
       } else {
         if (this.shadowRoot) {
           warn(
             `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
           );
         }
-        this.attachShadow({ mode: "open" });
+        if (_def.shadowRoot !== false) {
+          this.attachShadow({ mode: "open" });
+          this._root = this.shadowRoot;
+        } else {
+          this._root = this;
+        }
         if (!this._def.__asyncLoader) {
           this._resolveProps(this._def);
         }
       }
     }
     connectedCallback() {
+      if (!this.shadowRoot) {
+        this._parseSlots();
+      }
       this._connected = true;
+      let parent = this;
+      while (parent = parent && (parent.parentNode || parent.host)) {
+        if (parent instanceof VueElement) {
+          this._parent = parent;
+          break;
+        }
+      }
       if (!this._instance) {
         if (this._resolved) {
+          this._setParent();
           this._update();
         } else {
-          this._resolveDef();
+          if (parent && parent._pendingResolve) {
+            this._pendingResolve = parent._pendingResolve.then(() => {
+              this._pendingResolve = void 0;
+              this._resolveDef();
+            });
+          } else {
+            this._resolveDef();
+          }
         }
       }
     }
+    _setParent(parent = this._parent) {
+      if (parent) {
+        this._instance.parent = parent._instance;
+        this._instance.provides = parent._instance.provides;
+      }
+    }
     disconnectedCallback() {
       this._connected = false;
       nextTick(() => {
@@ -11025,8 +11166,9 @@ Expected function or array of functions, received type ${typeof value}.`
             this._ob.disconnect();
             this._ob = null;
           }
-          render(null, this.shadowRoot);
-          this._instance = null;
+          this._app && this._app.unmount();
+          this._instance.ce = void 0;
+          this._app = this._instance = null;
         }
       });
     }
@@ -11034,7 +11176,9 @@ Expected function or array of functions, received type ${typeof value}.`
      * resolve inner component definition (handle possible async component)
      */
     _resolveDef() {
-      this._resolved = true;
+      if (this._pendingResolve) {
+        return;
+      }
       for (let i = 0; i < this.attributes.length; i++) {
         this._setAttr(this.attributes[i].name);
       }
@@ -11045,6 +11189,8 @@ Expected function or array of functions, received type ${typeof value}.`
       });
       this._ob.observe(this, { attributes: true });
       const resolve = (def, isAsync = false) => {
+        this._resolved = true;
+        this._pendingResolve = void 0;
         const { props, styles } = def;
         let numberProps;
         if (props && !isArray(props)) {
@@ -11062,22 +11208,53 @@ Expected function or array of functions, received type ${typeof value}.`
         if (isAsync) {
           this._resolveProps(def);
         }
-        this._applyStyles(styles);
-        this._update();
+        if (this.shadowRoot) {
+          this._applyStyles(styles);
+        } else if (styles) {
+          warn(
+            "Custom element style injection is not supported when using shadowRoot: false"
+          );
+        }
+        this._mount(def);
       };
       const asyncDef = this._def.__asyncLoader;
       if (asyncDef) {
-        asyncDef().then((def) => resolve(def, true));
+        this._pendingResolve = asyncDef().then(
+          (def) => resolve(this._def = def, true)
+        );
       } else {
         resolve(this._def);
       }
     }
+    _mount(def) {
+      if (!def.name) {
+        def.name = "VueElement";
+      }
+      this._app = this._createApp(def);
+      if (def.configureApp) {
+        def.configureApp(this._app);
+      }
+      this._app._ceVNode = this._createVNode();
+      this._app.mount(this._root);
+      const exposed = this._instance && this._instance.exposed;
+      if (!exposed) return;
+      for (const key in exposed) {
+        if (!hasOwn(this, key)) {
+          Object.defineProperty(this, key, {
+            // unwrap ref to be consistent with public instance behavior
+            get: () => unref(exposed[key])
+          });
+        } else {
+          warn(`Exposed property "${key}" already exists on custom element.`);
+        }
+      }
+    }
     _resolveProps(def) {
       const { props } = def;
       const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
       for (const key of Object.keys(this)) {
         if (key[0] !== "_" && declaredPropKeys.includes(key)) {
-          this._setProp(key, this[key], true, false);
+          this._setProp(key, this[key]);
         }
       }
       for (const key of declaredPropKeys.map(camelize)) {
@@ -11086,18 +11263,20 @@ Expected function or array of functions, received type ${typeof value}.`
             return this._getProp(key);
           },
           set(val) {
-            this._setProp(key, val);
+            this._setProp(key, val, true, true);
           }
         });
       }
     }
     _setAttr(key) {
-      let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
+      if (key.startsWith("data-v-")) return;
+      const has = this.hasAttribute(key);
+      let value = has ? this.getAttribute(key) : REMOVAL;
       const camelKey = camelize(key);
-      if (this._numberProps && this._numberProps[camelKey]) {
+      if (has && this._numberProps && this._numberProps[camelKey]) {
         value = toNumber(value);
       }
-      this._setProp(camelKey, value, false);
+      this._setProp(camelKey, value, false, true);
     }
     /**
      * @internal
@@ -11108,9 +11287,13 @@ Expected function or array of functions, received type ${typeof value}.`
     /**
      * @internal
      */
-    _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
+    _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
       if (val !== this._props[key]) {
-        this._props[key] = val;
+        if (val === REMOVAL) {
+          delete this._props[key];
+        } else {
+          this._props[key] = val;
+        }
         if (shouldUpdate && this._instance) {
           this._update();
         }
@@ -11126,18 +11309,22 @@ Expected function or array of functions, received type ${typeof value}.`
       }
     }
     _update() {
-      render(this._createVNode(), this.shadowRoot);
+      render(this._createVNode(), this._root);
     }
     _createVNode() {
-      const vnode = createVNode(this._def, extend({}, this._props));
+      const baseProps = {};
+      if (!this.shadowRoot) {
+        baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+      }
+      const vnode = createVNode(this._def, extend(baseProps, this._props));
       if (!this._instance) {
         vnode.ce = (instance) => {
           this._instance = instance;
-          instance.isCE = true;
+          instance.ce = this;
           {
             instance.ceReload = (newStyles) => {
               if (this._styles) {
-                this._styles.forEach((s) => this.shadowRoot.removeChild(s));
+                this._styles.forEach((s) => this._root.removeChild(s));
                 this._styles.length = 0;
               }
               this._applyStyles(newStyles);
@@ -11147,9 +11334,10 @@ Expected function or array of functions, received type ${typeof value}.`
           }
           const dispatch = (event, args) => {
             this.dispatchEvent(
-              new CustomEvent(event, {
-                detail: args
-              })
+              new CustomEvent(
+                event,
+                isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
+              )
             );
           };
           instance.emit = (event, ...args) => {
@@ -11158,30 +11346,126 @@ Expected function or array of functions, received type ${typeof value}.`
               dispatch(hyphenate(event), args);
             }
           };
-          let parent = this;
-          while (parent = parent && (parent.parentNode || parent.host)) {
-            if (parent instanceof VueElement) {
-              instance.parent = parent._instance;
-              instance.provides = parent._instance.provides;
-              break;
-            }
-          }
+          this._setParent();
         };
       }
       return vnode;
     }
-    _applyStyles(styles) {
-      if (styles) {
-        styles.forEach((css) => {
-          const s = document.createElement("style");
-          s.textContent = css;
-          this.shadowRoot.appendChild(s);
-          {
+    _applyStyles(styles, owner) {
+      if (!styles) return;
+      if (owner) {
+        if (owner === this._def || this._styleChildren.has(owner)) {
+          return;
+        }
+        this._styleChildren.add(owner);
+      }
+      const nonce = this._nonce;
+      for (let i = styles.length - 1; i >= 0; i--) {
+        const s = document.createElement("style");
+        if (nonce) s.setAttribute("nonce", nonce);
+        s.textContent = styles[i];
+        this.shadowRoot.prepend(s);
+        {
+          if (owner) {
+            if (owner.__hmrId) {
+              if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
+              let entry = this._childStyles.get(owner.__hmrId);
+              if (!entry) {
+                this._childStyles.set(owner.__hmrId, entry = []);
+              }
+              entry.push(s);
+            }
+          } else {
             (this._styles || (this._styles = [])).push(s);
           }
-        });
+        }
+      }
+    }
+    /**
+     * Only called when shaddowRoot is false
+     */
+    _parseSlots() {
+      const slots = this._slots = {};
+      let n;
+      while (n = this.firstChild) {
+        const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
+        (slots[slotName] || (slots[slotName] = [])).push(n);
+        this.removeChild(n);
+      }
+    }
+    /**
+     * Only called when shaddowRoot is false
+     */
+    _renderSlots() {
+      const outlets = this.querySelectorAll("slot");
+      const scopeId = this._instance.type.__scopeId;
+      for (let i = 0; i < outlets.length; i++) {
+        const o = outlets[i];
+        const slotName = o.getAttribute("name") || "default";
+        const content = this._slots[slotName];
+        const parent = o.parentNode;
+        if (content) {
+          for (const n of content) {
+            if (scopeId && n.nodeType === 1) {
+              const id = scopeId + "-s";
+              const walker = document.createTreeWalker(n, 1);
+              n.setAttribute(id, "");
+              let child;
+              while (child = walker.nextNode()) {
+                child.setAttribute(id, "");
+              }
+            }
+            parent.insertBefore(n, o);
+          }
+        } else {
+          while (o.firstChild) parent.insertBefore(o.firstChild, o);
+        }
+        parent.removeChild(o);
+      }
+    }
+    /**
+     * @internal
+     */
+    _injectChildStyle(comp) {
+      this._applyStyles(comp.styles, comp);
+    }
+    /**
+     * @internal
+     */
+    _removeChildStyle(comp) {
+      {
+        this._styleChildren.delete(comp);
+        if (this._childStyles && comp.__hmrId) {
+          const oldStyles = this._childStyles.get(comp.__hmrId);
+          if (oldStyles) {
+            oldStyles.forEach((s) => this._root.removeChild(s));
+            oldStyles.length = 0;
+          }
+        }
+      }
+    }
+  }
+  function useHost(caller) {
+    const instance = getCurrentInstance();
+    const el = instance && instance.ce;
+    if (el) {
+      return el;
+    } else {
+      if (!instance) {
+        warn(
+          `${caller || "useHost"} called without an active component instance.`
+        );
+      } else {
+        warn(
+          `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
+        );
       }
     }
+    return null;
+  }
+  function useShadowRoot() {
+    const el = useHost("useShadowRoot") ;
+    return el && el.shadowRoot;
   }
 
   function useCssModule(name = "$style") {
@@ -11650,7 +11934,9 @@ Expected function or array of functions, received type ${typeof value}.`
       if (!isFunction(component) && !component.render && !component.template) {
         component.template = container.innerHTML;
       }
-      container.innerHTML = "";
+      if (container.nodeType === 1) {
+        container.textContent = "";
+      }
       const proxy = mount(container, false, resolveRootNamespace(container));
       if (container instanceof Element) {
         container.removeAttribute("v-cloak");
@@ -11875,9 +12161,11 @@ Expected function or array of functions, received type ${typeof value}.`
   exports.useAttrs = useAttrs;
   exports.useCssModule = useCssModule;
   exports.useCssVars = useCssVars;
+  exports.useHost = useHost;
   exports.useId = useId;
   exports.useModel = useModel;
   exports.useSSRContext = useSSRContext;
+  exports.useShadowRoot = useShadowRoot;
   exports.useSlots = useSlots;
   exports.useTemplateRef = useTemplateRef;
   exports.useTransitionState = useTransitionState;