@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
  **/
@@ -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
  },
@@ -6191,12 +6198,16 @@ function renderList(source, renderItem, cache, index) {
6191
6198
  );
6192
6199
  }
6193
6200
  } else if (typeof source === "number") {
6194
- if (!!(process.env.NODE_ENV !== "production") && !Number.isInteger(source)) {
6195
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6196
- }
6197
- ret = new Array(source);
6198
- for (let i = 0; i < source; i++) {
6199
- 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
+ }
6200
6211
  }
6201
6212
  } else if (isObject(source)) {
6202
6213
  if (source[Symbol.iterator]) {
@@ -6899,6 +6910,7 @@ function createPropsRestProxy(props, excludedKeys) {
6899
6910
  }
6900
6911
  function withAsyncContext(getAwaitable) {
6901
6912
  const ctx = getCurrentInstance();
6913
+ const inSSRSetup = isInSSRComponentSetup;
6902
6914
  if (!!(process.env.NODE_ENV !== "production") && !ctx) {
6903
6915
  warn$1(
6904
6916
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6906,13 +6918,25 @@ function withAsyncContext(getAwaitable) {
6906
6918
  }
6907
6919
  let awaitable = getAwaitable();
6908
6920
  unsetCurrentInstance();
6921
+ if (inSSRSetup) {
6922
+ setInSSRSetupState(false);
6923
+ }
6924
+ const restore = () => {
6925
+ setCurrentInstance(ctx);
6926
+ if (inSSRSetup) {
6927
+ setInSSRSetupState(true);
6928
+ }
6929
+ };
6909
6930
  const cleanup = () => {
6910
6931
  if (getCurrentInstance() !== ctx) ctx.scope.off();
6911
6932
  unsetCurrentInstance();
6933
+ if (inSSRSetup) {
6934
+ setInSSRSetupState(false);
6935
+ }
6912
6936
  };
6913
6937
  if (isPromise(awaitable)) {
6914
6938
  awaitable = awaitable.catch((e) => {
6915
- setCurrentInstance(ctx);
6939
+ restore();
6916
6940
  Promise.resolve().then(() => Promise.resolve().then(cleanup));
6917
6941
  throw e;
6918
6942
  });
@@ -6920,7 +6944,7 @@ function withAsyncContext(getAwaitable) {
6920
6944
  return [
6921
6945
  awaitable,
6922
6946
  () => {
6923
- setCurrentInstance(ctx);
6947
+ restore();
6924
6948
  Promise.resolve().then(cleanup);
6925
6949
  }
6926
6950
  ];
@@ -7446,7 +7470,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
7446
7470
  return vm;
7447
7471
  }
7448
7472
  }
7449
- Vue.version = `2.6.14-compat:${"3.5.29"}`;
7473
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7450
7474
  Vue.config = singletonApp.config;
7451
7475
  Vue.use = (plugin, ...options) => {
7452
7476
  if (plugin && isFunction(plugin.install)) {
@@ -9983,7 +10007,10 @@ function baseCreateRenderer(options, createHydrationFns) {
9983
10007
  }
9984
10008
  } else {
9985
10009
  if (root.ce && root.ce._hasShadowRoot()) {
9986
- root.ce._injectChildStyle(type);
10010
+ root.ce._injectChildStyle(
10011
+ type,
10012
+ instance.parent ? instance.parent.type : void 0
10013
+ );
9987
10014
  }
9988
10015
  if (!!(process.env.NODE_ENV !== "production")) {
9989
10016
  startMeasure(instance, `render`);
@@ -12588,7 +12615,7 @@ function isMemoSame(cached, memo) {
12588
12615
  return true;
12589
12616
  }
12590
12617
 
12591
- const version = "3.5.29";
12618
+ const version = "3.5.30";
12592
12619
  const warn = !!(process.env.NODE_ENV !== "production") ? warn$1 : NOOP;
12593
12620
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12594
12621
  const devtools = !!(process.env.NODE_ENV !== "production") || true ? devtools$1 : void 0;
@@ -13473,7 +13500,9 @@ const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) =>
13473
13500
  }
13474
13501
  } else if (
13475
13502
  // #11081 force set props for possible async custom element
13476
- 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)))
13477
13506
  ) {
13478
13507
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13479
13508
  } else {
@@ -13521,6 +13550,17 @@ function shouldSetAsProp(el, key, value, isSVG) {
13521
13550
  }
13522
13551
  return key in el;
13523
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
+ }
13524
13564
 
13525
13565
  const REMOVAL = {};
13526
13566
  // @__NO_SIDE_EFFECTS__
@@ -13565,6 +13605,7 @@ class VueElement extends BaseClass {
13565
13605
  this._dirty = false;
13566
13606
  this._numberProps = null;
13567
13607
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13608
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13568
13609
  this._ob = null;
13569
13610
  if (this.shadowRoot && _createApp !== createApp) {
13570
13611
  this._root = this.shadowRoot;
@@ -13593,7 +13634,8 @@ class VueElement extends BaseClass {
13593
13634
  }
13594
13635
  this._connected = true;
13595
13636
  let parent = this;
13596
- 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)) {
13597
13639
  if (parent instanceof VueElement) {
13598
13640
  this._parent = parent;
13599
13641
  break;
@@ -13815,6 +13857,7 @@ class VueElement extends BaseClass {
13815
13857
  this._styles.forEach((s) => this._root.removeChild(s));
13816
13858
  this._styles.length = 0;
13817
13859
  }
13860
+ this._styleAnchors.delete(this._def);
13818
13861
  this._applyStyles(newStyles);
13819
13862
  this._instance = null;
13820
13863
  this._update();
@@ -13839,7 +13882,7 @@ class VueElement extends BaseClass {
13839
13882
  }
13840
13883
  return vnode;
13841
13884
  }
13842
- _applyStyles(styles, owner) {
13885
+ _applyStyles(styles, owner, parentComp) {
13843
13886
  if (!styles) return;
13844
13887
  if (owner) {
13845
13888
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13848,11 +13891,19 @@ class VueElement extends BaseClass {
13848
13891
  this._styleChildren.add(owner);
13849
13892
  }
13850
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;
13851
13897
  for (let i = styles.length - 1; i >= 0; i--) {
13852
13898
  const s = document.createElement("style");
13853
13899
  if (nonce) s.setAttribute("nonce", nonce);
13854
13900
  s.textContent = styles[i];
13855
- 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
+ }
13856
13907
  if (!!(process.env.NODE_ENV !== "production")) {
13857
13908
  if (owner) {
13858
13909
  if (owner.__hmrId) {
@@ -13869,6 +13920,28 @@ class VueElement extends BaseClass {
13869
13920
  }
13870
13921
  }
13871
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
+ }
13872
13945
  /**
13873
13946
  * Only called when shadowRoot is false
13874
13947
  */
@@ -13931,8 +14004,8 @@ class VueElement extends BaseClass {
13931
14004
  /**
13932
14005
  * @internal
13933
14006
  */
13934
- _injectChildStyle(comp) {
13935
- this._applyStyles(comp.styles, comp);
14007
+ _injectChildStyle(comp, parentComp) {
14008
+ this._applyStyles(comp.styles, comp, parentComp);
13936
14009
  }
13937
14010
  /**
13938
14011
  * @internal
@@ -13962,6 +14035,7 @@ class VueElement extends BaseClass {
13962
14035
  _removeChildStyle(comp) {
13963
14036
  if (!!(process.env.NODE_ENV !== "production")) {
13964
14037
  this._styleChildren.delete(comp);
14038
+ this._styleAnchors.delete(comp);
13965
14039
  if (this._childStyles && comp.__hmrId) {
13966
14040
  const oldStyles = this._childStyles.get(comp.__hmrId);
13967
14041
  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
  **/
@@ -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
  },
@@ -6130,12 +6137,16 @@ If this is a native custom element, make sure to exclude it from component resol
6130
6137
  );
6131
6138
  }
6132
6139
  } else if (typeof source === "number") {
6133
- if (!Number.isInteger(source)) {
6134
- warn$1(`The v-for range expect an integer value but got ${source}.`);
6135
- }
6136
- ret = new Array(source);
6137
- for (let i = 0; i < source; i++) {
6138
- 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
+ }
6139
6150
  }
6140
6151
  } else if (isObject(source)) {
6141
6152
  if (source[Symbol.iterator]) {
@@ -6838,6 +6849,7 @@ If this is a native custom element, make sure to exclude it from component resol
6838
6849
  }
6839
6850
  function withAsyncContext(getAwaitable) {
6840
6851
  const ctx = getCurrentInstance();
6852
+ const inSSRSetup = isInSSRComponentSetup;
6841
6853
  if (!ctx) {
6842
6854
  warn$1(
6843
6855
  `withAsyncContext called without active current instance. This is likely a bug.`
@@ -6845,13 +6857,25 @@ If this is a native custom element, make sure to exclude it from component resol
6845
6857
  }
6846
6858
  let awaitable = getAwaitable();
6847
6859
  unsetCurrentInstance();
6860
+ if (inSSRSetup) {
6861
+ setInSSRSetupState(false);
6862
+ }
6863
+ const restore = () => {
6864
+ setCurrentInstance(ctx);
6865
+ if (inSSRSetup) {
6866
+ setInSSRSetupState(true);
6867
+ }
6868
+ };
6848
6869
  const cleanup = () => {
6849
6870
  if (getCurrentInstance() !== ctx) ctx.scope.off();
6850
6871
  unsetCurrentInstance();
6872
+ if (inSSRSetup) {
6873
+ setInSSRSetupState(false);
6874
+ }
6851
6875
  };
6852
6876
  if (isPromise(awaitable)) {
6853
6877
  awaitable = awaitable.catch((e) => {
6854
- setCurrentInstance(ctx);
6878
+ restore();
6855
6879
  Promise.resolve().then(() => Promise.resolve().then(cleanup));
6856
6880
  throw e;
6857
6881
  });
@@ -6859,7 +6883,7 @@ If this is a native custom element, make sure to exclude it from component resol
6859
6883
  return [
6860
6884
  awaitable,
6861
6885
  () => {
6862
- setCurrentInstance(ctx);
6886
+ restore();
6863
6887
  Promise.resolve().then(cleanup);
6864
6888
  }
6865
6889
  ];
@@ -7380,7 +7404,7 @@ If this is a native custom element, make sure to exclude it from component resol
7380
7404
  return vm;
7381
7405
  }
7382
7406
  }
7383
- Vue.version = `2.6.14-compat:${"3.5.29"}`;
7407
+ Vue.version = `2.6.14-compat:${"3.5.30"}`;
7384
7408
  Vue.config = singletonApp.config;
7385
7409
  Vue.use = (plugin, ...options) => {
7386
7410
  if (plugin && isFunction(plugin.install)) {
@@ -9877,7 +9901,10 @@ If you want to remount the same app, move your app creation logic into a factory
9877
9901
  }
9878
9902
  } else {
9879
9903
  if (root.ce && root.ce._hasShadowRoot()) {
9880
- root.ce._injectChildStyle(type);
9904
+ root.ce._injectChildStyle(
9905
+ type,
9906
+ instance.parent ? instance.parent.type : void 0
9907
+ );
9881
9908
  }
9882
9909
  {
9883
9910
  startMeasure(instance, `render`);
@@ -12454,7 +12481,7 @@ Component that was made reactive: `,
12454
12481
  return true;
12455
12482
  }
12456
12483
 
12457
- const version = "3.5.29";
12484
+ const version = "3.5.30";
12458
12485
  const warn = warn$1 ;
12459
12486
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12460
12487
  const devtools = devtools$1 ;
@@ -13320,7 +13347,9 @@ Expected function or array of functions, received type ${typeof value}.`
13320
13347
  }
13321
13348
  } else if (
13322
13349
  // #11081 force set props for possible async custom element
13323
- 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)))
13324
13353
  ) {
13325
13354
  patchDOMProp(el, camelize(key), nextValue, parentComponent, key);
13326
13355
  } else {
@@ -13368,6 +13397,17 @@ Expected function or array of functions, received type ${typeof value}.`
13368
13397
  }
13369
13398
  return key in el;
13370
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
+ }
13371
13411
 
13372
13412
  const REMOVAL = {};
13373
13413
  // @__NO_SIDE_EFFECTS__
@@ -13412,6 +13452,7 @@ Expected function or array of functions, received type ${typeof value}.`
13412
13452
  this._dirty = false;
13413
13453
  this._numberProps = null;
13414
13454
  this._styleChildren = /* @__PURE__ */ new WeakSet();
13455
+ this._styleAnchors = /* @__PURE__ */ new WeakMap();
13415
13456
  this._ob = null;
13416
13457
  if (this.shadowRoot && _createApp !== createApp) {
13417
13458
  this._root = this.shadowRoot;
@@ -13440,7 +13481,8 @@ Expected function or array of functions, received type ${typeof value}.`
13440
13481
  }
13441
13482
  this._connected = true;
13442
13483
  let parent = this;
13443
- 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)) {
13444
13486
  if (parent instanceof VueElement) {
13445
13487
  this._parent = parent;
13446
13488
  break;
@@ -13662,6 +13704,7 @@ Expected function or array of functions, received type ${typeof value}.`
13662
13704
  this._styles.forEach((s) => this._root.removeChild(s));
13663
13705
  this._styles.length = 0;
13664
13706
  }
13707
+ this._styleAnchors.delete(this._def);
13665
13708
  this._applyStyles(newStyles);
13666
13709
  this._instance = null;
13667
13710
  this._update();
@@ -13686,7 +13729,7 @@ Expected function or array of functions, received type ${typeof value}.`
13686
13729
  }
13687
13730
  return vnode;
13688
13731
  }
13689
- _applyStyles(styles, owner) {
13732
+ _applyStyles(styles, owner, parentComp) {
13690
13733
  if (!styles) return;
13691
13734
  if (owner) {
13692
13735
  if (owner === this._def || this._styleChildren.has(owner)) {
@@ -13695,11 +13738,19 @@ Expected function or array of functions, received type ${typeof value}.`
13695
13738
  this._styleChildren.add(owner);
13696
13739
  }
13697
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;
13698
13744
  for (let i = styles.length - 1; i >= 0; i--) {
13699
13745
  const s = document.createElement("style");
13700
13746
  if (nonce) s.setAttribute("nonce", nonce);
13701
13747
  s.textContent = styles[i];
13702
- 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
+ }
13703
13754
  {
13704
13755
  if (owner) {
13705
13756
  if (owner.__hmrId) {
@@ -13716,6 +13767,28 @@ Expected function or array of functions, received type ${typeof value}.`
13716
13767
  }
13717
13768
  }
13718
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
+ }
13719
13792
  /**
13720
13793
  * Only called when shadowRoot is false
13721
13794
  */
@@ -13778,8 +13851,8 @@ Expected function or array of functions, received type ${typeof value}.`
13778
13851
  /**
13779
13852
  * @internal
13780
13853
  */
13781
- _injectChildStyle(comp) {
13782
- this._applyStyles(comp.styles, comp);
13854
+ _injectChildStyle(comp, parentComp) {
13855
+ this._applyStyles(comp.styles, comp, parentComp);
13783
13856
  }
13784
13857
  /**
13785
13858
  * @internal
@@ -13809,6 +13882,7 @@ Expected function or array of functions, received type ${typeof value}.`
13809
13882
  _removeChildStyle(comp) {
13810
13883
  {
13811
13884
  this._styleChildren.delete(comp);
13885
+ this._styleAnchors.delete(comp);
13812
13886
  if (this._childStyles && comp.__hmrId) {
13813
13887
  const oldStyles = this._childStyles.get(comp.__hmrId);
13814
13888
  if (oldStyles) {