@vue/compat 3.5.29 → 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.29
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
  },
@@ -6264,12 +6271,16 @@ function renderList(source, renderItem, cache, index) {
6264
6271
  );
6265
6272
  }
6266
6273
  } else if (typeof source === "number") {
6267
- if (!!(process.env.NODE_ENV !== "production") && !Number.isInteger(source)) {
6268
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6269
- }
6270
- ret = new Array(source);
6271
- for (let i = 0; i < source; i++) {
6272
- 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
+ }
6273
6284
  }
6274
6285
  } else if (isObject(source)) {
6275
6286
  if (source[Symbol.iterator]) {
@@ -6972,6 +6983,7 @@ function createPropsRestProxy(props, excludedKeys) {
6972
6983
  }
6973
6984
  function withAsyncContext(getAwaitable) {
6974
6985
  const ctx = getCurrentInstance();
6986
+ const inSSRSetup = isInSSRComponentSetup;
6975
6987
  if (!!(process.env.NODE_ENV !== "production") && !ctx) {
6976
6988
  warn$1(
6977
6989
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6979,13 +6991,25 @@ function withAsyncContext(getAwaitable) {
6979
6991
  }
6980
6992
  let awaitable = getAwaitable();
6981
6993
  unsetCurrentInstance();
6994
+ if (inSSRSetup) {
6995
+ setInSSRSetupState(false);
6996
+ }
6997
+ const restore = () => {
6998
+ setCurrentInstance(ctx);
6999
+ if (inSSRSetup) {
7000
+ setInSSRSetupState(true);
7001
+ }
7002
+ };
6982
7003
  const cleanup = () => {
6983
7004
  if (getCurrentInstance() !== ctx) ctx.scope.off();
6984
7005
  unsetCurrentInstance();
7006
+ if (inSSRSetup) {
7007
+ setInSSRSetupState(false);
7008
+ }
6985
7009
  };
6986
7010
  if (isPromise(awaitable)) {
6987
7011
  awaitable = awaitable.catch((e) => {
6988
- setCurrentInstance(ctx);
7012
+ restore();
6989
7013
  Promise.resolve().then(() => Promise.resolve().then(cleanup));
6990
7014
  throw e;
6991
7015
  });
@@ -6993,7 +7017,7 @@ function withAsyncContext(getAwaitable) {
6993
7017
  return [
6994
7018
  awaitable,
6995
7019
  () => {
6996
- setCurrentInstance(ctx);
7020
+ restore();
6997
7021
  Promise.resolve().then(cleanup);
6998
7022
  }
6999
7023
  ];
@@ -7519,7 +7543,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
7519
7543
  return vm;
7520
7544
  }
7521
7545
  }
7522
- Vue.version = `2.6.14-compat:${"3.5.29"}`;
7546
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7523
7547
  Vue.config = singletonApp.config;
7524
7548
  Vue.use = (plugin, ...options) => {
7525
7549
  if (plugin && isFunction(plugin.install)) {
@@ -10056,7 +10080,10 @@ function baseCreateRenderer(options, createHydrationFns) {
10056
10080
  }
10057
10081
  } else {
10058
10082
  if (root.ce && root.ce._hasShadowRoot()) {
10059
- root.ce._injectChildStyle(type);
10083
+ root.ce._injectChildStyle(
10084
+ type,
10085
+ instance.parent ? instance.parent.type : void 0
10086
+ );
10060
10087
  }
10061
10088
  if (!!(process.env.NODE_ENV !== "production")) {
10062
10089
  startMeasure(instance, `render`);
@@ -12661,7 +12688,7 @@ function isMemoSame(cached, memo) {
12661
12688
  return true;
12662
12689
  }
12663
12690
 
12664
- const version = "3.5.29";
12691
+ const version = "3.5.30";
12665
12692
  const warn = !!(process.env.NODE_ENV !== "production") ? warn$1 : NOOP;
12666
12693
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12667
12694
  const devtools = !!(process.env.NODE_ENV !== "production") || true ? devtools$1 : void 0;
@@ -13546,7 +13573,9 @@ const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) =>
13546
13573
  }
13547
13574
  } else if (
13548
13575
  // #11081 force set props for possible async custom element
13549
- 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)))
13550
13579
  ) {
13551
13580
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13552
13581
  } else {
@@ -13594,6 +13623,17 @@ function shouldSetAsProp(el, key, value, isSVG) {
13594
13623
  }
13595
13624
  return key in el;
13596
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
+ }
13597
13637
 
13598
13638
  const REMOVAL = {};
13599
13639
  // @__NO_SIDE_EFFECTS__
@@ -13638,6 +13678,7 @@ class VueElement extends BaseClass {
13638
13678
  this._dirty = false;
13639
13679
  this._numberProps = null;
13640
13680
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13681
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13641
13682
  this._ob = null;
13642
13683
  if (this.shadowRoot && _createApp !== createApp) {
13643
13684
  this._root = this.shadowRoot;
@@ -13666,7 +13707,8 @@ class VueElement extends BaseClass {
13666
13707
  }
13667
13708
  this._connected = true;
13668
13709
  let parent = this;
13669
- 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)) {
13670
13712
  if (parent instanceof VueElement) {
13671
13713
  this._parent = parent;
13672
13714
  break;
@@ -13888,6 +13930,7 @@ class VueElement extends BaseClass {
13888
13930
  this._styles.forEach((s) => this._root.removeChild(s));
13889
13931
  this._styles.length = 0;
13890
13932
  }
13933
+ this._styleAnchors.delete(this._def);
13891
13934
  this._applyStyles(newStyles);
13892
13935
  this._instance = null;
13893
13936
  this._update();
@@ -13912,7 +13955,7 @@ class VueElement extends BaseClass {
13912
13955
  }
13913
13956
  return vnode;
13914
13957
  }
13915
- _applyStyles(styles, owner) {
13958
+ _applyStyles(styles, owner, parentComp) {
13916
13959
  if (!styles) return;
13917
13960
  if (owner) {
13918
13961
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13921,11 +13964,19 @@ class VueElement extends BaseClass {
13921
13964
  this._styleChildren.add(owner);
13922
13965
  }
13923
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;
13924
13970
  for (let i = styles.length - 1; i >= 0; i--) {
13925
13971
  const s = document.createElement("style");
13926
13972
  if (nonce) s.setAttribute("nonce", nonce);
13927
13973
  s.textContent = styles[i];
13928
- 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
+ }
13929
13980
  if (!!(process.env.NODE_ENV !== "production")) {
13930
13981
  if (owner) {
13931
13982
  if (owner.__hmrId) {
@@ -13942,6 +13993,28 @@ class VueElement extends BaseClass {
13942
13993
  }
13943
13994
  }
13944
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
+ }
13945
14018
  /**
13946
14019
  * Only called when shadowRoot is false
13947
14020
  */
@@ -14004,8 +14077,8 @@ class VueElement extends BaseClass {
14004
14077
  /**
14005
14078
  * @internal
14006
14079
  */
14007
- _injectChildStyle(comp) {
14008
- this._applyStyles(comp.styles, comp);
14080
+ _injectChildStyle(comp, parentComp) {
14081
+ this._applyStyles(comp.styles, comp, parentComp);
14009
14082
  }
14010
14083
  /**
14011
14084
  * @internal
@@ -14035,6 +14108,7 @@ class VueElement extends BaseClass {
14035
14108
  _removeChildStyle(comp) {
14036
14109
  if (!!(process.env.NODE_ENV !== "production")) {
14037
14110
  this._styleChildren.delete(comp);
14111
+ this._styleAnchors.delete(comp);
14038
14112
  if (this._childStyles && comp.__hmrId) {
14039
14113
  const oldStyles = this._childStyles.get(comp.__hmrId);
14040
14114
  if (oldStyles) {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/compat v3.5.29
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
  },
@@ -6203,12 +6210,16 @@ If this is a native custom element, make sure to exclude it from component resol
6203
6210
  );
6204
6211
  }
6205
6212
  } else if (typeof source === "number") {
6206
- if (!Number.isInteger(source)) {
6207
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6208
- }
6209
- ret = new Array(source);
6210
- for (let i = 0; i < source; i++) {
6211
- 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
+ }
6212
6223
  }
6213
6224
  } else if (isObject(source)) {
6214
6225
  if (source[Symbol.iterator]) {
@@ -6911,6 +6922,7 @@ If this is a native custom element, make sure to exclude it from component resol
6911
6922
  }
6912
6923
  function withAsyncContext(getAwaitable) {
6913
6924
  const ctx = getCurrentInstance();
6925
+ const inSSRSetup = isInSSRComponentSetup;
6914
6926
  if (!ctx) {
6915
6927
  warn$1(
6916
6928
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6918,13 +6930,25 @@ If this is a native custom element, make sure to exclude it from component resol
6918
6930
  }
6919
6931
  let awaitable = getAwaitable();
6920
6932
  unsetCurrentInstance();
6933
+ if (inSSRSetup) {
6934
+ setInSSRSetupState(false);
6935
+ }
6936
+ const restore = () => {
6937
+ setCurrentInstance(ctx);
6938
+ if (inSSRSetup) {
6939
+ setInSSRSetupState(true);
6940
+ }
6941
+ };
6921
6942
  const cleanup = () => {
6922
6943
  if (getCurrentInstance() !== ctx) ctx.scope.off();
6923
6944
  unsetCurrentInstance();
6945
+ if (inSSRSetup) {
6946
+ setInSSRSetupState(false);
6947
+ }
6924
6948
  };
6925
6949
  if (isPromise(awaitable)) {
6926
6950
  awaitable = awaitable.catch((e) => {
6927
- setCurrentInstance(ctx);
6951
+ restore();
6928
6952
  Promise.resolve().then(() => Promise.resolve().then(cleanup));
6929
6953
  throw e;
6930
6954
  });
@@ -6932,7 +6956,7 @@ If this is a native custom element, make sure to exclude it from component resol
6932
6956
  return [
6933
6957
  awaitable,
6934
6958
  () => {
6935
- setCurrentInstance(ctx);
6959
+ restore();
6936
6960
  Promise.resolve().then(cleanup);
6937
6961
  }
6938
6962
  ];
@@ -7453,7 +7477,7 @@ If this is a native custom element, make sure to exclude it from component resol
7453
7477
  return vm;
7454
7478
  }
7455
7479
  }
7456
- Vue.version = `2.6.14-compat:${"3.5.29"}`;
7480
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7457
7481
  Vue.config = singletonApp.config;
7458
7482
  Vue.use = (plugin, ...options) => {
7459
7483
  if (plugin && isFunction(plugin.install)) {
@@ -9950,7 +9974,10 @@ If you want to remount the same app, move your app creation logic into a factory
9950
9974
  }
9951
9975
  } else {
9952
9976
  if (root.ce && root.ce._hasShadowRoot()) {
9953
- root.ce._injectChildStyle(type);
9977
+ root.ce._injectChildStyle(
9978
+ type,
9979
+ instance.parent ? instance.parent.type : void 0
9980
+ );
9954
9981
  }
9955
9982
  {
9956
9983
  startMeasure(instance, `render`);
@@ -12527,7 +12554,7 @@ Component that was made reactive: `,
12527
12554
  return true;
12528
12555
  }
12529
12556
 
12530
- const version = "3.5.29";
12557
+ const version = "3.5.30";
12531
12558
  const warn = warn$1 ;
12532
12559
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12533
12560
  const devtools = devtools$1 ;
@@ -13393,7 +13420,9 @@ Expected function or array of functions, received type ${typeof value}.`
13393
13420
  }
13394
13421
  } else if (
13395
13422
  // #11081 force set props for possible async custom element
13396
- 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)))
13397
13426
  ) {
13398
13427
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13399
13428
  } else {
@@ -13441,6 +13470,17 @@ Expected function or array of functions, received type ${typeof value}.`
13441
13470
  }
13442
13471
  return key in el;
13443
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
+ }
13444
13484
 
13445
13485
  const REMOVAL = {};
13446
13486
  // @__NO_SIDE_EFFECTS__
@@ -13485,6 +13525,7 @@ Expected function or array of functions, received type ${typeof value}.`
13485
13525
  this._dirty = false;
13486
13526
  this._numberProps = null;
13487
13527
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13528
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13488
13529
  this._ob = null;
13489
13530
  if (this.shadowRoot && _createApp !== createApp) {
13490
13531
  this._root = this.shadowRoot;
@@ -13513,7 +13554,8 @@ Expected function or array of functions, received type ${typeof value}.`
13513
13554
  }
13514
13555
  this._connected = true;
13515
13556
  let parent = this;
13516
- 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)) {
13517
13559
  if (parent instanceof VueElement) {
13518
13560
  this._parent = parent;
13519
13561
  break;
@@ -13735,6 +13777,7 @@ Expected function or array of functions, received type ${typeof value}.`
13735
13777
  this._styles.forEach((s) => this._root.removeChild(s));
13736
13778
  this._styles.length = 0;
13737
13779
  }
13780
+ this._styleAnchors.delete(this._def);
13738
13781
  this._applyStyles(newStyles);
13739
13782
  this._instance = null;
13740
13783
  this._update();
@@ -13759,7 +13802,7 @@ Expected function or array of functions, received type ${typeof value}.`
13759
13802
  }
13760
13803
  return vnode;
13761
13804
  }
13762
- _applyStyles(styles, owner) {
13805
+ _applyStyles(styles, owner, parentComp) {
13763
13806
  if (!styles) return;
13764
13807
  if (owner) {
13765
13808
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13768,11 +13811,19 @@ Expected function or array of functions, received type ${typeof value}.`
13768
13811
  this._styleChildren.add(owner);
13769
13812
  }
13770
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;
13771
13817
  for (let i = styles.length - 1; i >= 0; i--) {
13772
13818
  const s = document.createElement("style");
13773
13819
  if (nonce) s.setAttribute("nonce", nonce);
13774
13820
  s.textContent = styles[i];
13775
- 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
+ }
13776
13827
  {
13777
13828
  if (owner) {
13778
13829
  if (owner.__hmrId) {
@@ -13789,6 +13840,28 @@ Expected function or array of functions, received type ${typeof value}.`
13789
13840
  }
13790
13841
  }
13791
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
+ }
13792
13865
  /**
13793
13866
  * Only called when shadowRoot is false
13794
13867
  */
@@ -13851,8 +13924,8 @@ Expected function or array of functions, received type ${typeof value}.`
13851
13924
  /**
13852
13925
  * @internal
13853
13926
  */
13854
- _injectChildStyle(comp) {
13855
- this._applyStyles(comp.styles, comp);
13927
+ _injectChildStyle(comp, parentComp) {
13928
+ this._applyStyles(comp.styles, comp, parentComp);
13856
13929
  }
13857
13930
  /**
13858
13931
  * @internal
@@ -13882,6 +13955,7 @@ Expected function or array of functions, received type ${typeof value}.`
13882
13955
  _removeChildStyle(comp) {
13883
13956
  {
13884
13957
  this._styleChildren.delete(comp);
13958
+ this._styleAnchors.delete(comp);
13885
13959
  if (this._childStyles && comp.__hmrId) {
13886
13960
  const oldStyles = this._childStyles.get(comp.__hmrId);
13887
13961
  if (oldStyles) {