@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
  **/
@@ -1282,10 +1282,17 @@ function apply(self, method, fn, thisArg, wrappedRetFn, args) {
1282
1282
  }
1283
1283
  function reduce(self, method, fn, args) {
1284
1284
  const arr = shallowReadArray(self);
1285
+ const needsWrap = arr !== self && !isShallow(self);
1285
1286
  let wrappedFn = fn;
1287
+ let wrapInitialAccumulator = false;
1286
1288
  if (arr !== self) {
1287
- if (!isShallow(self)) {
1289
+ if (needsWrap) {
1290
+ wrapInitialAccumulator = args.length === 0;
1288
1291
  wrappedFn = function(acc, item, index) {
1292
+ if (wrapInitialAccumulator) {
1293
+ wrapInitialAccumulator = false;
1294
+ acc = toWrapped(self, acc);
1295
+ }
1289
1296
  return fn.call(this, acc, toWrapped(self, item), index, self);
1290
1297
  };
1291
1298
  } else if (fn.length > 3) {
@@ -1294,7 +1301,8 @@ function reduce(self, method, fn, args) {
1294
1301
  };
1295
1302
  }
1296
1303
  }
1297
- return arr[method](wrappedFn, ...args);
1304
+ const result = arr[method](wrappedFn, ...args);
1305
+ return wrapInitialAccumulator ? toWrapped(self, result) : result;
1298
1306
  }
1299
1307
  function searchProxy(self, method, args) {
1300
1308
  const arr = toRaw(self);
@@ -1584,15 +1592,14 @@ function createInstrumentations(readonly, shallow) {
1584
1592
  clear: createReadonlyMethod("clear")
1585
1593
  } : {
1586
1594
  add(value) {
1587
- if (!shallow && !isShallow(value) && !isReadonly(value)) {
1588
- value = toRaw(value);
1589
- }
1590
1595
  const target = toRaw(this);
1591
1596
  const proto = getProto(target);
1592
- const hadKey = proto.has.call(target, value);
1597
+ const rawValue = toRaw(value);
1598
+ const valueToAdd = !shallow && !isShallow(value) && !isReadonly(value) ? rawValue : value;
1599
+ const hadKey = proto.has.call(target, valueToAdd) || hasChanged(value, valueToAdd) && proto.has.call(target, value) || hasChanged(rawValue, valueToAdd) && proto.has.call(target, rawValue);
1593
1600
  if (!hadKey) {
1594
- target.add(value);
1595
- trigger(target, "add", value, value);
1601
+ target.add(valueToAdd);
1602
+ trigger(target, "add", valueToAdd, valueToAdd);
1596
1603
  }
1597
1604
  return this;
1598
1605
  },
@@ -4325,6 +4332,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
4325
4332
  callHook(hook, [el]);
4326
4333
  },
4327
4334
  enter(el) {
4335
+ if (leavingVNodesCache[key] === vnode) return;
4328
4336
  let hook = onEnter;
4329
4337
  let afterHook = onAfterEnter;
4330
4338
  let cancelHook = onEnterCancelled;
@@ -6263,12 +6271,16 @@ function renderList(source, renderItem, cache, index) {
6263
6271
  );
6264
6272
  }
6265
6273
  } else if (typeof source === "number") {
6266
- if (!!(process.env.NODE_ENV !== "production") && !Number.isInteger(source)) {
6267
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6268
- }
6269
- ret = new Array(source);
6270
- for (let i = 0; i < source; i++) {
6271
- ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6274
+ if (!!(process.env.NODE_ENV !== "production") && (!Number.isInteger(source) || source < 0)) {
6275
+ warn$1(
6276
+ `The v-for range expects a positive integer value but got ${source}.`
6277
+ );
6278
+ ret = [];
6279
+ } else {
6280
+ ret = new Array(source);
6281
+ for (let i = 0; i < source; i++) {
6282
+ ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6283
+ }
6272
6284
  }
6273
6285
  } else if (isObject(source)) {
6274
6286
  if (source[Symbol.iterator]) {
@@ -6971,6 +6983,7 @@ function createPropsRestProxy(props, excludedKeys) {
6971
6983
  }
6972
6984
  function withAsyncContext(getAwaitable) {
6973
6985
  const ctx = getCurrentInstance();
6986
+ const inSSRSetup = isInSSRComponentSetup;
6974
6987
  if (!!(process.env.NODE_ENV !== "production") && !ctx) {
6975
6988
  warn$1(
6976
6989
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6978,13 +6991,36 @@ function withAsyncContext(getAwaitable) {
6978
6991
  }
6979
6992
  let awaitable = getAwaitable();
6980
6993
  unsetCurrentInstance();
6994
+ if (inSSRSetup) {
6995
+ setInSSRSetupState(false);
6996
+ }
6997
+ const restore = () => {
6998
+ setCurrentInstance(ctx);
6999
+ if (inSSRSetup) {
7000
+ setInSSRSetupState(true);
7001
+ }
7002
+ };
7003
+ const cleanup = () => {
7004
+ if (getCurrentInstance() !== ctx) ctx.scope.off();
7005
+ unsetCurrentInstance();
7006
+ if (inSSRSetup) {
7007
+ setInSSRSetupState(false);
7008
+ }
7009
+ };
6981
7010
  if (isPromise(awaitable)) {
6982
7011
  awaitable = awaitable.catch((e) => {
6983
- setCurrentInstance(ctx);
7012
+ restore();
7013
+ Promise.resolve().then(() => Promise.resolve().then(cleanup));
6984
7014
  throw e;
6985
7015
  });
6986
7016
  }
6987
- return [awaitable, () => setCurrentInstance(ctx)];
7017
+ return [
7018
+ awaitable,
7019
+ () => {
7020
+ restore();
7021
+ Promise.resolve().then(cleanup);
7022
+ }
7023
+ ];
6988
7024
  }
6989
7025
 
6990
7026
  function createDuplicateChecker() {
@@ -7507,7 +7543,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
7507
7543
  return vm;
7508
7544
  }
7509
7545
  }
7510
- Vue.version = `2.6.14-compat:${"3.5.28"}`;
7546
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7511
7547
  Vue.config = singletonApp.config;
7512
7548
  Vue.use = (plugin, ...options) => {
7513
7549
  if (plugin && isFunction(plugin.install)) {
@@ -10044,7 +10080,10 @@ function baseCreateRenderer(options, createHydrationFns) {
10044
10080
  }
10045
10081
  } else {
10046
10082
  if (root.ce && root.ce._hasShadowRoot()) {
10047
- root.ce._injectChildStyle(type);
10083
+ root.ce._injectChildStyle(
10084
+ type,
10085
+ instance.parent ? instance.parent.type : void 0
10086
+ );
10048
10087
  }
10049
10088
  if (!!(process.env.NODE_ENV !== "production")) {
10050
10089
  startMeasure(instance, `render`);
@@ -12649,7 +12688,7 @@ function isMemoSame(cached, memo) {
12649
12688
  return true;
12650
12689
  }
12651
12690
 
12652
- const version = "3.5.28";
12691
+ const version = "3.5.30";
12653
12692
  const warn = !!(process.env.NODE_ENV !== "production") ? warn$1 : NOOP;
12654
12693
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12655
12694
  const devtools = !!(process.env.NODE_ENV !== "production") || true ? devtools$1 : void 0;
@@ -13534,7 +13573,9 @@ const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) =>
13534
13573
  }
13535
13574
  } else if (
13536
13575
  // #11081 force set props for possible async custom element
13537
- el._isVueCE && (/[A-Z]/.test(key) || !isString(nextValue))
13576
+ el._isVueCE && // #12408 check if it's declared prop or it's async custom element
13577
+ (shouldSetAsPropForVueCE(el, key) || // @ts-expect-error _def is private
13578
+ el._def.__asyncLoader && (/[A-Z]/.test(key) || !isString(nextValue)))
13538
13579
  ) {
13539
13580
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13540
13581
  } else {
@@ -13582,6 +13623,17 @@ function shouldSetAsProp(el, key, value, isSVG) {
13582
13623
  }
13583
13624
  return key in el;
13584
13625
  }
13626
+ function shouldSetAsPropForVueCE(el, key) {
13627
+ const props = (
13628
+ // @ts-expect-error _def is private
13629
+ el._def.props
13630
+ );
13631
+ if (!props) {
13632
+ return false;
13633
+ }
13634
+ const camelKey = camelize(key);
13635
+ return Array.isArray(props) ? props.some((prop) => camelize(prop) === camelKey) : Object.keys(props).some((prop) => camelize(prop) === camelKey);
13636
+ }
13585
13637
 
13586
13638
  const REMOVAL = {};
13587
13639
  // @__NO_SIDE_EFFECTS__
@@ -13626,6 +13678,7 @@ class VueElement extends BaseClass {
13626
13678
  this._dirty = false;
13627
13679
  this._numberProps = null;
13628
13680
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13681
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13629
13682
  this._ob = null;
13630
13683
  if (this.shadowRoot && _createApp !== createApp) {
13631
13684
  this._root = this.shadowRoot;
@@ -13654,7 +13707,8 @@ class VueElement extends BaseClass {
13654
13707
  }
13655
13708
  this._connected = true;
13656
13709
  let parent = this;
13657
- while (parent = parent && (parent.parentNode || parent.host)) {
13710
+ while (parent = parent && // #12479 should check assignedSlot first to get correct parent
13711
+ (parent.assignedSlot || parent.parentNode || parent.host)) {
13658
13712
  if (parent instanceof VueElement) {
13659
13713
  this._parent = parent;
13660
13714
  break;
@@ -13876,6 +13930,7 @@ class VueElement extends BaseClass {
13876
13930
  this._styles.forEach((s) => this._root.removeChild(s));
13877
13931
  this._styles.length = 0;
13878
13932
  }
13933
+ this._styleAnchors.delete(this._def);
13879
13934
  this._applyStyles(newStyles);
13880
13935
  this._instance = null;
13881
13936
  this._update();
@@ -13900,7 +13955,7 @@ class VueElement extends BaseClass {
13900
13955
  }
13901
13956
  return vnode;
13902
13957
  }
13903
- _applyStyles(styles, owner) {
13958
+ _applyStyles(styles, owner, parentComp) {
13904
13959
  if (!styles) return;
13905
13960
  if (owner) {
13906
13961
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13909,11 +13964,19 @@ class VueElement extends BaseClass {
13909
13964
  this._styleChildren.add(owner);
13910
13965
  }
13911
13966
  const nonce = this._nonce;
13967
+ const root = this.shadowRoot;
13968
+ const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
13969
+ let last = null;
13912
13970
  for (let i = styles.length - 1; i >= 0; i--) {
13913
13971
  const s = document.createElement("style");
13914
13972
  if (nonce) s.setAttribute("nonce", nonce);
13915
13973
  s.textContent = styles[i];
13916
- this.shadowRoot.prepend(s);
13974
+ root.insertBefore(s, last || insertionAnchor);
13975
+ last = s;
13976
+ if (i === 0) {
13977
+ if (!parentComp) this._styleAnchors.set(this._def, s);
13978
+ if (owner) this._styleAnchors.set(owner, s);
13979
+ }
13917
13980
  if (!!(process.env.NODE_ENV !== "production")) {
13918
13981
  if (owner) {
13919
13982
  if (owner.__hmrId) {
@@ -13930,6 +13993,28 @@ class VueElement extends BaseClass {
13930
13993
  }
13931
13994
  }
13932
13995
  }
13996
+ _getStyleAnchor(comp) {
13997
+ if (!comp) {
13998
+ return null;
13999
+ }
14000
+ const anchor = this._styleAnchors.get(comp);
14001
+ if (anchor && anchor.parentNode === this.shadowRoot) {
14002
+ return anchor;
14003
+ }
14004
+ if (anchor) {
14005
+ this._styleAnchors.delete(comp);
14006
+ }
14007
+ return null;
14008
+ }
14009
+ _getRootStyleInsertionAnchor(root) {
14010
+ for (let i = 0; i < root.childNodes.length; i++) {
14011
+ const node = root.childNodes[i];
14012
+ if (!(node instanceof HTMLStyleElement)) {
14013
+ return node;
14014
+ }
14015
+ }
14016
+ return null;
14017
+ }
13933
14018
  /**
13934
14019
  * Only called when shadowRoot is false
13935
14020
  */
@@ -13992,8 +14077,8 @@ class VueElement extends BaseClass {
13992
14077
  /**
13993
14078
  * @internal
13994
14079
  */
13995
- _injectChildStyle(comp) {
13996
- this._applyStyles(comp.styles, comp);
14080
+ _injectChildStyle(comp, parentComp) {
14081
+ this._applyStyles(comp.styles, comp, parentComp);
13997
14082
  }
13998
14083
  /**
13999
14084
  * @internal
@@ -14023,6 +14108,7 @@ class VueElement extends BaseClass {
14023
14108
  _removeChildStyle(comp) {
14024
14109
  if (!!(process.env.NODE_ENV !== "production")) {
14025
14110
  this._styleChildren.delete(comp);
14111
+ this._styleAnchors.delete(comp);
14026
14112
  if (this._childStyles && comp.__hmrId) {
14027
14113
  const oldStyles = this._childStyles.get(comp.__hmrId);
14028
14114
  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
  **/
@@ -1281,10 +1281,17 @@ var Vue = (function () {
1281
1281
  }
1282
1282
  function reduce(self, method, fn, args) {
1283
1283
  const arr = shallowReadArray(self);
1284
+ const needsWrap = arr !== self && !isShallow(self);
1284
1285
  let wrappedFn = fn;
1286
+ let wrapInitialAccumulator = false;
1285
1287
  if (arr !== self) {
1286
- if (!isShallow(self)) {
1288
+ if (needsWrap) {
1289
+ wrapInitialAccumulator = args.length === 0;
1287
1290
  wrappedFn = function(acc, item, index) {
1291
+ if (wrapInitialAccumulator) {
1292
+ wrapInitialAccumulator = false;
1293
+ acc = toWrapped(self, acc);
1294
+ }
1288
1295
  return fn.call(this, acc, toWrapped(self, item), index, self);
1289
1296
  };
1290
1297
  } else if (fn.length > 3) {
@@ -1293,7 +1300,8 @@ var Vue = (function () {
1293
1300
  };
1294
1301
  }
1295
1302
  }
1296
- return arr[method](wrappedFn, ...args);
1303
+ const result = arr[method](wrappedFn, ...args);
1304
+ return wrapInitialAccumulator ? toWrapped(self, result) : result;
1297
1305
  }
1298
1306
  function searchProxy(self, method, args) {
1299
1307
  const arr = toRaw(self);
@@ -1583,15 +1591,14 @@ var Vue = (function () {
1583
1591
  clear: createReadonlyMethod("clear")
1584
1592
  } : {
1585
1593
  add(value) {
1586
- if (!shallow && !isShallow(value) && !isReadonly(value)) {
1587
- value = toRaw(value);
1588
- }
1589
1594
  const target = toRaw(this);
1590
1595
  const proto = getProto(target);
1591
- const hadKey = proto.has.call(target, value);
1596
+ const rawValue = toRaw(value);
1597
+ const valueToAdd = !shallow && !isShallow(value) && !isReadonly(value) ? rawValue : value;
1598
+ const hadKey = proto.has.call(target, valueToAdd) || hasChanged(value, valueToAdd) && proto.has.call(target, value) || hasChanged(rawValue, valueToAdd) && proto.has.call(target, rawValue);
1592
1599
  if (!hadKey) {
1593
- target.add(value);
1594
- trigger(target, "add", value, value);
1600
+ target.add(valueToAdd);
1601
+ trigger(target, "add", valueToAdd, valueToAdd);
1595
1602
  }
1596
1603
  return this;
1597
1604
  },
@@ -4281,6 +4288,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
4281
4288
  callHook(hook, [el]);
4282
4289
  },
4283
4290
  enter(el) {
4291
+ if (leavingVNodesCache[key] === vnode) return;
4284
4292
  let hook = onEnter;
4285
4293
  let afterHook = onAfterEnter;
4286
4294
  let cancelHook = onEnterCancelled;
@@ -6202,12 +6210,16 @@ If this is a native custom element, make sure to exclude it from component resol
6202
6210
  );
6203
6211
  }
6204
6212
  } else if (typeof source === "number") {
6205
- if (!Number.isInteger(source)) {
6206
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6207
- }
6208
- ret = new Array(source);
6209
- for (let i = 0; i < source; i++) {
6210
- ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6213
+ if (!Number.isInteger(source) || source < 0) {
6214
+ warn$1(
6215
+ `The v-for range expects a positive integer value but got ${source}.`
6216
+ );
6217
+ ret = [];
6218
+ } else {
6219
+ ret = new Array(source);
6220
+ for (let i = 0; i < source; i++) {
6221
+ ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
6222
+ }
6211
6223
  }
6212
6224
  } else if (isObject(source)) {
6213
6225
  if (source[Symbol.iterator]) {
@@ -6910,6 +6922,7 @@ If this is a native custom element, make sure to exclude it from component resol
6910
6922
  }
6911
6923
  function withAsyncContext(getAwaitable) {
6912
6924
  const ctx = getCurrentInstance();
6925
+ const inSSRSetup = isInSSRComponentSetup;
6913
6926
  if (!ctx) {
6914
6927
  warn$1(
6915
6928
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6917,13 +6930,36 @@ If this is a native custom element, make sure to exclude it from component resol
6917
6930
  }
6918
6931
  let awaitable = getAwaitable();
6919
6932
  unsetCurrentInstance();
6933
+ if (inSSRSetup) {
6934
+ setInSSRSetupState(false);
6935
+ }
6936
+ const restore = () => {
6937
+ setCurrentInstance(ctx);
6938
+ if (inSSRSetup) {
6939
+ setInSSRSetupState(true);
6940
+ }
6941
+ };
6942
+ const cleanup = () => {
6943
+ if (getCurrentInstance() !== ctx) ctx.scope.off();
6944
+ unsetCurrentInstance();
6945
+ if (inSSRSetup) {
6946
+ setInSSRSetupState(false);
6947
+ }
6948
+ };
6920
6949
  if (isPromise(awaitable)) {
6921
6950
  awaitable = awaitable.catch((e) => {
6922
- setCurrentInstance(ctx);
6951
+ restore();
6952
+ Promise.resolve().then(() => Promise.resolve().then(cleanup));
6923
6953
  throw e;
6924
6954
  });
6925
6955
  }
6926
- return [awaitable, () => setCurrentInstance(ctx)];
6956
+ return [
6957
+ awaitable,
6958
+ () => {
6959
+ restore();
6960
+ Promise.resolve().then(cleanup);
6961
+ }
6962
+ ];
6927
6963
  }
6928
6964
 
6929
6965
  function createDuplicateChecker() {
@@ -7441,7 +7477,7 @@ If this is a native custom element, make sure to exclude it from component resol
7441
7477
  return vm;
7442
7478
  }
7443
7479
  }
7444
- Vue.version = `2.6.14-compat:${"3.5.28"}`;
7480
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7445
7481
  Vue.config = singletonApp.config;
7446
7482
  Vue.use = (plugin, ...options) => {
7447
7483
  if (plugin && isFunction(plugin.install)) {
@@ -9938,7 +9974,10 @@ If you want to remount the same app, move your app creation logic into a factory
9938
9974
  }
9939
9975
  } else {
9940
9976
  if (root.ce && root.ce._hasShadowRoot()) {
9941
- root.ce._injectChildStyle(type);
9977
+ root.ce._injectChildStyle(
9978
+ type,
9979
+ instance.parent ? instance.parent.type : void 0
9980
+ );
9942
9981
  }
9943
9982
  {
9944
9983
  startMeasure(instance, `render`);
@@ -12515,7 +12554,7 @@ Component that was made reactive: `,
12515
12554
  return true;
12516
12555
  }
12517
12556
 
12518
- const version = "3.5.28";
12557
+ const version = "3.5.30";
12519
12558
  const warn = warn$1 ;
12520
12559
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12521
12560
  const devtools = devtools$1 ;
@@ -13381,7 +13420,9 @@ Expected function or array of functions, received type ${typeof value}.`
13381
13420
  }
13382
13421
  } else if (
13383
13422
  // #11081 force set props for possible async custom element
13384
- el._isVueCE && (/[A-Z]/.test(key) || !isString(nextValue))
13423
+ el._isVueCE && // #12408 check if it's declared prop or it's async custom element
13424
+ (shouldSetAsPropForVueCE(el, key) || // @ts-expect-error _def is private
13425
+ el._def.__asyncLoader && (/[A-Z]/.test(key) || !isString(nextValue)))
13385
13426
  ) {
13386
13427
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13387
13428
  } else {
@@ -13429,6 +13470,17 @@ Expected function or array of functions, received type ${typeof value}.`
13429
13470
  }
13430
13471
  return key in el;
13431
13472
  }
13473
+ function shouldSetAsPropForVueCE(el, key) {
13474
+ const props = (
13475
+ // @ts-expect-error _def is private
13476
+ el._def.props
13477
+ );
13478
+ if (!props) {
13479
+ return false;
13480
+ }
13481
+ const camelKey = camelize(key);
13482
+ return Array.isArray(props) ? props.some((prop) => camelize(prop) === camelKey) : Object.keys(props).some((prop) => camelize(prop) === camelKey);
13483
+ }
13432
13484
 
13433
13485
  const REMOVAL = {};
13434
13486
  // @__NO_SIDE_EFFECTS__
@@ -13473,6 +13525,7 @@ Expected function or array of functions, received type ${typeof value}.`
13473
13525
  this._dirty = false;
13474
13526
  this._numberProps = null;
13475
13527
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13528
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13476
13529
  this._ob = null;
13477
13530
  if (this.shadowRoot && _createApp !== createApp) {
13478
13531
  this._root = this.shadowRoot;
@@ -13501,7 +13554,8 @@ Expected function or array of functions, received type ${typeof value}.`
13501
13554
  }
13502
13555
  this._connected = true;
13503
13556
  let parent = this;
13504
- while (parent = parent && (parent.parentNode || parent.host)) {
13557
+ while (parent = parent && // #12479 should check assignedSlot first to get correct parent
13558
+ (parent.assignedSlot || parent.parentNode || parent.host)) {
13505
13559
  if (parent instanceof VueElement) {
13506
13560
  this._parent = parent;
13507
13561
  break;
@@ -13723,6 +13777,7 @@ Expected function or array of functions, received type ${typeof value}.`
13723
13777
  this._styles.forEach((s) => this._root.removeChild(s));
13724
13778
  this._styles.length = 0;
13725
13779
  }
13780
+ this._styleAnchors.delete(this._def);
13726
13781
  this._applyStyles(newStyles);
13727
13782
  this._instance = null;
13728
13783
  this._update();
@@ -13747,7 +13802,7 @@ Expected function or array of functions, received type ${typeof value}.`
13747
13802
  }
13748
13803
  return vnode;
13749
13804
  }
13750
- _applyStyles(styles, owner) {
13805
+ _applyStyles(styles, owner, parentComp) {
13751
13806
  if (!styles) return;
13752
13807
  if (owner) {
13753
13808
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13756,11 +13811,19 @@ Expected function or array of functions, received type ${typeof value}.`
13756
13811
  this._styleChildren.add(owner);
13757
13812
  }
13758
13813
  const nonce = this._nonce;
13814
+ const root = this.shadowRoot;
13815
+ const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
13816
+ let last = null;
13759
13817
  for (let i = styles.length - 1; i >= 0; i--) {
13760
13818
  const s = document.createElement("style");
13761
13819
  if (nonce) s.setAttribute("nonce", nonce);
13762
13820
  s.textContent = styles[i];
13763
- this.shadowRoot.prepend(s);
13821
+ root.insertBefore(s, last || insertionAnchor);
13822
+ last = s;
13823
+ if (i === 0) {
13824
+ if (!parentComp) this._styleAnchors.set(this._def, s);
13825
+ if (owner) this._styleAnchors.set(owner, s);
13826
+ }
13764
13827
  {
13765
13828
  if (owner) {
13766
13829
  if (owner.__hmrId) {
@@ -13777,6 +13840,28 @@ Expected function or array of functions, received type ${typeof value}.`
13777
13840
  }
13778
13841
  }
13779
13842
  }
13843
+ _getStyleAnchor(comp) {
13844
+ if (!comp) {
13845
+ return null;
13846
+ }
13847
+ const anchor = this._styleAnchors.get(comp);
13848
+ if (anchor && anchor.parentNode === this.shadowRoot) {
13849
+ return anchor;
13850
+ }
13851
+ if (anchor) {
13852
+ this._styleAnchors.delete(comp);
13853
+ }
13854
+ return null;
13855
+ }
13856
+ _getRootStyleInsertionAnchor(root) {
13857
+ for (let i = 0; i < root.childNodes.length; i++) {
13858
+ const node = root.childNodes[i];
13859
+ if (!(node instanceof HTMLStyleElement)) {
13860
+ return node;
13861
+ }
13862
+ }
13863
+ return null;
13864
+ }
13780
13865
  /**
13781
13866
  * Only called when shadowRoot is false
13782
13867
  */
@@ -13839,8 +13924,8 @@ Expected function or array of functions, received type ${typeof value}.`
13839
13924
  /**
13840
13925
  * @internal
13841
13926
  */
13842
- _injectChildStyle(comp) {
13843
- this._applyStyles(comp.styles, comp);
13927
+ _injectChildStyle(comp, parentComp) {
13928
+ this._applyStyles(comp.styles, comp, parentComp);
13844
13929
  }
13845
13930
  /**
13846
13931
  * @internal
@@ -13870,6 +13955,7 @@ Expected function or array of functions, received type ${typeof value}.`
13870
13955
  _removeChildStyle(comp) {
13871
13956
  {
13872
13957
  this._styleChildren.delete(comp);
13958
+ this._styleAnchors.delete(comp);
13873
13959
  if (this._childStyles && comp.__hmrId) {
13874
13960
  const oldStyles = this._childStyles.get(comp.__hmrId);
13875
13961
  if (oldStyles) {