@vue/runtime-dom 3.5.28 → 3.5.30

package/dist/runtime-dom.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.28
+* @vue/runtime-dom v3.5.30
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -717,7 +717,9 @@ const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) =>
     }
   } else if (
     // #11081 force set props for possible async custom element
-    el._isVueCE && (/[A-Z]/.test(key) || !shared.isString(nextValue))
+    el._isVueCE && // #12408 check if it's declared prop or it's async custom element
+    (shouldSetAsPropForVueCE(el, key) || // @ts-expect-error _def is private
+    el._def.__asyncLoader && (/[A-Z]/.test(key) || !shared.isString(nextValue)))
   ) {
     patchDOMProp(el, shared.camelize(key), nextValue, parentComponent, key);
   } else {
@@ -765,6 +767,17 @@ function shouldSetAsProp(el, key, value, isSVG) {
   }
   return key in el;
 }
+function shouldSetAsPropForVueCE(el, key) {
+  const props = (
+    // @ts-expect-error _def is private
+    el._def.props
+  );
+  if (!props) {
+    return false;
+  }
+  const camelKey = shared.camelize(key);
+  return Array.isArray(props) ? props.some((prop) => shared.camelize(prop) === camelKey) : Object.keys(props).some((prop) => shared.camelize(prop) === camelKey);
+}
 
 const REMOVAL = {};
 // @__NO_SIDE_EFFECTS__
@@ -809,6 +822,7 @@ class VueElement extends BaseClass {
     this._dirty = false;
     this._numberProps = null;
     this._styleChildren = /* @__PURE__ */ new WeakSet();
+    this._styleAnchors = /* @__PURE__ */ new WeakMap();
     this._ob = null;
     if (this.shadowRoot && _createApp !== createApp) {
       this._root = this.shadowRoot;
@@ -837,7 +851,8 @@ class VueElement extends BaseClass {
     }
     this._connected = true;
     let parent = this;
-    while (parent = parent && (parent.parentNode || parent.host)) {
+    while (parent = parent && // #12479 should check assignedSlot first to get correct parent
+    (parent.assignedSlot || parent.parentNode || parent.host)) {
       if (parent instanceof VueElement) {
         this._parent = parent;
         break;
@@ -1059,6 +1074,7 @@ class VueElement extends BaseClass {
               this._styles.forEach((s) => this._root.removeChild(s));
               this._styles.length = 0;
             }
+            this._styleAnchors.delete(this._def);
             this._applyStyles(newStyles);
             this._instance = null;
             this._update();
@@ -1083,7 +1099,7 @@ class VueElement extends BaseClass {
     }
     return vnode;
   }
-  _applyStyles(styles, owner) {
+  _applyStyles(styles, owner, parentComp) {
     if (!styles) return;
     if (owner) {
       if (owner === this._def || this._styleChildren.has(owner)) {
@@ -1092,11 +1108,19 @@ class VueElement extends BaseClass {
       this._styleChildren.add(owner);
     }
     const nonce = this._nonce;
+    const root = this.shadowRoot;
+    const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
+    let last = null;
     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);
+      root.insertBefore(s, last || insertionAnchor);
+      last = s;
+      if (i === 0) {
+        if (!parentComp) this._styleAnchors.set(this._def, s);
+        if (owner) this._styleAnchors.set(owner, s);
+      }
       {
         if (owner) {
           if (owner.__hmrId) {
@@ -1113,6 +1137,28 @@ class VueElement extends BaseClass {
       }
     }
   }
+  _getStyleAnchor(comp) {
+    if (!comp) {
+      return null;
+    }
+    const anchor = this._styleAnchors.get(comp);
+    if (anchor && anchor.parentNode === this.shadowRoot) {
+      return anchor;
+    }
+    if (anchor) {
+      this._styleAnchors.delete(comp);
+    }
+    return null;
+  }
+  _getRootStyleInsertionAnchor(root) {
+    for (let i = 0; i < root.childNodes.length; i++) {
+      const node = root.childNodes[i];
+      if (!(node instanceof HTMLStyleElement)) {
+        return node;
+      }
+    }
+    return null;
+  }
   /**
    * Only called when shadowRoot is false
    */
@@ -1175,8 +1221,8 @@ class VueElement extends BaseClass {
   /**
    * @internal
    */
-  _injectChildStyle(comp) {
-    this._applyStyles(comp.styles, comp);
+  _injectChildStyle(comp, parentComp) {
+    this._applyStyles(comp.styles, comp, parentComp);
   }
   /**
    * @internal
@@ -1206,6 +1252,7 @@ class VueElement extends BaseClass {
   _removeChildStyle(comp) {
     {
       this._styleChildren.delete(comp);
+      this._styleAnchors.delete(comp);
       if (this._childStyles && comp.__hmrId) {
         const oldStyles = this._childStyles.get(comp.__hmrId);
         if (oldStyles) {

package/dist/runtime-dom.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.28
+* @vue/runtime-dom v3.5.30
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -689,7 +689,9 @@ const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) =>
     }
   } else if (
     // #11081 force set props for possible async custom element
-    el._isVueCE && (/[A-Z]/.test(key) || !shared.isString(nextValue))
+    el._isVueCE && // #12408 check if it's declared prop or it's async custom element
+    (shouldSetAsPropForVueCE(el, key) || // @ts-expect-error _def is private
+    el._def.__asyncLoader && (/[A-Z]/.test(key) || !shared.isString(nextValue)))
   ) {
     patchDOMProp(el, shared.camelize(key), nextValue, parentComponent, key);
   } else {
@@ -737,6 +739,17 @@ function shouldSetAsProp(el, key, value, isSVG) {
   }
   return key in el;
 }
+function shouldSetAsPropForVueCE(el, key) {
+  const props = (
+    // @ts-expect-error _def is private
+    el._def.props
+  );
+  if (!props) {
+    return false;
+  }
+  const camelKey = shared.camelize(key);
+  return Array.isArray(props) ? props.some((prop) => shared.camelize(prop) === camelKey) : Object.keys(props).some((prop) => shared.camelize(prop) === camelKey);
+}
 
 const REMOVAL = {};
 // @__NO_SIDE_EFFECTS__
@@ -781,6 +794,7 @@ class VueElement extends BaseClass {
     this._dirty = false;
     this._numberProps = null;
     this._styleChildren = /* @__PURE__ */ new WeakSet();
+    this._styleAnchors = /* @__PURE__ */ new WeakMap();
     this._ob = null;
     if (this.shadowRoot && _createApp !== createApp) {
       this._root = this.shadowRoot;
@@ -804,7 +818,8 @@ class VueElement extends BaseClass {
     }
     this._connected = true;
     let parent = this;
-    while (parent = parent && (parent.parentNode || parent.host)) {
+    while (parent = parent && // #12479 should check assignedSlot first to get correct parent
+    (parent.assignedSlot || parent.parentNode || parent.host)) {
       if (parent instanceof VueElement) {
         this._parent = parent;
         break;
@@ -1030,7 +1045,7 @@ class VueElement extends BaseClass {
     }
     return vnode;
   }
-  _applyStyles(styles, owner) {
+  _applyStyles(styles, owner, parentComp) {
     if (!styles) return;
     if (owner) {
       if (owner === this._def || this._styleChildren.has(owner)) {
@@ -1039,12 +1054,42 @@ class VueElement extends BaseClass {
       this._styleChildren.add(owner);
     }
     const nonce = this._nonce;
+    const root = this.shadowRoot;
+    const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
+    let last = null;
     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);
+      root.insertBefore(s, last || insertionAnchor);
+      last = s;
+      if (i === 0) {
+        if (!parentComp) this._styleAnchors.set(this._def, s);
+        if (owner) this._styleAnchors.set(owner, s);
+      }
+    }
+  }
+  _getStyleAnchor(comp) {
+    if (!comp) {
+      return null;
     }
+    const anchor = this._styleAnchors.get(comp);
+    if (anchor && anchor.parentNode === this.shadowRoot) {
+      return anchor;
+    }
+    if (anchor) {
+      this._styleAnchors.delete(comp);
+    }
+    return null;
+  }
+  _getRootStyleInsertionAnchor(root) {
+    for (let i = 0; i < root.childNodes.length; i++) {
+      const node = root.childNodes[i];
+      if (!(node instanceof HTMLStyleElement)) {
+        return node;
+      }
+    }
+    return null;
   }
   /**
    * Only called when shadowRoot is false
@@ -1108,8 +1153,8 @@ class VueElement extends BaseClass {
   /**
    * @internal
    */
-  _injectChildStyle(comp) {
-    this._applyStyles(comp.styles, comp);
+  _injectChildStyle(comp, parentComp) {
+    this._applyStyles(comp.styles, comp, parentComp);
   }
   /**
    * @internal

package/dist/runtime-dom.d.ts

@@ -1,4 +1,4 @@
-import { RendererOptions, BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, App, ComponentCustomElementInterface, ConcreteComponent, CreateAppFunction, SetupContext, RenderFunction, ComponentOptions, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, Component, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, ComponentPublicInstance, DefineComponent, VNodeRef, RootHydrateFunction, RootRenderFunction } from '@vue/runtime-core';
+import { RendererOptions, BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, VNodeRef, App, ComponentCustomElementInterface, ConcreteComponent, CreateAppFunction, SetupContext, RenderFunction, ComponentOptions, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, Component, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, ComponentPublicInstance, DefineComponent, RootHydrateFunction, RootRenderFunction } from '@vue/runtime-core';
 export * from '@vue/runtime-core';
 import * as CSS from 'csstype';
 
@@ -91,106 +91,6 @@ export declare const vModelSelect: ModelDirective<HTMLSelectElement, 'number'>;
 export declare const vModelDynamic: ObjectDirective<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
 type VModelDirective = typeof vModelText | typeof vModelCheckbox | typeof vModelSelect | typeof vModelRadio | typeof vModelDynamic;
 
-export type VueElementConstructor<P = {}> = {
-    new (initialProps?: Record<string, any>): VueElement & P;
-};
-export interface CustomElementOptions {
-    styles?: string[];
-    shadowRoot?: boolean;
-    shadowRootOptions?: Omit<ShadowRootInit, 'mode'>;
-    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'> & CustomElementOptions & {
-    props?: ComponentObjectPropsOptions<Props>;
-}): VueElementConstructor<Props>;
-export declare function defineCustomElement<RuntimePropsOptions extends ComponentObjectPropsOptions = ComponentObjectPropsOptions, PropsKeys extends string = string, RuntimeEmitsOptions extends EmitsOptions = {}, EmitsKeys extends string = string, Data = {}, SetupBindings = {}, Computed extends ComputedOptions = {}, Methods extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, InjectOptions extends ComponentInjectOptions = {}, InjectKeys extends string = string, Slots extends SlotsType = {}, LocalComponents extends Record<string, Component> = {}, Directives extends Record<string, Directive> = {}, Exposed extends string = string, Provide extends ComponentProvideOptions = ComponentProvideOptions, InferredProps = string extends PropsKeys ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : {
-    [key in PropsKeys]?: any;
-}, 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>>, extraOptions?: CustomElementOptions): VueElementConstructor<ResolvedProps>;
-export declare function defineCustomElement<T extends {
-    new (...args: any[]): ComponentPublicInstance<any>;
-}>(options: T, extraOptions?: CustomElementOptions): VueElementConstructor<T extends DefineComponent<infer P, any, any, any> ? P : unknown>;
-export declare const defineSSRCustomElement: typeof defineCustomElement;
-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 _patching;
-    private _dirty;
-    private _numberProps;
-    private _styleChildren;
-    private _pendingResolve;
-    private _parent;
-    /**
-     * dev only
-     */
-    private _styles?;
-    /**
-     * dev only
-     */
-    private _childStyles?;
-    private _ob?;
-    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;
-    private _inheritParentContext;
-    disconnectedCallback(): void;
-    private _processMutations;
-    /**
-     * resolve inner component definition (handle possible async component)
-     */
-    private _resolveDef;
-    private _mount;
-    private _resolveProps;
-    protected _setAttr(key: string): void;
-    private _update;
-    private _createVNode;
-    private _applyStyles;
-    /**
-     * Only called when shadowRoot is false
-     */
-    private _parseSlots;
-    /**
-     * Only called when shadowRoot 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;
-
-export declare function useCssModule(name?: string): Record<string, string>;
-
-/**
- * Runtime helper for SFC's CSS variable injection feature.
- * @private
- */
-export declare function useCssVars(getter: (ctx: any) => Record<string, unknown>): void;
-
 export interface CSSProperties extends CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number> {
     /**
      * The index signature was removed to enable closed typing for style
@@ -391,9 +291,10 @@ export interface AriaAttributes {
     'aria-valuetext'?: string | undefined;
 }
 export type StyleValue = false | null | undefined | string | CSSProperties | Array<StyleValue>;
+export type ClassValue = false | null | undefined | string | Record<string, any> | Array<ClassValue>;
 export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
     innerHTML?: string | undefined;
-    class?: any;
+    class?: ClassValue | undefined;
     style?: StyleValue | undefined;
     accesskey?: string | undefined;
     contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined;
@@ -867,7 +768,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
      * SVG Styling Attributes
      * @see https://www.w3.org/TR/SVG/styling.html#ElementSpecificStyling
      */
-    class?: any;
+    class?: ClassValue | undefined;
     style?: StyleValue | undefined;
     color?: string | undefined;
     height?: Numberish | undefined;
@@ -1407,6 +1308,109 @@ export type NativeElements = {
     [K in keyof IntrinsicElementAttributes]: IntrinsicElementAttributes[K] & ReservedProps;
 };
 
+export type VueElementConstructor<P = {}> = {
+    new (initialProps?: Record<string, any>): VueElement & P;
+};
+export interface CustomElementOptions {
+    styles?: string[];
+    shadowRoot?: boolean;
+    shadowRootOptions?: Omit<ShadowRootInit, 'mode'>;
+    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'> & CustomElementOptions & {
+    props?: ComponentObjectPropsOptions<Props>;
+}): VueElementConstructor<Props>;
+export declare function defineCustomElement<RuntimePropsOptions extends ComponentObjectPropsOptions = ComponentObjectPropsOptions, PropsKeys extends string = string, RuntimeEmitsOptions extends EmitsOptions = {}, EmitsKeys extends string = string, Data = {}, SetupBindings = {}, Computed extends ComputedOptions = {}, Methods extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, InjectOptions extends ComponentInjectOptions = {}, InjectKeys extends string = string, Slots extends SlotsType = {}, LocalComponents extends Record<string, Component> = {}, Directives extends Record<string, Directive> = {}, Exposed extends string = string, Provide extends ComponentProvideOptions = ComponentProvideOptions, InferredProps = string extends PropsKeys ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : {
+    [key in PropsKeys]?: any;
+}, 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>>, extraOptions?: CustomElementOptions): VueElementConstructor<ResolvedProps>;
+export declare function defineCustomElement<T extends {
+    new (...args: any[]): ComponentPublicInstance<any>;
+}>(options: T, extraOptions?: CustomElementOptions): VueElementConstructor<T extends DefineComponent<infer P, any, any, any> ? P : unknown>;
+export declare const defineSSRCustomElement: typeof defineCustomElement;
+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 _patching;
+    private _dirty;
+    private _numberProps;
+    private _styleChildren;
+    private _pendingResolve;
+    private _parent;
+    private _styleAnchors;
+    /**
+     * dev only
+     */
+    private _styles?;
+    /**
+     * dev only
+     */
+    private _childStyles?;
+    private _ob?;
+    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;
+    private _inheritParentContext;
+    disconnectedCallback(): void;
+    private _processMutations;
+    /**
+     * resolve inner component definition (handle possible async component)
+     */
+    private _resolveDef;
+    private _mount;
+    private _resolveProps;
+    protected _setAttr(key: string): void;
+    private _update;
+    private _createVNode;
+    private _applyStyles;
+    private _getStyleAnchor;
+    private _getRootStyleInsertionAnchor;
+    /**
+     * Only called when shadowRoot is false
+     */
+    private _parseSlots;
+    /**
+     * Only called when shadowRoot 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;
+
+export declare function useCssModule(name?: string): Record<string, string>;
+
+/**
+ * Runtime helper for SFC's CSS variable injection feature.
+ * @private
+ */
+export declare function useCssVars(getter: (ctx: any) => Record<string, unknown>): void;
+
 /**
  * This is a stub implementation to prevent the need to use dom types.
  *
@@ -1421,6 +1425,10 @@ declare module '@vue/reactivity' {
     }
 }
 declare module '@vue/runtime-core' {
+    interface AllowedAttrs {
+        class?: ClassValue;
+        style?: StyleValue;
+    }
     interface GlobalComponents {
         Transition: DefineComponent<TransitionProps>;
         TransitionGroup: DefineComponent<TransitionGroupProps>;