@vue/runtime-dom - npm Package Compare versions

Comparing version 3.5.0-alpha.5 to 3.5.0-beta.1

dist/runtime-dom.cjs.js

 /**
-* @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
@@ -13,2 +13,14 @@ * @license MIT
 
+let policy = void 0;
+const tt = typeof window !== "undefined" && window.trustedTypes;
+if (tt) {
+  try {
+    policy = /* @__PURE__ */ tt.createPolicy("vue", {
+      createHTML: (val) => val
+    });
+  } catch (e) {
+    runtimeCore.warn(`Error creating trusted types policy: ${e}`);
+  }
+}
+const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
 const svgNS = "http://www.w3.org/2000/svg";
@@ -61,3 +73,5 @@ const mathmlNS = "http://www.w3.org/1998/Math/MathML";
     } 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;
@@ -729,12 +743,20 @@ if (namespace === "svg" || namespace === "mathml") {
   }
-  return key in el;
+  if (key in el) {
+    return true;
+  }
+  if (el._isVueCE && (/[A-Z]/.test(key) || !shared.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 = runtimeCore.defineComponent(options, extraOptions);
+  if (shared.isPlainObject(Comp)) shared.extend(Comp, extraOptions);
   class VueCustomElement extends VueElement {
     constructor(initialProps) {
-      super(Comp, initialProps, hydrate2);
+      super(Comp, initialProps, _createApp);
     }
@@ -747,3 +769,3 @@ }
 const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
-  return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
+  return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
 };
@@ -753,6 +775,8 @@ 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;
     /**
@@ -762,8 +786,18 @@ * @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 {
@@ -775,3 +809,8 @@ if (this.shadowRoot) {
       }
-      this.attachShadow({ mode: "open" });
+      if (_def.shadowRoot !== false) {
+        this.attachShadow({ mode: "open" });
+        this._root = this.shadowRoot;
+      } else {
+        this._root = this;
+      }
       if (!this._def.__asyncLoader) {
@@ -783,11 +822,35 @@ 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() {
@@ -801,4 +864,5 @@ this._connected = false;
         }
-        render(null, this.shadowRoot);
-        this._instance = null;
+        this._app && this._app.unmount();
+        this._instance.ce = void 0;
+        this._app = this._instance = null;
       }
@@ -811,3 +875,5 @@ });
   _resolveDef() {
-    this._resolved = true;
+    if (this._pendingResolve) {
+      return;
+    }
     for (let i = 0; i < this.attributes.length; i++) {
@@ -823,2 +889,4 @@ this._setAttr(this.attributes[i].name);
     const resolve = (def, isAsync = false) => {
+      this._resolved = true;
+      this._pendingResolve = void 0;
       const { props, styles } = def;
@@ -841,8 +909,16 @@ let numberProps;
       }
-      this._applyStyles(styles);
-      this._update();
+      if (this.shadowRoot) {
+        this._applyStyles(styles);
+      } else if (styles) {
+        runtimeCore.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 {
@@ -852,2 +928,25 @@ 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 (!shared.hasOwn(this, key)) {
+        Object.defineProperty(this, key, {
+          // unwrap ref to be consistent with public instance behavior
+          get: () => runtimeCore.unref(exposed[key])
+        });
+      } else {
+        runtimeCore.warn(`Exposed property "${key}" already exists on custom element.`);
+      }
+    }
+  }
   _resolveProps(def) {
@@ -858,3 +957,3 @@ const { props } = def;
       if (key[0] !== "_" && declaredPropKeys.includes(key)) {
-        this._setProp(key, this[key], true, false);
+        this._setProp(key, this[key]);
       }
@@ -868,3 +967,3 @@ }
         set(val) {
-          this._setProp(key, val);
+          this._setProp(key, val, true, true);
         }
@@ -875,8 +974,10 @@ });
   _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 = shared.camelize(key);
-    if (this._numberProps && this._numberProps[camelKey]) {
+    if (has && this._numberProps && this._numberProps[camelKey]) {
       value = shared.toNumber(value);
     }
-    this._setProp(camelKey, value, false);
+    this._setProp(camelKey, value, false, true);
   }
@@ -892,5 +993,9 @@ /**
    */
-  _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) {
@@ -911,14 +1016,18 @@ this._update();
   _update() {
-    render(this._createVNode(), this.shadowRoot);
+    render(this._createVNode(), this._root);
   }
   _createVNode() {
-    const vnode = runtimeCore.createVNode(this._def, shared.extend({}, this._props));
+    const baseProps = {};
+    if (!this.shadowRoot) {
+      baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+    }
+    const vnode = runtimeCore.createVNode(this._def, shared.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;
@@ -933,5 +1042,6 @@ }
           this.dispatchEvent(
-            new CustomEvent(event, {
-              detail: args
-            })
+            new CustomEvent(
+              event,
+              shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
+            )
           );
@@ -945,10 +1055,3 @@ };
         };
-        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();
       };
@@ -958,15 +1061,118 @@ }
   }
-  _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 = runtimeCore.getCurrentInstance();
+  const el = instance && instance.ce;
+  if (el) {
+    return el;
+  } else {
+    if (!instance) {
+      runtimeCore.warn(
+        `${caller || "useHost"} called without an active component instance.`
+      );
+    } else {
+      runtimeCore.warn(
+        `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
+      );
+    }
+  }
+  return null;
+}
+function useShadowRoot() {
+  const el = useHost("useShadowRoot") ;
+  return el && el.shadowRoot;
+}
 
@@ -1485,3 +1691,5 @@ function useCssModule(name = "$style") {
     }
-    container.innerHTML = "";
+    if (container.nodeType === 1) {
+      container.textContent = "";
+    }
     const proxy = mount(container, false, resolveRootNamespace(container));
@@ -1592,2 +1800,4 @@ if (container instanceof Element) {
 exports.useCssVars = useCssVars;
+exports.useHost = useHost;
+exports.useShadowRoot = useShadowRoot;
 exports.vModelCheckbox = vModelCheckbox;
@@ -1594,0 +1804,0 @@ exports.vModelDynamic = vModelDynamic;

dist/runtime-dom.cjs.prod.js

 /**
-* @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
@@ -13,2 +13,13 @@ * @license MIT
 
+let policy = void 0;
+const tt = typeof window !== "undefined" && window.trustedTypes;
+if (tt) {
+  try {
+    policy = /* @__PURE__ */ tt.createPolicy("vue", {
+      createHTML: (val) => val
+    });
+  } catch (e) {
+  }
+}
+const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
 const svgNS = "http://www.w3.org/2000/svg";
@@ -61,3 +72,5 @@ const mathmlNS = "http://www.w3.org/1998/Math/MathML";
     } 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;
@@ -699,12 +712,20 @@ if (namespace === "svg" || namespace === "mathml") {
   }
-  return key in el;
+  if (key in el) {
+    return true;
+  }
+  if (el._isVueCE && (/[A-Z]/.test(key) || !shared.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 = runtimeCore.defineComponent(options, extraOptions);
+  if (shared.isPlainObject(Comp)) shared.extend(Comp, extraOptions);
   class VueCustomElement extends VueElement {
     constructor(initialProps) {
-      super(Comp, initialProps, hydrate2);
+      super(Comp, initialProps, _createApp);
     }
@@ -717,3 +738,3 @@ }
 const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
-  return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
+  return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
 };
@@ -723,6 +744,8 @@ 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;
     /**
@@ -732,10 +755,25 @@ * @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 {
-      this.attachShadow({ mode: "open" });
+      if (_def.shadowRoot !== false) {
+        this.attachShadow({ mode: "open" });
+        this._root = this.shadowRoot;
+      } else {
+        this._root = this;
+      }
       if (!this._def.__asyncLoader) {
@@ -747,11 +785,35 @@ 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() {
@@ -765,4 +827,5 @@ this._connected = false;
         }
-        render(null, this.shadowRoot);
-        this._instance = null;
+        this._app && this._app.unmount();
+        this._instance.ce = void 0;
+        this._app = this._instance = null;
       }
@@ -775,3 +838,5 @@ });
   _resolveDef() {
-    this._resolved = true;
+    if (this._pendingResolve) {
+      return;
+    }
     for (let i = 0; i < this.attributes.length; i++) {
@@ -787,2 +852,4 @@ this._setAttr(this.attributes[i].name);
     const resolve = (def, isAsync = false) => {
+      this._resolved = true;
+      this._pendingResolve = void 0;
       const { props, styles } = def;
@@ -805,8 +872,12 @@ let numberProps;
       }
-      this._applyStyles(styles);
-      this._update();
+      if (this.shadowRoot) {
+        this._applyStyles(styles);
+      }
+      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 {
@@ -816,2 +887,20 @@ resolve(this._def);
   }
+  _mount(def) {
+    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 (!shared.hasOwn(this, key)) {
+        Object.defineProperty(this, key, {
+          // unwrap ref to be consistent with public instance behavior
+          get: () => runtimeCore.unref(exposed[key])
+        });
+      }
+    }
+  }
   _resolveProps(def) {
@@ -822,3 +911,3 @@ const { props } = def;
       if (key[0] !== "_" && declaredPropKeys.includes(key)) {
-        this._setProp(key, this[key], true, false);
+        this._setProp(key, this[key]);
       }
@@ -832,3 +921,3 @@ }
         set(val) {
-          this._setProp(key, val);
+          this._setProp(key, val, true, true);
         }
@@ -839,8 +928,10 @@ });
   _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 = shared.camelize(key);
-    if (this._numberProps && this._numberProps[camelKey]) {
+    if (has && this._numberProps && this._numberProps[camelKey]) {
       value = shared.toNumber(value);
     }
-    this._setProp(camelKey, value, false);
+    this._setProp(camelKey, value, false, true);
   }
@@ -856,5 +947,9 @@ /**
    */
-  _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) {
@@ -875,15 +970,20 @@ this._update();
   _update() {
-    render(this._createVNode(), this.shadowRoot);
+    render(this._createVNode(), this._root);
   }
   _createVNode() {
-    const vnode = runtimeCore.createVNode(this._def, shared.extend({}, this._props));
+    const baseProps = {};
+    if (!this.shadowRoot) {
+      baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+    }
+    const vnode = runtimeCore.createVNode(this._def, shared.extend(baseProps, this._props));
     if (!this._instance) {
       vnode.ce = (instance) => {
         this._instance = instance;
-        instance.isCE = true;
+        instance.ce = this;
         const dispatch = (event, args) => {
           this.dispatchEvent(
-            new CustomEvent(event, {
-              detail: args
-            })
+            new CustomEvent(
+              event,
+              shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
+            )
           );
@@ -897,10 +997,3 @@ };
         };
-        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();
       };
@@ -910,12 +1003,84 @@ }
   }
-  _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);
+    }
   }
+  /**
+   * 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) {
+  }
 }
+function useHost(caller) {
+  const instance = runtimeCore.getCurrentInstance();
+  const el = instance && instance.ce;
+  if (el) {
+    return el;
+  }
+  return null;
+}
+function useShadowRoot() {
+  const el = useHost();
+  return el && el.shadowRoot;
+}
 
@@ -1422,3 +1587,5 @@ function useCssModule(name = "$style") {
     }
-    container.innerHTML = "";
+    if (container.nodeType === 1) {
+      container.textContent = "";
+    }
     const proxy = mount(container, false, resolveRootNamespace(container));
@@ -1480,2 +1647,4 @@ if (container instanceof Element) {
 exports.useCssVars = useCssVars;
+exports.useHost = useHost;
+exports.useShadowRoot = useShadowRoot;
 exports.vModelCheckbox = vModelCheckbox;
@@ -1482,0 +1651,0 @@ exports.vModelDynamic = vModelDynamic;

dist/runtime-dom.d.ts

@@ -1,2 +0,2 @@
-import { BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, SetupContext, RenderFunction, ComponentOptions, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, Component, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, DefineComponent, RootHydrateFunction, ConcreteComponent, VNodeRef, RootRenderFunction, CreateAppFunction } from '@vue/runtime-core';
+import { BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, App, SetupContext, RenderFunction, ComponentOptions, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, Component, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, DefineComponent, ComponentCustomElementInterface, CreateAppFunction, ConcreteComponent, VNodeRef, RootRenderFunction, RootHydrateFunction } from '@vue/runtime-core';
 export * from '@vue/runtime-core';
@@ -32,4 +32,6 @@ import * as CSS from 'csstype';
 };
-export declare const TransitionGroup: new () => {
-    $props: TransitionGroupProps;
+export declare const TransitionGroup: {
+    new (): {
+        $props: TransitionGroupProps;
+    };
 };
@@ -51,16 +53,3 @@
 type VOnModifiers = SystemModifiers | ModifierGuards | CompatModifiers;
-declare const modifierGuards: {
-    stop: (e: Event) => void;
-    prevent: (e: Event) => void;
-    self: (e: Event) => boolean;
-    ctrl: (e: Event) => boolean;
-    shift: (e: Event) => boolean;
-    alt: (e: Event) => boolean;
-    meta: (e: Event) => boolean;
-    left: (e: Event) => boolean;
-    middle: (e: Event) => boolean;
-    right: (e: Event) => boolean;
-    exact: (e: Event, modifiers: string[]) => boolean;
-};
-type ModifierGuards = keyof typeof modifierGuards;
+type ModifierGuards = 'shift' | 'ctrl' | 'alt' | 'meta' | 'left' | 'right' | 'stop' | 'prevent' | 'self' | 'middle' | 'exact';
 /**
@@ -74,11 +63,3 @@ * @private
 }, modifiers: VOnModifiers[]) => T;
-declare const keyNames: {
-    esc: string;
-    space: string;
-    up: string;
-    left: string;
-    right: string;
-    down: string;
-    delete: string;
-};
+declare const keyNames: Record<'esc' | 'space' | 'up' | 'left' | 'right' | 'down' | 'delete', string>;
 /**
@@ -110,6 +91,12 @@ * @private
 };
-export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & {
+export interface CustomElementOptions {
+    styles?: string[];
+    shadowRoot?: boolean;
+    nonce?: string;
+    configureApp?: (app: App) => void;
+}
+export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
     props?: (keyof Props)[];
 }): VueElementConstructor<Props>;
-export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & {
+export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
     props?: ComponentObjectPropsOptions<Props>;
@@ -119,26 +106,44 @@ }): VueElementConstructor<Props>;
     [key in PropsKeys]?: any;
-}, ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>>(options: {
+}, ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>>(options: CustomElementOptions & {
     props?: (RuntimePropsOptions & ThisType<void>) | PropsKeys[];
 } & ComponentOptionsBase<ResolvedProps, SetupBindings, Data, Computed, Methods, Mixin, Extends, RuntimeEmitsOptions, EmitsKeys, {}, // Defaults
-InjectOptions, InjectKeys, Slots, LocalComponents, Directives, Exposed, Provide> & ThisType<CreateComponentPublicInstanceWithMixins<Readonly<ResolvedProps>, SetupBindings, Data, Computed, Methods, Mixin, Extends, RuntimeEmitsOptions, EmitsKeys, {}, false, InjectOptions, Slots, LocalComponents, Directives, Exposed>>): VueElementConstructor<ResolvedProps>;
-export declare function defineCustomElement<P>(options: DefineComponent<P, any, any, any>): VueElementConstructor<ExtractPropTypes<P>>;
+InjectOptions, InjectKeys, Slots, LocalComponents, Directives, Exposed, Provide> & ThisType<CreateComponentPublicInstanceWithMixins<Readonly<ResolvedProps>, SetupBindings, Data, Computed, Methods, Mixin, Extends, RuntimeEmitsOptions, EmitsKeys, {}, false, InjectOptions, Slots, LocalComponents, Directives, Exposed>>, extraOptions?: CustomElementOptions): VueElementConstructor<ResolvedProps>;
+export declare function defineCustomElement<T extends DefineComponent<any, any, any, any>>(options: T, extraOptions?: CustomElementOptions): VueElementConstructor<T extends DefineComponent<infer P, any, any, any> ? ExtractPropTypes<P> : unknown>;
 /*! #__NO_SIDE_EFFECTS__ */
 export declare const defineSSRCustomElement: typeof defineCustomElement;
-declare const BaseClass: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-};
-type InnerComponentDef = ConcreteComponent & {
-    styles?: string[];
-};
-export declare class VueElement extends BaseClass {
+declare const BaseClass: typeof HTMLElement;
+type InnerComponentDef = ConcreteComponent & CustomElementOptions;
+export declare class VueElement extends BaseClass implements ComponentCustomElementInterface {
+    /**
+     * Component def - note this may be an AsyncWrapper, and this._def will
+     * be overwritten by the inner component when resolved.
+     */
     private _def;
     private _props;
+    private _createApp;
+    _isVueCE: boolean;
     private _connected;
     private _resolved;
     private _numberProps;
+    private _styleChildren;
+    private _pendingResolve;
+    private _parent;
+    /**
+     * dev only
+     */
     private _styles?;
+    /**
+     * dev only
+     */
+    private _childStyles?;
     private _ob?;
-    constructor(_def: InnerComponentDef, _props?: Record<string, any>, hydrate?: RootHydrateFunction);
+    private _slots?;
+    constructor(
+    /**
+     * Component def - note this may be an AsyncWrapper, and this._def will
+     * be overwritten by the inner component when resolved.
+     */
+    _def: InnerComponentDef, _props?: Record<string, any>, _createApp?: CreateAppFunction<Element>);
     connectedCallback(): void;
+    private _setParent;
     disconnectedCallback(): void;
@@ -149,2 +154,3 @@ /**
     private _resolveDef;
+    private _mount;
     private _resolveProps;
@@ -155,3 +161,17 @@ protected _setAttr(key: string): void;
     private _applyStyles;
+    /**
+     * Only called when shaddowRoot is false
+     */
+    private _parseSlots;
+    /**
+     * Only called when shaddowRoot is false
+     */
+    private _renderSlots;
 }
+export declare function useHost(caller?: string): VueElement | null;
+/**
+ * Retrieve the shadowRoot of the current custom element. Only usable in setup()
+ * of a `defineCustomElement` component.
+ */
+export declare function useShadowRoot(): ShadowRoot | null;
 
@@ -158,0 +178,0 @@ export declare function useCssModule(name?: string): Record<string, string>;

dist/runtime-dom.esm-bundler.js

 /**
-* @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
 **/
-import { h, BaseTransition, BaseTransitionPropsValidators, assertNumber, getCurrentInstance, warn, onMounted, watchPostEffect, onUnmounted, Fragment, Static, camelize, callWithAsyncErrorHandling, defineComponent, nextTick, createVNode, useTransitionState, onUpdated, toRaw, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, isRuntimeOnly, createRenderer, createHydrationRenderer } from '@vue/runtime-core';
+import { warn, h, BaseTransition, BaseTransitionPropsValidators, assertNumber, getCurrentInstance, onBeforeMount, watchPostEffect, onMounted, onUnmounted, Fragment, Static, camelize, callWithAsyncErrorHandling, defineComponent, nextTick, unref, createVNode, useTransitionState, onUpdated, toRaw, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, isRuntimeOnly, createRenderer, createHydrationRenderer } from '@vue/runtime-core';
 export * from '@vue/runtime-core';
-import { extend, isObject, toNumber, isArray, isString, hyphenate, capitalize, includeBooleanAttr, isSymbol, isSpecialBooleanAttr, isFunction, NOOP, isOn, isModelListener, camelize as camelize$1, EMPTY_OBJ, looseToNumber, looseIndexOf, isSet, looseEqual, invokeArrayFns, isHTMLTag, isSVGTag, isMathMLTag } from '@vue/shared';
+import { extend, isObject, toNumber, isArray, isString, hyphenate, capitalize, includeBooleanAttr, isSymbol, isSpecialBooleanAttr, isFunction, NOOP, isOn, isModelListener, isPlainObject, hasOwn, camelize as camelize$1, EMPTY_OBJ, looseToNumber, looseIndexOf, isSet, looseEqual, invokeArrayFns, isHTMLTag, isSVGTag, isMathMLTag } from '@vue/shared';
 
+let policy = void 0;
+const tt = typeof window !== "undefined" && window.trustedTypes;
+if (tt) {
+  try {
+    policy = /* @__PURE__ */ tt.createPolicy("vue", {
+      createHTML: (val) => val
+    });
+  } catch (e) {
+    !!(process.env.NODE_ENV !== "production") && warn(`Error creating trusted types policy: ${e}`);
+  }
+}
+const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
 const svgNS = "http://www.w3.org/2000/svg";
@@ -57,3 +69,5 @@ const mathmlNS = "http://www.w3.org/1998/Math/MathML";
     } 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;
@@ -428,7 +442,13 @@ if (namespace === "svg" || namespace === "mathml") {
     const vars = getter(instance.proxy);
-    setVarsOnVNode(instance.subTree, vars);
+    if (instance.ce) {
+      setVarsOnNode(instance.ce, vars);
+    } else {
+      setVarsOnVNode(instance.subTree, vars);
+    }
     updateTeleports(vars);
   };
+  onBeforeMount(() => {
+    watchPostEffect(setVars);
+  });
   onMounted(() => {
-    watchPostEffect(setVars);
     const ob = new MutationObserver(setVars);
@@ -786,12 +806,20 @@ ob.observe(instance.subTree.el.parentNode, { childList: true });
   }
-  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);
     }
@@ -804,3 +832,3 @@ }
 const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
-  return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
+  return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
 };
@@ -810,6 +838,8 @@ 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;
     /**
@@ -819,8 +849,18 @@ * @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 {
@@ -832,3 +872,8 @@ if (!!(process.env.NODE_ENV !== "production") && this.shadowRoot) {
       }
-      this.attachShadow({ mode: "open" });
+      if (_def.shadowRoot !== false) {
+        this.attachShadow({ mode: "open" });
+        this._root = this.shadowRoot;
+      } else {
+        this._root = this;
+      }
       if (!this._def.__asyncLoader) {
@@ -840,11 +885,35 @@ 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() {
@@ -858,4 +927,5 @@ this._connected = false;
         }
-        render(null, this.shadowRoot);
-        this._instance = null;
+        this._app && this._app.unmount();
+        this._instance.ce = void 0;
+        this._app = this._instance = null;
       }
@@ -868,3 +938,5 @@ });
   _resolveDef() {
-    this._resolved = true;
+    if (this._pendingResolve) {
+      return;
+    }
     for (let i = 0; i < this.attributes.length; i++) {
@@ -880,2 +952,4 @@ this._setAttr(this.attributes[i].name);
     const resolve = (def, isAsync = false) => {
+      this._resolved = true;
+      this._pendingResolve = void 0;
       const { props, styles } = def;
@@ -898,8 +972,16 @@ let numberProps;
       }
-      this._applyStyles(styles);
-      this._update();
+      if (this.shadowRoot) {
+        this._applyStyles(styles);
+      } else if (!!(process.env.NODE_ENV !== "production") && 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 {
@@ -909,2 +991,25 @@ resolve(this._def);
   }
+  _mount(def) {
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) && !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 if (!!(process.env.NODE_ENV !== "production")) {
+        warn(`Exposed property "${key}" already exists on custom element.`);
+      }
+    }
+  }
   _resolveProps(def) {
@@ -915,3 +1020,3 @@ const { props } = def;
       if (key[0] !== "_" && declaredPropKeys.includes(key)) {
-        this._setProp(key, this[key], true, false);
+        this._setProp(key, this[key]);
       }
@@ -925,3 +1030,3 @@ }
         set(val) {
-          this._setProp(key, val);
+          this._setProp(key, val, true, true);
         }
@@ -932,8 +1037,10 @@ });
   _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$1(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);
   }
@@ -949,5 +1056,9 @@ /**
    */
-  _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) {
@@ -968,14 +1079,18 @@ this._update();
   _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;
         if (!!(process.env.NODE_ENV !== "production")) {
           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;
@@ -990,5 +1105,6 @@ }
           this.dispatchEvent(
-            new CustomEvent(event, {
-              detail: args
-            })
+            new CustomEvent(
+              event,
+              isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
+            )
           );
@@ -1002,10 +1118,3 @@ };
         };
-        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();
       };
@@ -1015,15 +1124,118 @@ }
   }
-  _applyStyles(styles) {
-    if (styles) {
-      styles.forEach((css) => {
-        const s = document.createElement("style");
-        s.textContent = css;
-        this.shadowRoot.appendChild(s);
-        if (!!(process.env.NODE_ENV !== "production")) {
+  _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 (!!(process.env.NODE_ENV !== "production")) {
+        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) {
+    if (!!(process.env.NODE_ENV !== "production")) {
+      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 (!!(process.env.NODE_ENV !== "production")) {
+    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 = !!(process.env.NODE_ENV !== "production") ? useHost("useShadowRoot") : useHost();
+  return el && el.shadowRoot;
+}
 
@@ -1542,3 +1754,5 @@ function useCssModule(name = "$style") {
     }
-    container.innerHTML = "";
+    if (container.nodeType === 1) {
+      container.textContent = "";
+    }
     const proxy = mount(container, false, resolveRootNamespace(container));
@@ -1637,2 +1851,2 @@ if (container instanceof Element) {
 
-export { Transition, TransitionGroup, VueElement, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, hydrate, initDirectivesForSSR, render, useCssModule, useCssVars, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers };
+export { Transition, TransitionGroup, VueElement, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, hydrate, initDirectivesForSSR, render, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers };

package.json

 {
   "name": "@vue/runtime-dom",
-  "version": "3.5.0-alpha.5",
+  "version": "3.5.0-beta.1",
   "description": "@vue/runtime-dom",
@@ -53,6 +53,9 @@ "main": "index.js",
     "csstype": "^3.1.3",
-    "@vue/shared": "3.5.0-alpha.5",
-    "@vue/reactivity": "3.5.0-alpha.5",
-    "@vue/runtime-core": "3.5.0-alpha.5"
+    "@vue/shared": "3.5.0-beta.1",
+    "@vue/runtime-core": "3.5.0-beta.1",
+    "@vue/reactivity": "3.5.0-beta.1"
+  },
+  "devDependencies": {
+    "@types/trusted-types": "^2.0.7"
   }
 }

README.md

 # @vue/runtime-dom
 
-``` js
+```js
 import { h, createApp } from '@vue/runtime-dom'
@@ -9,3 +9,3 @@
     return h('div', 'hello world')
-  }
+  },
 }
@@ -12,0 +12,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1148642

increased by3.73%

Lines of code

31576

increased by4.02%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of low supply chain risk alerts

29

increased by31.82%

Dependency changes

• + Added@vue/reactivity@3.5.0-beta.1(transitive)

• + Added@vue/runtime-core@3.5.0-beta.1(transitive)

• + Added@vue/shared@3.5.0-beta.1(transitive)

• - Removed@vue/reactivity@3.5.0-alpha.5(transitive)

• - Removed@vue/runtime-core@3.5.0-alpha.5(transitive)

• - Removed@vue/shared@3.5.0-alpha.5(transitive)

• Updated@vue/reactivity@3.5.0-beta.1

• Updated@vue/runtime-core@3.5.0-beta.1

• Updated@vue/shared@3.5.0-beta.1