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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/runtime-dom v3.5.0-alpha.5
2
+ * @vue/runtime-dom v3.5.0-beta.2
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -10,6 +10,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
10
10
  var runtimeCore = require('@vue/runtime-core');
11
11
  var shared = require('@vue/shared');
12
12
 
13
+ let policy = void 0;
14
+ const tt = typeof window !== "undefined" && window.trustedTypes;
15
+ if (tt) {
16
+ try {
17
+ policy = /* @__PURE__ */ tt.createPolicy("vue", {
18
+ createHTML: (val) => val
19
+ });
20
+ } catch (e) {
21
+ }
22
+ }
23
+ const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
13
24
  const svgNS = "http://www.w3.org/2000/svg";
14
25
  const mathmlNS = "http://www.w3.org/1998/Math/MathML";
15
26
  const doc = typeof document !== "undefined" ? document : null;
@@ -57,7 +68,9 @@ const nodeOps = {
57
68
  if (start === end || !(start = start.nextSibling)) break;
58
69
  }
59
70
  } else {
60
- templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
71
+ templateContainer.innerHTML = unsafeToTrustedHTML(
72
+ namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
73
+ );
61
74
  const template = templateContainer.content;
62
75
  if (namespace === "svg" || namespace === "mathml") {
63
76
  const wrapper = template.firstChild;
@@ -694,16 +707,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
694
707
  if (isNativeOn(key) && shared.isString(value)) {
695
708
  return false;
696
709
  }
697
- return key in el;
710
+ if (key in el) {
711
+ return true;
712
+ }
713
+ if (el._isVueCE && (/[A-Z]/.test(key) || !shared.isString(value))) {
714
+ return true;
715
+ }
716
+ return false;
698
717
  }
699
718
 
719
+ const REMOVAL = {};
700
720
  /*! #__NO_SIDE_EFFECTS__ */
701
721
  // @__NO_SIDE_EFFECTS__
702
- function defineCustomElement(options, extraOptions, hydrate2) {
722
+ function defineCustomElement(options, extraOptions, _createApp) {
703
723
  const Comp = runtimeCore.defineComponent(options, extraOptions);
724
+ if (shared.isPlainObject(Comp)) shared.extend(Comp, extraOptions);
704
725
  class VueCustomElement extends VueElement {
705
726
  constructor(initialProps) {
706
- super(Comp, initialProps, hydrate2);
727
+ super(Comp, initialProps, _createApp);
707
728
  }
708
729
  }
709
730
  VueCustomElement.def = Comp;
@@ -711,42 +732,82 @@ function defineCustomElement(options, extraOptions, hydrate2) {
711
732
  }
712
733
  /*! #__NO_SIDE_EFFECTS__ */
713
734
  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
714
- return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
735
+ return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
715
736
  };
716
737
  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
717
738
  };
718
739
  class VueElement extends BaseClass {
719
- constructor(_def, _props = {}, hydrate2) {
740
+ constructor(_def, _props = {}, _createApp = createApp) {
720
741
  super();
721
742
  this._def = _def;
722
743
  this._props = _props;
744
+ this._createApp = _createApp;
745
+ this._isVueCE = true;
723
746
  /**
724
747
  * @internal
725
748
  */
726
749
  this._instance = null;
750
+ /**
751
+ * @internal
752
+ */
753
+ this._app = null;
754
+ /**
755
+ * @internal
756
+ */
757
+ this._nonce = this._def.nonce;
727
758
  this._connected = false;
728
759
  this._resolved = false;
729
760
  this._numberProps = null;
761
+ this._styleChildren = /* @__PURE__ */ new WeakSet();
730
762
  this._ob = null;
731
- if (this.shadowRoot && hydrate2) {
732
- hydrate2(this._createVNode(), this.shadowRoot);
763
+ if (this.shadowRoot && _createApp !== createApp) {
764
+ this._root = this.shadowRoot;
733
765
  } else {
734
- this.attachShadow({ mode: "open" });
735
- if (!this._def.__asyncLoader) {
736
- this._resolveProps(this._def);
766
+ if (_def.shadowRoot !== false) {
767
+ this.attachShadow({ mode: "open" });
768
+ this._root = this.shadowRoot;
769
+ } else {
770
+ this._root = this;
737
771
  }
738
772
  }
773
+ if (!this._def.__asyncLoader) {
774
+ this._resolveProps(this._def);
775
+ }
739
776
  }
740
777
  connectedCallback() {
778
+ if (!this.shadowRoot) {
779
+ this._parseSlots();
780
+ }
741
781
  this._connected = true;
782
+ let parent = this;
783
+ while (parent = parent && (parent.parentNode || parent.host)) {
784
+ if (parent instanceof VueElement) {
785
+ this._parent = parent;
786
+ break;
787
+ }
788
+ }
742
789
  if (!this._instance) {
743
790
  if (this._resolved) {
791
+ this._setParent();
744
792
  this._update();
745
793
  } else {
746
- this._resolveDef();
794
+ if (parent && parent._pendingResolve) {
795
+ this._pendingResolve = parent._pendingResolve.then(() => {
796
+ this._pendingResolve = void 0;
797
+ this._resolveDef();
798
+ });
799
+ } else {
800
+ this._resolveDef();
801
+ }
747
802
  }
748
803
  }
749
804
  }
805
+ _setParent(parent = this._parent) {
806
+ if (parent) {
807
+ this._instance.parent = parent._instance;
808
+ this._instance.provides = parent._instance.provides;
809
+ }
810
+ }
750
811
  disconnectedCallback() {
751
812
  this._connected = false;
752
813
  runtimeCore.nextTick(() => {
@@ -755,8 +816,9 @@ class VueElement extends BaseClass {
755
816
  this._ob.disconnect();
756
817
  this._ob = null;
757
818
  }
758
- render(null, this.shadowRoot);
759
- this._instance = null;
819
+ this._app && this._app.unmount();
820
+ this._instance.ce = void 0;
821
+ this._app = this._instance = null;
760
822
  }
761
823
  });
762
824
  }
@@ -764,7 +826,9 @@ class VueElement extends BaseClass {
764
826
  * resolve inner component definition (handle possible async component)
765
827
  */
766
828
  _resolveDef() {
767
- this._resolved = true;
829
+ if (this._pendingResolve) {
830
+ return;
831
+ }
768
832
  for (let i = 0; i < this.attributes.length; i++) {
769
833
  this._setAttr(this.attributes[i].name);
770
834
  }
@@ -775,6 +839,8 @@ class VueElement extends BaseClass {
775
839
  });
776
840
  this._ob.observe(this, { attributes: true });
777
841
  const resolve = (def, isAsync = false) => {
842
+ this._resolved = true;
843
+ this._pendingResolve = void 0;
778
844
  const { props, styles } = def;
779
845
  let numberProps;
780
846
  if (props && !shared.isArray(props)) {
@@ -792,22 +858,44 @@ class VueElement extends BaseClass {
792
858
  if (isAsync) {
793
859
  this._resolveProps(def);
794
860
  }
795
- this._applyStyles(styles);
796
- this._update();
861
+ if (this.shadowRoot) {
862
+ this._applyStyles(styles);
863
+ }
864
+ this._mount(def);
797
865
  };
798
866
  const asyncDef = this._def.__asyncLoader;
799
867
  if (asyncDef) {
800
- asyncDef().then((def) => resolve(def, true));
868
+ this._pendingResolve = asyncDef().then(
869
+ (def) => resolve(this._def = def, true)
870
+ );
801
871
  } else {
802
872
  resolve(this._def);
803
873
  }
804
874
  }
875
+ _mount(def) {
876
+ this._app = this._createApp(def);
877
+ if (def.configureApp) {
878
+ def.configureApp(this._app);
879
+ }
880
+ this._app._ceVNode = this._createVNode();
881
+ this._app.mount(this._root);
882
+ const exposed = this._instance && this._instance.exposed;
883
+ if (!exposed) return;
884
+ for (const key in exposed) {
885
+ if (!shared.hasOwn(this, key)) {
886
+ Object.defineProperty(this, key, {
887
+ // unwrap ref to be consistent with public instance behavior
888
+ get: () => runtimeCore.unref(exposed[key])
889
+ });
890
+ }
891
+ }
892
+ }
805
893
  _resolveProps(def) {
806
894
  const { props } = def;
807
895
  const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
808
896
  for (const key of Object.keys(this)) {
809
897
  if (key[0] !== "_" && declaredPropKeys.includes(key)) {
810
- this._setProp(key, this[key], true, false);
898
+ this._setProp(key, this[key]);
811
899
  }
812
900
  }
813
901
  for (const key of declaredPropKeys.map(shared.camelize)) {
@@ -816,18 +904,20 @@ class VueElement extends BaseClass {
816
904
  return this._getProp(key);
817
905
  },
818
906
  set(val) {
819
- this._setProp(key, val);
907
+ this._setProp(key, val, true, true);
820
908
  }
821
909
  });
822
910
  }
823
911
  }
824
912
  _setAttr(key) {
825
- let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
913
+ if (key.startsWith("data-v-")) return;
914
+ const has = this.hasAttribute(key);
915
+ let value = has ? this.getAttribute(key) : REMOVAL;
826
916
  const camelKey = shared.camelize(key);
827
- if (this._numberProps && this._numberProps[camelKey]) {
917
+ if (has && this._numberProps && this._numberProps[camelKey]) {
828
918
  value = shared.toNumber(value);
829
919
  }
830
- this._setProp(camelKey, value, false);
920
+ this._setProp(camelKey, value, false, true);
831
921
  }
832
922
  /**
833
923
  * @internal
@@ -838,9 +928,13 @@ class VueElement extends BaseClass {
838
928
  /**
839
929
  * @internal
840
930
  */
841
- _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
931
+ _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
842
932
  if (val !== this._props[key]) {
843
- this._props[key] = val;
933
+ if (val === REMOVAL) {
934
+ delete this._props[key];
935
+ } else {
936
+ this._props[key] = val;
937
+ }
844
938
  if (shouldUpdate && this._instance) {
845
939
  this._update();
846
940
  }
@@ -856,19 +950,25 @@ class VueElement extends BaseClass {
856
950
  }
857
951
  }
858
952
  _update() {
859
- render(this._createVNode(), this.shadowRoot);
953
+ render(this._createVNode(), this._root);
860
954
  }
861
955
  _createVNode() {
862
- const vnode = runtimeCore.createVNode(this._def, shared.extend({}, this._props));
956
+ const baseProps = {};
957
+ if (!this.shadowRoot) {
958
+ baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
959
+ }
960
+ const vnode = runtimeCore.createVNode(this._def, shared.extend(baseProps, this._props));
863
961
  if (!this._instance) {
864
962
  vnode.ce = (instance) => {
865
963
  this._instance = instance;
964
+ instance.ce = this;
866
965
  instance.isCE = true;
867
966
  const dispatch = (event, args) => {
868
967
  this.dispatchEvent(
869
- new CustomEvent(event, {
870
- detail: args
871
- })
968
+ new CustomEvent(
969
+ event,
970
+ shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
971
+ )
872
972
  );
873
973
  };
874
974
  instance.emit = (event, ...args) => {
@@ -877,27 +977,92 @@ class VueElement extends BaseClass {
877
977
  dispatch(shared.hyphenate(event), args);
878
978
  }
879
979
  };
880
- let parent = this;
881
- while (parent = parent && (parent.parentNode || parent.host)) {
882
- if (parent instanceof VueElement) {
883
- instance.parent = parent._instance;
884
- instance.provides = parent._instance.provides;
885
- break;
886
- }
887
- }
980
+ this._setParent();
888
981
  };
889
982
  }
890
983
  return vnode;
891
984
  }
892
- _applyStyles(styles) {
893
- if (styles) {
894
- styles.forEach((css) => {
895
- const s = document.createElement("style");
896
- s.textContent = css;
897
- this.shadowRoot.appendChild(s);
898
- });
985
+ _applyStyles(styles, owner) {
986
+ if (!styles) return;
987
+ if (owner) {
988
+ if (owner === this._def || this._styleChildren.has(owner)) {
989
+ return;
990
+ }
991
+ this._styleChildren.add(owner);
992
+ }
993
+ const nonce = this._nonce;
994
+ for (let i = styles.length - 1; i >= 0; i--) {
995
+ const s = document.createElement("style");
996
+ if (nonce) s.setAttribute("nonce", nonce);
997
+ s.textContent = styles[i];
998
+ this.shadowRoot.prepend(s);
899
999
  }
900
1000
  }
1001
+ /**
1002
+ * Only called when shaddowRoot is false
1003
+ */
1004
+ _parseSlots() {
1005
+ const slots = this._slots = {};
1006
+ let n;
1007
+ while (n = this.firstChild) {
1008
+ const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
1009
+ (slots[slotName] || (slots[slotName] = [])).push(n);
1010
+ this.removeChild(n);
1011
+ }
1012
+ }
1013
+ /**
1014
+ * Only called when shaddowRoot is false
1015
+ */
1016
+ _renderSlots() {
1017
+ const outlets = this.querySelectorAll("slot");
1018
+ const scopeId = this._instance.type.__scopeId;
1019
+ for (let i = 0; i < outlets.length; i++) {
1020
+ const o = outlets[i];
1021
+ const slotName = o.getAttribute("name") || "default";
1022
+ const content = this._slots[slotName];
1023
+ const parent = o.parentNode;
1024
+ if (content) {
1025
+ for (const n of content) {
1026
+ if (scopeId && n.nodeType === 1) {
1027
+ const id = scopeId + "-s";
1028
+ const walker = document.createTreeWalker(n, 1);
1029
+ n.setAttribute(id, "");
1030
+ let child;
1031
+ while (child = walker.nextNode()) {
1032
+ child.setAttribute(id, "");
1033
+ }
1034
+ }
1035
+ parent.insertBefore(n, o);
1036
+ }
1037
+ } else {
1038
+ while (o.firstChild) parent.insertBefore(o.firstChild, o);
1039
+ }
1040
+ parent.removeChild(o);
1041
+ }
1042
+ }
1043
+ /**
1044
+ * @internal
1045
+ */
1046
+ _injectChildStyle(comp) {
1047
+ this._applyStyles(comp.styles, comp);
1048
+ }
1049
+ /**
1050
+ * @internal
1051
+ */
1052
+ _removeChildStyle(comp) {
1053
+ }
1054
+ }
1055
+ function useHost(caller) {
1056
+ const instance = runtimeCore.getCurrentInstance();
1057
+ const el = instance && instance.ce;
1058
+ if (el) {
1059
+ return el;
1060
+ }
1061
+ return null;
1062
+ }
1063
+ function useShadowRoot() {
1064
+ const el = useHost();
1065
+ return el && el.shadowRoot;
901
1066
  }
902
1067
 
903
1068
  function useCssModule(name = "$style") {
@@ -1400,7 +1565,9 @@ const createApp = (...args) => {
1400
1565
  if (!shared.isFunction(component) && !component.render && !component.template) {
1401
1566
  component.template = container.innerHTML;
1402
1567
  }
1403
- container.innerHTML = "";
1568
+ if (container.nodeType === 1) {
1569
+ container.textContent = "";
1570
+ }
1404
1571
  const proxy = mount(container, false, resolveRootNamespace(container));
1405
1572
  if (container instanceof Element) {
1406
1573
  container.removeAttribute("v-cloak");
@@ -1457,6 +1624,8 @@ exports.initDirectivesForSSR = initDirectivesForSSR;
1457
1624
  exports.render = render;
1458
1625
  exports.useCssModule = useCssModule;
1459
1626
  exports.useCssVars = useCssVars;
1627
+ exports.useHost = useHost;
1628
+ exports.useShadowRoot = useShadowRoot;
1460
1629
  exports.vModelCheckbox = vModelCheckbox;
1461
1630
  exports.vModelDynamic = vModelDynamic;
1462
1631
  exports.vModelRadio = vModelRadio;
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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';
2
2
  export * from '@vue/runtime-core';
3
3
  import * as CSS from 'csstype';
4
4
 
@@ -29,8 +29,10 @@ export type TransitionGroupProps = Omit<TransitionProps, 'mode'> & {
29
29
  tag?: string;
30
30
  moveClass?: string;
31
31
  };
32
- export declare const TransitionGroup: new () => {
33
- $props: TransitionGroupProps;
32
+ export declare const TransitionGroup: {
33
+ new (): {
34
+ $props: TransitionGroupProps;
35
+ };
34
36
  };
35
37
 
36
38
  declare const vShowOriginalDisplay: unique symbol;
@@ -47,20 +49,7 @@ declare const systemModifiers: readonly ["ctrl", "shift", "alt", "meta"];
47
49
  type SystemModifiers = (typeof systemModifiers)[number];
48
50
  type CompatModifiers = keyof typeof keyNames;
49
51
  type VOnModifiers = SystemModifiers | ModifierGuards | CompatModifiers;
50
- declare const modifierGuards: {
51
- stop: (e: Event) => void;
52
- prevent: (e: Event) => void;
53
- self: (e: Event) => boolean;
54
- ctrl: (e: Event) => boolean;
55
- shift: (e: Event) => boolean;
56
- alt: (e: Event) => boolean;
57
- meta: (e: Event) => boolean;
58
- left: (e: Event) => boolean;
59
- middle: (e: Event) => boolean;
60
- right: (e: Event) => boolean;
61
- exact: (e: Event, modifiers: string[]) => boolean;
62
- };
63
- type ModifierGuards = keyof typeof modifierGuards;
52
+ type ModifierGuards = 'shift' | 'ctrl' | 'alt' | 'meta' | 'left' | 'right' | 'stop' | 'prevent' | 'self' | 'middle' | 'exact';
64
53
  /**
65
54
  * @private
66
55
  */
@@ -69,15 +58,7 @@ export declare const withModifiers: <T extends (event: Event, ...args: unknown[]
69
58
  [key: string]: T;
70
59
  };
71
60
  }, modifiers: VOnModifiers[]) => T;
72
- declare const keyNames: {
73
- esc: string;
74
- space: string;
75
- up: string;
76
- left: string;
77
- right: string;
78
- down: string;
79
- delete: string;
80
- };
61
+ declare const keyNames: Record<'esc' | 'space' | 'up' | 'left' | 'right' | 'down' | 'delete', string>;
81
62
  /**
82
63
  * @private
83
64
  */
@@ -104,49 +85,88 @@ type VModelDirective = typeof vModelText | typeof vModelCheckbox | typeof vModel
104
85
  export type VueElementConstructor<P = {}> = {
105
86
  new (initialProps?: Record<string, any>): VueElement & P;
106
87
  };
107
- export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & {
88
+ export interface CustomElementOptions {
89
+ styles?: string[];
90
+ shadowRoot?: boolean;
91
+ nonce?: string;
92
+ configureApp?: (app: App) => void;
93
+ }
94
+ export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
108
95
  props?: (keyof Props)[];
109
96
  }): VueElementConstructor<Props>;
110
- export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & {
97
+ export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
111
98
  props?: ComponentObjectPropsOptions<Props>;
112
99
  }): VueElementConstructor<Props>;
113
100
  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> : {
114
101
  [key in PropsKeys]?: any;
115
- }, ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>>(options: {
102
+ }, ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>>(options: CustomElementOptions & {
116
103
  props?: (RuntimePropsOptions & ThisType<void>) | PropsKeys[];
117
104
  } & ComponentOptionsBase<ResolvedProps, SetupBindings, Data, Computed, Methods, Mixin, Extends, RuntimeEmitsOptions, EmitsKeys, {}, // Defaults
118
- 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>;
119
- export declare function defineCustomElement<P>(options: DefineComponent<P, any, any, any>): VueElementConstructor<ExtractPropTypes<P>>;
105
+ 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>;
106
+ 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>;
120
107
  /*! #__NO_SIDE_EFFECTS__ */
121
108
  export declare const defineSSRCustomElement: typeof defineCustomElement;
122
- declare const BaseClass: {
123
- new (): HTMLElement;
124
- prototype: HTMLElement;
125
- };
126
- type InnerComponentDef = ConcreteComponent & {
127
- styles?: string[];
128
- };
129
- export declare class VueElement extends BaseClass {
109
+ declare const BaseClass: typeof HTMLElement;
110
+ type InnerComponentDef = ConcreteComponent & CustomElementOptions;
111
+ export declare class VueElement extends BaseClass implements ComponentCustomElementInterface {
112
+ /**
113
+ * Component def - note this may be an AsyncWrapper, and this._def will
114
+ * be overwritten by the inner component when resolved.
115
+ */
130
116
  private _def;
131
117
  private _props;
118
+ private _createApp;
119
+ _isVueCE: boolean;
132
120
  private _connected;
133
121
  private _resolved;
134
122
  private _numberProps;
123
+ private _styleChildren;
124
+ private _pendingResolve;
125
+ private _parent;
126
+ /**
127
+ * dev only
128
+ */
135
129
  private _styles?;
130
+ /**
131
+ * dev only
132
+ */
133
+ private _childStyles?;
136
134
  private _ob?;
137
- constructor(_def: InnerComponentDef, _props?: Record<string, any>, hydrate?: RootHydrateFunction);
135
+ private _slots?;
136
+ constructor(
137
+ /**
138
+ * Component def - note this may be an AsyncWrapper, and this._def will
139
+ * be overwritten by the inner component when resolved.
140
+ */
141
+ _def: InnerComponentDef, _props?: Record<string, any>, _createApp?: CreateAppFunction<Element>);
138
142
  connectedCallback(): void;
143
+ private _setParent;
139
144
  disconnectedCallback(): void;
140
145
  /**
141
146
  * resolve inner component definition (handle possible async component)
142
147
  */
143
148
  private _resolveDef;
149
+ private _mount;
144
150
  private _resolveProps;
145
151
  protected _setAttr(key: string): void;
146
152
  private _update;
147
153
  private _createVNode;
148
154
  private _applyStyles;
155
+ /**
156
+ * Only called when shaddowRoot is false
157
+ */
158
+ private _parseSlots;
159
+ /**
160
+ * Only called when shaddowRoot is false
161
+ */
162
+ private _renderSlots;
149
163
  }
164
+ export declare function useHost(caller?: string): VueElement | null;
165
+ /**
166
+ * Retrieve the shadowRoot of the current custom element. Only usable in setup()
167
+ * of a `defineCustomElement` component.
168
+ */
169
+ export declare function useShadowRoot(): ShadowRoot | null;
150
170
 
151
171
  export declare function useCssModule(name?: string): Record<string, string>;
152
172
 
@@ -1331,9 +1351,18 @@ export type NativeElements = {
1331
1351
  [K in keyof IntrinsicElementAttributes]: IntrinsicElementAttributes[K] & ReservedProps;
1332
1352
  };
1333
1353
 
1354
+ /**
1355
+ * This is a stub implementation to prevent the need to use dom types.
1356
+ *
1357
+ * To enable proper types, add `"dom"` to `"lib"` in your `tsconfig.json`.
1358
+ */
1359
+ type DomStub = {};
1360
+ type DomType<T> = typeof globalThis extends {
1361
+ window: unknown;
1362
+ } ? T : DomStub;
1334
1363
  declare module '@vue/reactivity' {
1335
1364
  interface RefUnwrapBailTypes {
1336
- runtimeDOMBailTypes: Node | Window;
1365
+ runtimeDOMBailTypes: DomType<Node | Window>;
1337
1366
  }
1338
1367
  }
1339
1368
  declare module '@vue/runtime-core' {