@vue/compat 3.5.28 → 3.5.30

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/compat v3.5.28
2
+ * @vue/compat v3.5.30
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -1209,10 +1209,17 @@ function apply(self, method, fn, thisArg, wrappedRetFn, args) {
1209
1209
  }
1210
1210
  function reduce(self, method, fn, args) {
1211
1211
  const arr = shallowReadArray(self);
1212
+ const needsWrap = arr !== self && !isShallow(self);
1212
1213
  let wrappedFn = fn;
1214
+ let wrapInitialAccumulator = false;
1213
1215
  if (arr !== self) {
1214
- if (!isShallow(self)) {
1216
+ if (needsWrap) {
1217
+ wrapInitialAccumulator = args.length === 0;
1215
1218
  wrappedFn = function(acc, item, index) {
1219
+ if (wrapInitialAccumulator) {
1220
+ wrapInitialAccumulator = false;
1221
+ acc = toWrapped(self, acc);
1222
+ }
1216
1223
  return fn.call(this, acc, toWrapped(self, item), index, self);
1217
1224
  };
1218
1225
  } else if (fn.length > 3) {
@@ -1221,7 +1228,8 @@ function reduce(self, method, fn, args) {
1221
1228
  };
1222
1229
  }
1223
1230
  }
1224
- return arr[method](wrappedFn, ...args);
1231
+ const result = arr[method](wrappedFn, ...args);
1232
+ return wrapInitialAccumulator ? toWrapped(self, result) : result;
1225
1233
  }
1226
1234
  function searchProxy(self, method, args) {
1227
1235
  const arr = toRaw(self);
@@ -1511,15 +1519,14 @@ function createInstrumentations(readonly, shallow) {
1511
1519
  clear: createReadonlyMethod("clear")
1512
1520
  } : {
1513
1521
  add(value) {
1514
- if (!shallow && !isShallow(value) && !isReadonly(value)) {
1515
- value = toRaw(value);
1516
- }
1517
1522
  const target = toRaw(this);
1518
1523
  const proto = getProto(target);
1519
- const hadKey = proto.has.call(target, value);
1524
+ const rawValue = toRaw(value);
1525
+ const valueToAdd = !shallow && !isShallow(value) && !isReadonly(value) ? rawValue : value;
1526
+ const hadKey = proto.has.call(target, valueToAdd) || hasChanged(value, valueToAdd) && proto.has.call(target, value) || hasChanged(rawValue, valueToAdd) && proto.has.call(target, rawValue);
1520
1527
  if (!hadKey) {
1521
- target.add(value);
1522
- trigger(target, "add", value, value);
1528
+ target.add(valueToAdd);
1529
+ trigger(target, "add", valueToAdd, valueToAdd);
1523
1530
  }
1524
1531
  return this;
1525
1532
  },
@@ -4252,6 +4259,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
4252
4259
  callHook(hook, [el]);
4253
4260
  },
4254
4261
  enter(el) {
4262
+ if (leavingVNodesCache[key] === vnode) return;
4255
4263
  let hook = onEnter;
4256
4264
  let afterHook = onAfterEnter;
4257
4265
  let cancelHook = onEnterCancelled;
@@ -6190,12 +6198,16 @@ function renderList(source, renderItem, cache, index) {
6190
6198
  );
6191
6199
  }
6192
6200
  } else if (typeof source === "number") {
6193
- if (!!(process.env.NODE_ENV !== "production") && !Number.isInteger(source)) {
6194
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6195
- }
6196
- ret = new Array(source);
6197
- for (let i = 0; i < source; i++) {
6198
- ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6201
+ if (!!(process.env.NODE_ENV !== "production") && (!Number.isInteger(source) || source < 0)) {
6202
+ warn$1(
6203
+ `The v-for range expects a positive integer value but got ${source}.`
6204
+ );
6205
+ ret = [];
6206
+ } else {
6207
+ ret = new Array(source);
6208
+ for (let i = 0; i < source; i++) {
6209
+ ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6210
+ }
6199
6211
  }
6200
6212
  } else if (isObject(source)) {
6201
6213
  if (source[Symbol.iterator]) {
@@ -6898,6 +6910,7 @@ function createPropsRestProxy(props, excludedKeys) {
6898
6910
  }
6899
6911
  function withAsyncContext(getAwaitable) {
6900
6912
  const ctx = getCurrentInstance();
6913
+ const inSSRSetup = isInSSRComponentSetup;
6901
6914
  if (!!(process.env.NODE_ENV !== "production") && !ctx) {
6902
6915
  warn$1(
6903
6916
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6905,13 +6918,36 @@ function withAsyncContext(getAwaitable) {
6905
6918
  }
6906
6919
  let awaitable = getAwaitable();
6907
6920
  unsetCurrentInstance();
6921
+ if (inSSRSetup) {
6922
+ setInSSRSetupState(false);
6923
+ }
6924
+ const restore = () => {
6925
+ setCurrentInstance(ctx);
6926
+ if (inSSRSetup) {
6927
+ setInSSRSetupState(true);
6928
+ }
6929
+ };
6930
+ const cleanup = () => {
6931
+ if (getCurrentInstance() !== ctx) ctx.scope.off();
6932
+ unsetCurrentInstance();
6933
+ if (inSSRSetup) {
6934
+ setInSSRSetupState(false);
6935
+ }
6936
+ };
6908
6937
  if (isPromise(awaitable)) {
6909
6938
  awaitable = awaitable.catch((e) => {
6910
- setCurrentInstance(ctx);
6939
+ restore();
6940
+ Promise.resolve().then(() => Promise.resolve().then(cleanup));
6911
6941
  throw e;
6912
6942
  });
6913
6943
  }
6914
- return [awaitable, () => setCurrentInstance(ctx)];
6944
+ return [
6945
+ awaitable,
6946
+ () => {
6947
+ restore();
6948
+ Promise.resolve().then(cleanup);
6949
+ }
6950
+ ];
6915
6951
  }
6916
6952
 
6917
6953
  function createDuplicateChecker() {
@@ -7434,7 +7470,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
7434
7470
  return vm;
7435
7471
  }
7436
7472
  }
7437
- Vue.version = `2.6.14-compat:${"3.5.28"}`;
7473
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7438
7474
  Vue.config = singletonApp.config;
7439
7475
  Vue.use = (plugin, ...options) => {
7440
7476
  if (plugin && isFunction(plugin.install)) {
@@ -9971,7 +10007,10 @@ function baseCreateRenderer(options, createHydrationFns) {
9971
10007
  }
9972
10008
  } else {
9973
10009
  if (root.ce && root.ce._hasShadowRoot()) {
9974
- root.ce._injectChildStyle(type);
10010
+ root.ce._injectChildStyle(
10011
+ type,
10012
+ instance.parent ? instance.parent.type : void 0
10013
+ );
9975
10014
  }
9976
10015
  if (!!(process.env.NODE_ENV !== "production")) {
9977
10016
  startMeasure(instance, `render`);
@@ -12576,7 +12615,7 @@ function isMemoSame(cached, memo) {
12576
12615
  return true;
12577
12616
  }
12578
12617
 
12579
- const version = "3.5.28";
12618
+ const version = "3.5.30";
12580
12619
  const warn = !!(process.env.NODE_ENV !== "production") ? warn$1 : NOOP;
12581
12620
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12582
12621
  const devtools = !!(process.env.NODE_ENV !== "production") || true ? devtools$1 : void 0;
@@ -13461,7 +13500,9 @@ const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) =>
13461
13500
  }
13462
13501
  } else if (
13463
13502
  // #11081 force set props for possible async custom element
13464
- el._isVueCE && (/[A-Z]/.test(key) || !isString(nextValue))
13503
+ el._isVueCE && // #12408 check if it's declared prop or it's async custom element
13504
+ (shouldSetAsPropForVueCE(el, key) || // @ts-expect-error _def is private
13505
+ el._def.__asyncLoader && (/[A-Z]/.test(key) || !isString(nextValue)))
13465
13506
  ) {
13466
13507
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13467
13508
  } else {
@@ -13509,6 +13550,17 @@ function shouldSetAsProp(el, key, value, isSVG) {
13509
13550
  }
13510
13551
  return key in el;
13511
13552
  }
13553
+ function shouldSetAsPropForVueCE(el, key) {
13554
+ const props = (
13555
+ // @ts-expect-error _def is private
13556
+ el._def.props
13557
+ );
13558
+ if (!props) {
13559
+ return false;
13560
+ }
13561
+ const camelKey = camelize(key);
13562
+ return Array.isArray(props) ? props.some((prop) => camelize(prop) === camelKey) : Object.keys(props).some((prop) => camelize(prop) === camelKey);
13563
+ }
13512
13564
 
13513
13565
  const REMOVAL = {};
13514
13566
  // @__NO_SIDE_EFFECTS__
@@ -13553,6 +13605,7 @@ class VueElement extends BaseClass {
13553
13605
  this._dirty = false;
13554
13606
  this._numberProps = null;
13555
13607
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13608
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13556
13609
  this._ob = null;
13557
13610
  if (this.shadowRoot && _createApp !== createApp) {
13558
13611
  this._root = this.shadowRoot;
@@ -13581,7 +13634,8 @@ class VueElement extends BaseClass {
13581
13634
  }
13582
13635
  this._connected = true;
13583
13636
  let parent = this;
13584
- while (parent = parent && (parent.parentNode || parent.host)) {
13637
+ while (parent = parent && // #12479 should check assignedSlot first to get correct parent
13638
+ (parent.assignedSlot || parent.parentNode || parent.host)) {
13585
13639
  if (parent instanceof VueElement) {
13586
13640
  this._parent = parent;
13587
13641
  break;
@@ -13803,6 +13857,7 @@ class VueElement extends BaseClass {
13803
13857
  this._styles.forEach((s) => this._root.removeChild(s));
13804
13858
  this._styles.length = 0;
13805
13859
  }
13860
+ this._styleAnchors.delete(this._def);
13806
13861
  this._applyStyles(newStyles);
13807
13862
  this._instance = null;
13808
13863
  this._update();
@@ -13827,7 +13882,7 @@ class VueElement extends BaseClass {
13827
13882
  }
13828
13883
  return vnode;
13829
13884
  }
13830
- _applyStyles(styles, owner) {
13885
+ _applyStyles(styles, owner, parentComp) {
13831
13886
  if (!styles) return;
13832
13887
  if (owner) {
13833
13888
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13836,11 +13891,19 @@ class VueElement extends BaseClass {
13836
13891
  this._styleChildren.add(owner);
13837
13892
  }
13838
13893
  const nonce = this._nonce;
13894
+ const root = this.shadowRoot;
13895
+ const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
13896
+ let last = null;
13839
13897
  for (let i = styles.length - 1; i >= 0; i--) {
13840
13898
  const s = document.createElement("style");
13841
13899
  if (nonce) s.setAttribute("nonce", nonce);
13842
13900
  s.textContent = styles[i];
13843
- this.shadowRoot.prepend(s);
13901
+ root.insertBefore(s, last || insertionAnchor);
13902
+ last = s;
13903
+ if (i === 0) {
13904
+ if (!parentComp) this._styleAnchors.set(this._def, s);
13905
+ if (owner) this._styleAnchors.set(owner, s);
13906
+ }
13844
13907
  if (!!(process.env.NODE_ENV !== "production")) {
13845
13908
  if (owner) {
13846
13909
  if (owner.__hmrId) {
@@ -13857,6 +13920,28 @@ class VueElement extends BaseClass {
13857
13920
  }
13858
13921
  }
13859
13922
  }
13923
+ _getStyleAnchor(comp) {
13924
+ if (!comp) {
13925
+ return null;
13926
+ }
13927
+ const anchor = this._styleAnchors.get(comp);
13928
+ if (anchor && anchor.parentNode === this.shadowRoot) {
13929
+ return anchor;
13930
+ }
13931
+ if (anchor) {
13932
+ this._styleAnchors.delete(comp);
13933
+ }
13934
+ return null;
13935
+ }
13936
+ _getRootStyleInsertionAnchor(root) {
13937
+ for (let i = 0; i < root.childNodes.length; i++) {
13938
+ const node = root.childNodes[i];
13939
+ if (!(node instanceof HTMLStyleElement)) {
13940
+ return node;
13941
+ }
13942
+ }
13943
+ return null;
13944
+ }
13860
13945
  /**
13861
13946
  * Only called when shadowRoot is false
13862
13947
  */
@@ -13919,8 +14004,8 @@ class VueElement extends BaseClass {
13919
14004
  /**
13920
14005
  * @internal
13921
14006
  */
13922
- _injectChildStyle(comp) {
13923
- this._applyStyles(comp.styles, comp);
14007
+ _injectChildStyle(comp, parentComp) {
14008
+ this._applyStyles(comp.styles, comp, parentComp);
13924
14009
  }
13925
14010
  /**
13926
14011
  * @internal
@@ -13950,6 +14035,7 @@ class VueElement extends BaseClass {
13950
14035
  _removeChildStyle(comp) {
13951
14036
  if (!!(process.env.NODE_ENV !== "production")) {
13952
14037
  this._styleChildren.delete(comp);
14038
+ this._styleAnchors.delete(comp);
13953
14039
  if (this._childStyles && comp.__hmrId) {
13954
14040
  const oldStyles = this._childStyles.get(comp.__hmrId);
13955
14041
  if (oldStyles) {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/compat v3.5.28
2
+ * @vue/compat v3.5.30
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -1208,10 +1208,17 @@ var Vue = (function () {
1208
1208
  }
1209
1209
  function reduce(self, method, fn, args) {
1210
1210
  const arr = shallowReadArray(self);
1211
+ const needsWrap = arr !== self && !isShallow(self);
1211
1212
  let wrappedFn = fn;
1213
+ let wrapInitialAccumulator = false;
1212
1214
  if (arr !== self) {
1213
- if (!isShallow(self)) {
1215
+ if (needsWrap) {
1216
+ wrapInitialAccumulator = args.length === 0;
1214
1217
  wrappedFn = function(acc, item, index) {
1218
+ if (wrapInitialAccumulator) {
1219
+ wrapInitialAccumulator = false;
1220
+ acc = toWrapped(self, acc);
1221
+ }
1215
1222
  return fn.call(this, acc, toWrapped(self, item), index, self);
1216
1223
  };
1217
1224
  } else if (fn.length > 3) {
@@ -1220,7 +1227,8 @@ var Vue = (function () {
1220
1227
  };
1221
1228
  }
1222
1229
  }
1223
- return arr[method](wrappedFn, ...args);
1230
+ const result = arr[method](wrappedFn, ...args);
1231
+ return wrapInitialAccumulator ? toWrapped(self, result) : result;
1224
1232
  }
1225
1233
  function searchProxy(self, method, args) {
1226
1234
  const arr = toRaw(self);
@@ -1510,15 +1518,14 @@ var Vue = (function () {
1510
1518
  clear: createReadonlyMethod("clear")
1511
1519
  } : {
1512
1520
  add(value) {
1513
- if (!shallow && !isShallow(value) && !isReadonly(value)) {
1514
- value = toRaw(value);
1515
- }
1516
1521
  const target = toRaw(this);
1517
1522
  const proto = getProto(target);
1518
- const hadKey = proto.has.call(target, value);
1523
+ const rawValue = toRaw(value);
1524
+ const valueToAdd = !shallow && !isShallow(value) && !isReadonly(value) ? rawValue : value;
1525
+ const hadKey = proto.has.call(target, valueToAdd) || hasChanged(value, valueToAdd) && proto.has.call(target, value) || hasChanged(rawValue, valueToAdd) && proto.has.call(target, rawValue);
1519
1526
  if (!hadKey) {
1520
- target.add(value);
1521
- trigger(target, "add", value, value);
1527
+ target.add(valueToAdd);
1528
+ trigger(target, "add", valueToAdd, valueToAdd);
1522
1529
  }
1523
1530
  return this;
1524
1531
  },
@@ -4208,6 +4215,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
4208
4215
  callHook(hook, [el]);
4209
4216
  },
4210
4217
  enter(el) {
4218
+ if (leavingVNodesCache[key] === vnode) return;
4211
4219
  let hook = onEnter;
4212
4220
  let afterHook = onAfterEnter;
4213
4221
  let cancelHook = onEnterCancelled;
@@ -6129,12 +6137,16 @@ If this is a native custom element, make sure to exclude it from component resol
6129
6137
  );
6130
6138
  }
6131
6139
  } else if (typeof source === "number") {
6132
- if (!Number.isInteger(source)) {
6133
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6134
- }
6135
- ret = new Array(source);
6136
- for (let i = 0; i < source; i++) {
6137
- ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6140
+ if (!Number.isInteger(source) || source < 0) {
6141
+ warn$1(
6142
+ `The v-for range expects a positive integer value but got ${source}.`
6143
+ );
6144
+ ret = [];
6145
+ } else {
6146
+ ret = new Array(source);
6147
+ for (let i = 0; i < source; i++) {
6148
+ ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6149
+ }
6138
6150
  }
6139
6151
  } else if (isObject(source)) {
6140
6152
  if (source[Symbol.iterator]) {
@@ -6837,6 +6849,7 @@ If this is a native custom element, make sure to exclude it from component resol
6837
6849
  }
6838
6850
  function withAsyncContext(getAwaitable) {
6839
6851
  const ctx = getCurrentInstance();
6852
+ const inSSRSetup = isInSSRComponentSetup;
6840
6853
  if (!ctx) {
6841
6854
  warn$1(
6842
6855
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6844,13 +6857,36 @@ If this is a native custom element, make sure to exclude it from component resol
6844
6857
  }
6845
6858
  let awaitable = getAwaitable();
6846
6859
  unsetCurrentInstance();
6860
+ if (inSSRSetup) {
6861
+ setInSSRSetupState(false);
6862
+ }
6863
+ const restore = () => {
6864
+ setCurrentInstance(ctx);
6865
+ if (inSSRSetup) {
6866
+ setInSSRSetupState(true);
6867
+ }
6868
+ };
6869
+ const cleanup = () => {
6870
+ if (getCurrentInstance() !== ctx) ctx.scope.off();
6871
+ unsetCurrentInstance();
6872
+ if (inSSRSetup) {
6873
+ setInSSRSetupState(false);
6874
+ }
6875
+ };
6847
6876
  if (isPromise(awaitable)) {
6848
6877
  awaitable = awaitable.catch((e) => {
6849
- setCurrentInstance(ctx);
6878
+ restore();
6879
+ Promise.resolve().then(() => Promise.resolve().then(cleanup));
6850
6880
  throw e;
6851
6881
  });
6852
6882
  }
6853
- return [awaitable, () => setCurrentInstance(ctx)];
6883
+ return [
6884
+ awaitable,
6885
+ () => {
6886
+ restore();
6887
+ Promise.resolve().then(cleanup);
6888
+ }
6889
+ ];
6854
6890
  }
6855
6891
 
6856
6892
  function createDuplicateChecker() {
@@ -7368,7 +7404,7 @@ If this is a native custom element, make sure to exclude it from component resol
7368
7404
  return vm;
7369
7405
  }
7370
7406
  }
7371
- Vue.version = `2.6.14-compat:${"3.5.28"}`;
7407
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7372
7408
  Vue.config = singletonApp.config;
7373
7409
  Vue.use = (plugin, ...options) => {
7374
7410
  if (plugin && isFunction(plugin.install)) {
@@ -9865,7 +9901,10 @@ If you want to remount the same app, move your app creation logic into a factory
9865
9901
  }
9866
9902
  } else {
9867
9903
  if (root.ce && root.ce._hasShadowRoot()) {
9868
- root.ce._injectChildStyle(type);
9904
+ root.ce._injectChildStyle(
9905
+ type,
9906
+ instance.parent ? instance.parent.type : void 0
9907
+ );
9869
9908
  }
9870
9909
  {
9871
9910
  startMeasure(instance, `render`);
@@ -12442,7 +12481,7 @@ Component that was made reactive: `,
12442
12481
  return true;
12443
12482
  }
12444
12483
 
12445
- const version = "3.5.28";
12484
+ const version = "3.5.30";
12446
12485
  const warn = warn$1 ;
12447
12486
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12448
12487
  const devtools = devtools$1 ;
@@ -13308,7 +13347,9 @@ Expected function or array of functions, received type ${typeof value}.`
13308
13347
  }
13309
13348
  } else if (
13310
13349
  // #11081 force set props for possible async custom element
13311
- el._isVueCE && (/[A-Z]/.test(key) || !isString(nextValue))
13350
+ el._isVueCE && // #12408 check if it's declared prop or it's async custom element
13351
+ (shouldSetAsPropForVueCE(el, key) || // @ts-expect-error _def is private
13352
+ el._def.__asyncLoader && (/[A-Z]/.test(key) || !isString(nextValue)))
13312
13353
  ) {
13313
13354
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13314
13355
  } else {
@@ -13356,6 +13397,17 @@ Expected function or array of functions, received type ${typeof value}.`
13356
13397
  }
13357
13398
  return key in el;
13358
13399
  }
13400
+ function shouldSetAsPropForVueCE(el, key) {
13401
+ const props = (
13402
+ // @ts-expect-error _def is private
13403
+ el._def.props
13404
+ );
13405
+ if (!props) {
13406
+ return false;
13407
+ }
13408
+ const camelKey = camelize(key);
13409
+ return Array.isArray(props) ? props.some((prop) => camelize(prop) === camelKey) : Object.keys(props).some((prop) => camelize(prop) === camelKey);
13410
+ }
13359
13411
 
13360
13412
  const REMOVAL = {};
13361
13413
  // @__NO_SIDE_EFFECTS__
@@ -13400,6 +13452,7 @@ Expected function or array of functions, received type ${typeof value}.`
13400
13452
  this._dirty = false;
13401
13453
  this._numberProps = null;
13402
13454
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13455
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13403
13456
  this._ob = null;
13404
13457
  if (this.shadowRoot && _createApp !== createApp) {
13405
13458
  this._root = this.shadowRoot;
@@ -13428,7 +13481,8 @@ Expected function or array of functions, received type ${typeof value}.`
13428
13481
  }
13429
13482
  this._connected = true;
13430
13483
  let parent = this;
13431
- while (parent = parent && (parent.parentNode || parent.host)) {
13484
+ while (parent = parent && // #12479 should check assignedSlot first to get correct parent
13485
+ (parent.assignedSlot || parent.parentNode || parent.host)) {
13432
13486
  if (parent instanceof VueElement) {
13433
13487
  this._parent = parent;
13434
13488
  break;
@@ -13650,6 +13704,7 @@ Expected function or array of functions, received type ${typeof value}.`
13650
13704
  this._styles.forEach((s) => this._root.removeChild(s));
13651
13705
  this._styles.length = 0;
13652
13706
  }
13707
+ this._styleAnchors.delete(this._def);
13653
13708
  this._applyStyles(newStyles);
13654
13709
  this._instance = null;
13655
13710
  this._update();
@@ -13674,7 +13729,7 @@ Expected function or array of functions, received type ${typeof value}.`
13674
13729
  }
13675
13730
  return vnode;
13676
13731
  }
13677
- _applyStyles(styles, owner) {
13732
+ _applyStyles(styles, owner, parentComp) {
13678
13733
  if (!styles) return;
13679
13734
  if (owner) {
13680
13735
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13683,11 +13738,19 @@ Expected function or array of functions, received type ${typeof value}.`
13683
13738
  this._styleChildren.add(owner);
13684
13739
  }
13685
13740
  const nonce = this._nonce;
13741
+ const root = this.shadowRoot;
13742
+ const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
13743
+ let last = null;
13686
13744
  for (let i = styles.length - 1; i >= 0; i--) {
13687
13745
  const s = document.createElement("style");
13688
13746
  if (nonce) s.setAttribute("nonce", nonce);
13689
13747
  s.textContent = styles[i];
13690
- this.shadowRoot.prepend(s);
13748
+ root.insertBefore(s, last || insertionAnchor);
13749
+ last = s;
13750
+ if (i === 0) {
13751
+ if (!parentComp) this._styleAnchors.set(this._def, s);
13752
+ if (owner) this._styleAnchors.set(owner, s);
13753
+ }
13691
13754
  {
13692
13755
  if (owner) {
13693
13756
  if (owner.__hmrId) {
@@ -13704,6 +13767,28 @@ Expected function or array of functions, received type ${typeof value}.`
13704
13767
  }
13705
13768
  }
13706
13769
  }
13770
+ _getStyleAnchor(comp) {
13771
+ if (!comp) {
13772
+ return null;
13773
+ }
13774
+ const anchor = this._styleAnchors.get(comp);
13775
+ if (anchor && anchor.parentNode === this.shadowRoot) {
13776
+ return anchor;
13777
+ }
13778
+ if (anchor) {
13779
+ this._styleAnchors.delete(comp);
13780
+ }
13781
+ return null;
13782
+ }
13783
+ _getRootStyleInsertionAnchor(root) {
13784
+ for (let i = 0; i < root.childNodes.length; i++) {
13785
+ const node = root.childNodes[i];
13786
+ if (!(node instanceof HTMLStyleElement)) {
13787
+ return node;
13788
+ }
13789
+ }
13790
+ return null;
13791
+ }
13707
13792
  /**
13708
13793
  * Only called when shadowRoot is false
13709
13794
  */
@@ -13766,8 +13851,8 @@ Expected function or array of functions, received type ${typeof value}.`
13766
13851
  /**
13767
13852
  * @internal
13768
13853
  */
13769
- _injectChildStyle(comp) {
13770
- this._applyStyles(comp.styles, comp);
13854
+ _injectChildStyle(comp, parentComp) {
13855
+ this._applyStyles(comp.styles, comp, parentComp);
13771
13856
  }
13772
13857
  /**
13773
13858
  * @internal
@@ -13797,6 +13882,7 @@ Expected function or array of functions, received type ${typeof value}.`
13797
13882
  _removeChildStyle(comp) {
13798
13883
  {
13799
13884
  this._styleChildren.delete(comp);
13885
+ this._styleAnchors.delete(comp);
13800
13886
  if (this._childStyles && comp.__hmrId) {
13801
13887
  const oldStyles = this._childStyles.get(comp.__hmrId);
13802
13888
  if (oldStyles) {