@lwc/engine-core 2.5.10 → 2.6.3

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.
@@ -73,6 +73,170 @@ function parseStyleText(cssText) {
73
73
  return styleMap;
74
74
  }
75
75
 
76
+ //
77
+ // Primitives
78
+ //
79
+ let ssr;
80
+ function setSsr(ssrImpl) {
81
+ ssr = ssrImpl;
82
+ }
83
+ let isNativeShadowDefined;
84
+ function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
85
+ isNativeShadowDefined = isNativeShadowDefinedImpl;
86
+ }
87
+ let isSyntheticShadowDefined;
88
+ function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
89
+ isSyntheticShadowDefined = isSyntheticShadowDefinedImpl;
90
+ }
91
+ let HTMLElementExported;
92
+ function setHTMLElement(HTMLElementImpl) {
93
+ HTMLElementExported = HTMLElementImpl;
94
+ }
95
+ let isHydrating;
96
+ function setIsHydrating(isHydratingImpl) {
97
+ isHydrating = isHydratingImpl;
98
+ }
99
+ let insert;
100
+ function setInsert(insertImpl) {
101
+ insert = insertImpl;
102
+ }
103
+ let remove;
104
+ function setRemove(removeImpl) {
105
+ remove = removeImpl;
106
+ }
107
+ let createElement;
108
+ function setCreateElement(createElementImpl) {
109
+ createElement = createElementImpl;
110
+ }
111
+ let createText;
112
+ function setCreateText(createTextImpl) {
113
+ createText = createTextImpl;
114
+ }
115
+ let createComment;
116
+ function setCreateComment(createCommentImpl) {
117
+ createComment = createCommentImpl;
118
+ }
119
+ let nextSibling;
120
+ function setNextSibling(nextSiblingImpl) {
121
+ nextSibling = nextSiblingImpl;
122
+ }
123
+ let attachShadow;
124
+ function setAttachShadow(attachShadowImpl) {
125
+ attachShadow = attachShadowImpl;
126
+ }
127
+ let getProperty;
128
+ function setGetProperty(getPropertyImpl) {
129
+ getProperty = getPropertyImpl;
130
+ }
131
+ let setProperty;
132
+ function setSetProperty(setPropertyImpl) {
133
+ setProperty = setPropertyImpl;
134
+ }
135
+ let setText;
136
+ function setSetText(setTextImpl) {
137
+ setText = setTextImpl;
138
+ }
139
+ let getAttribute;
140
+ function setGetAttribute(getAttributeImpl) {
141
+ getAttribute = getAttributeImpl;
142
+ }
143
+ let setAttribute;
144
+ function setSetAttribute(setAttributeImpl) {
145
+ setAttribute = setAttributeImpl;
146
+ }
147
+ let removeAttribute;
148
+ function setRemoveAttribute(removeAttributeImpl) {
149
+ removeAttribute = removeAttributeImpl;
150
+ }
151
+ let addEventListener;
152
+ function setAddEventListener(addEventListenerImpl) {
153
+ addEventListener = addEventListenerImpl;
154
+ }
155
+ let removeEventListener;
156
+ function setRemoveEventListener(removeEventListenerImpl) {
157
+ removeEventListener = removeEventListenerImpl;
158
+ }
159
+ let dispatchEvent;
160
+ function setDispatchEvent(dispatchEventImpl) {
161
+ dispatchEvent = dispatchEventImpl;
162
+ }
163
+ let getClassList;
164
+ function setGetClassList(getClassListImpl) {
165
+ getClassList = getClassListImpl;
166
+ }
167
+ let setCSSStyleProperty;
168
+ function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
169
+ setCSSStyleProperty = setCSSStylePropertyImpl;
170
+ }
171
+ let getBoundingClientRect;
172
+ function setGetBoundingClientRect(getBoundingClientRectImpl) {
173
+ getBoundingClientRect = getBoundingClientRectImpl;
174
+ }
175
+ let querySelector;
176
+ function setQuerySelector(querySelectorImpl) {
177
+ querySelector = querySelectorImpl;
178
+ }
179
+ let querySelectorAll;
180
+ function setQuerySelectorAll(querySelectorAllImpl) {
181
+ querySelectorAll = querySelectorAllImpl;
182
+ }
183
+ let getElementsByTagName;
184
+ function setGetElementsByTagName(getElementsByTagNameImpl) {
185
+ getElementsByTagName = getElementsByTagNameImpl;
186
+ }
187
+ let getElementsByClassName;
188
+ function setGetElementsByClassName(getElementsByClassNameImpl) {
189
+ getElementsByClassName = getElementsByClassNameImpl;
190
+ }
191
+ let getChildren;
192
+ function setGetChildren(getChildrenImpl) {
193
+ getChildren = getChildrenImpl;
194
+ }
195
+ let getChildNodes;
196
+ function setGetChildNodes(getChildNodesImpl) {
197
+ getChildNodes = getChildNodesImpl;
198
+ }
199
+ let getFirstChild;
200
+ function setGetFirstChild(getFirstChildImpl) {
201
+ getFirstChild = getFirstChildImpl;
202
+ }
203
+ let getFirstElementChild;
204
+ function setGetFirstElementChild(getFirstElementChildImpl) {
205
+ getFirstElementChild = getFirstElementChildImpl;
206
+ }
207
+ let getLastChild;
208
+ function setGetLastChild(getLastChildImpl) {
209
+ getLastChild = getLastChildImpl;
210
+ }
211
+ let getLastElementChild;
212
+ function setGetLastElementChild(getLastElementChildImpl) {
213
+ getLastElementChild = getLastElementChildImpl;
214
+ }
215
+ let isConnected;
216
+ function setIsConnected(isConnectedImpl) {
217
+ isConnected = isConnectedImpl;
218
+ }
219
+ let insertGlobalStylesheet;
220
+ function setInsertGlobalStylesheet(insertGlobalStylesheetImpl) {
221
+ insertGlobalStylesheet = insertGlobalStylesheetImpl;
222
+ }
223
+ let insertStylesheet;
224
+ function setInsertStylesheet(insertStylesheetImpl) {
225
+ insertStylesheet = insertStylesheetImpl;
226
+ }
227
+ let assertInstanceOfHTMLElement;
228
+ function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
229
+ assertInstanceOfHTMLElement = assertInstanceOfHTMLElementImpl;
230
+ }
231
+ let defineCustomElement;
232
+ function setDefineCustomElement(defineCustomElementImpl) {
233
+ defineCustomElement = defineCustomElementImpl;
234
+ }
235
+ let getCustomElement;
236
+ function setGetCustomElement(getCustomElementImpl) {
237
+ getCustomElement = getCustomElementImpl;
238
+ }
239
+
76
240
  /*
77
241
  * Copyright (c) 2019, salesforce.com, inc.
78
242
  * All rights reserved.
@@ -314,9 +478,6 @@ function createAllEventListeners(vnode) {
314
478
  elm,
315
479
  data: {
316
480
  on
317
- },
318
- owner: {
319
- renderer
320
481
  }
321
482
  } = vnode;
322
483
 
@@ -329,7 +490,7 @@ function createAllEventListeners(vnode) {
329
490
  let name;
330
491
 
331
492
  for (name in on) {
332
- renderer.addEventListener(elm, name, listener);
493
+ addEventListener(elm, name, listener);
333
494
  }
334
495
  }
335
496
 
@@ -468,9 +629,6 @@ function updateAttrs(oldVnode, vnode) {
468
629
  const {
469
630
  data: {
470
631
  attrs
471
- },
472
- owner: {
473
- renderer
474
632
  }
475
633
  } = vnode;
476
634
 
@@ -493,10 +651,6 @@ function updateAttrs(oldVnode, vnode) {
493
651
  }
494
652
 
495
653
  const elm = vnode.elm;
496
- const {
497
- setAttribute,
498
- removeAttribute
499
- } = renderer;
500
654
  let key;
501
655
  oldAttrs = shared.isUndefined(oldAttrs) ? EmptyObject : oldAttrs; // update modified attributes, add new attributes
502
656
  // this routine is only useful for data-* attributes in all kind of elements
@@ -515,7 +669,7 @@ function updateAttrs(oldVnode, vnode) {
515
669
  } else if (shared.StringCharCodeAt.call(key, 5) === ColonCharCode) {
516
670
  // Assume xlink namespace
517
671
  setAttribute(elm, key, cur, xlinkNS);
518
- } else if (shared.isNull(cur)) {
672
+ } else if (shared.isNull(cur) || shared.isUndefined(cur)) {
519
673
  removeAttribute(elm, key);
520
674
  } else {
521
675
  setAttribute(elm, key, cur);
@@ -567,17 +721,14 @@ function update(oldVnode, vnode) {
567
721
  const isFirstPatch = shared.isUndefined(oldProps);
568
722
  const {
569
723
  elm,
570
- sel,
571
- owner: {
572
- renderer
573
- }
724
+ sel
574
725
  } = vnode;
575
726
 
576
727
  for (const key in props) {
577
728
  const cur = props[key]; // if it is the first time this element is patched, or the current value is different to the previous value...
578
729
 
579
- if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? renderer.getProperty(elm, key) : oldProps[key])) {
580
- renderer.setProperty(elm, key, cur);
730
+ if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
731
+ setProperty(elm, key, cur);
581
732
  }
582
733
  }
583
734
  }
@@ -646,9 +797,6 @@ function updateClassAttribute(oldVnode, vnode) {
646
797
  elm,
647
798
  data: {
648
799
  className: newClass
649
- },
650
- owner: {
651
- renderer
652
800
  }
653
801
  } = vnode;
654
802
  const {
@@ -661,7 +809,7 @@ function updateClassAttribute(oldVnode, vnode) {
661
809
  return;
662
810
  }
663
811
 
664
- const classList = renderer.getClassList(elm);
812
+ const classList = getClassList(elm);
665
813
  const newClassMap = getMapFromClassName(newClass);
666
814
  const oldClassMap = getMapFromClassName(oldClass);
667
815
  let name;
@@ -700,15 +848,8 @@ function updateStyleAttribute(oldVnode, vnode) {
700
848
  elm,
701
849
  data: {
702
850
  style: newStyle
703
- },
704
- owner: {
705
- renderer
706
851
  }
707
852
  } = vnode;
708
- const {
709
- setAttribute,
710
- removeAttribute
711
- } = renderer;
712
853
 
713
854
  if (oldVnode.data.style === newStyle) {
714
855
  return;
@@ -743,9 +884,6 @@ function createClassAttribute(vnode) {
743
884
  elm,
744
885
  data: {
745
886
  classMap
746
- },
747
- owner: {
748
- renderer
749
887
  }
750
888
  } = vnode;
751
889
 
@@ -753,7 +891,7 @@ function createClassAttribute(vnode) {
753
891
  return;
754
892
  }
755
893
 
756
- const classList = renderer.getClassList(elm);
894
+ const classList = getClassList(elm);
757
895
 
758
896
  for (const name in classMap) {
759
897
  classList.add(name);
@@ -778,9 +916,6 @@ function createStyleAttribute(vnode) {
778
916
  elm,
779
917
  data: {
780
918
  styleDecls
781
- },
782
- owner: {
783
- renderer
784
919
  }
785
920
  } = vnode;
786
921
 
@@ -790,7 +925,7 @@ function createStyleAttribute(vnode) {
790
925
 
791
926
  for (let i = 0; i < styleDecls.length; i++) {
792
927
  const [prop, value, important] = styleDecls[i];
793
- renderer.setCSSStyleProperty(elm, prop, value, important);
928
+ setCSSStyleProperty(elm, prop, value, important);
794
929
  }
795
930
  }
796
931
 
@@ -805,14 +940,6 @@ var modStaticStyle = {
805
940
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
806
941
  */
807
942
 
808
- /**
809
- @license
810
- Copyright (c) 2015 Simon Friis Vindum.
811
- This code may only be used under the MIT License found at
812
- https://github.com/snabbdom/snabbdom/blob/master/LICENSE
813
- Code distributed by Snabbdom as part of the Snabbdom project at
814
- https://github.com/snabbdom/snabbdom/
815
- */
816
943
  function isUndef(s) {
817
944
  return s === undefined;
818
945
  }
@@ -900,7 +1027,7 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
900
1027
  } else if (sameVnode(oldStartVnode, newEndVnode)) {
901
1028
  // Vnode moved right
902
1029
  patchVnode(oldStartVnode, newEndVnode);
903
- newEndVnode.hook.move(oldStartVnode, parentElm, oldEndVnode.owner.renderer.nextSibling(oldEndVnode.elm));
1030
+ newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling(oldEndVnode.elm));
904
1031
  oldStartVnode = oldCh[++oldStartIdx];
905
1032
  newEndVnode = newCh[--newEndIdx];
906
1033
  } else if (sameVnode(oldEndVnode, newStartVnode)) {
@@ -1377,7 +1504,7 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
1377
1504
  }
1378
1505
 
1379
1506
  /*
1380
- * Copyright (c) 2020, salesforce.com, inc.
1507
+ * Copyright (c) 2018, salesforce.com, inc.
1381
1508
  * All rights reserved.
1382
1509
  * SPDX-License-Identifier: MIT
1383
1510
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -1428,6 +1555,7 @@ const {
1428
1555
  isArray
1429
1556
  } = Array;
1430
1557
  const {
1558
+ prototype: ObjectDotPrototype,
1431
1559
  getPrototypeOf,
1432
1560
  create: ObjectCreate,
1433
1561
  defineProperty: ObjectDefineProperty,
@@ -2077,8 +2205,6 @@ if (process.env.NODE_ENV !== 'production') {
2077
2205
  init();
2078
2206
  }
2079
2207
 
2080
- const ObjectDotPrototype = Object.prototype;
2081
-
2082
2208
  function defaultValueIsObservable(value) {
2083
2209
  // intentionally checking for null
2084
2210
  if (value === null) {
@@ -2106,99 +2232,85 @@ const defaultValueMutated = (obj, key) => {
2106
2232
  /* do nothing */
2107
2233
  };
2108
2234
 
2109
- const defaultValueDistortion = value => value;
2110
-
2111
2235
  function createShadowTarget(value) {
2112
2236
  return isArray(value) ? [] : {};
2113
2237
  }
2114
2238
 
2115
- class ReactiveMembrane {
2116
- constructor(options) {
2117
- this.valueDistortion = defaultValueDistortion;
2118
- this.valueMutated = defaultValueMutated;
2119
- this.valueObserved = defaultValueObserved;
2120
- this.valueIsObservable = defaultValueIsObservable;
2239
+ class ObservableMembrane {
2240
+ constructor(options = {}) {
2121
2241
  this.readOnlyObjectGraph = new WeakMap();
2122
2242
  this.reactiveObjectGraph = new WeakMap();
2123
-
2124
- if (!isUndefined(options)) {
2125
- const {
2126
- valueDistortion,
2127
- valueMutated,
2128
- valueObserved,
2129
- valueIsObservable,
2130
- tagPropertyKey
2131
- } = options;
2132
- this.valueDistortion = isFunction(valueDistortion) ? valueDistortion : defaultValueDistortion;
2133
- this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
2134
- this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
2135
- this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
2136
- this.tagPropertyKey = tagPropertyKey;
2137
- }
2243
+ const {
2244
+ valueMutated,
2245
+ valueObserved,
2246
+ valueIsObservable,
2247
+ tagPropertyKey
2248
+ } = options;
2249
+ this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
2250
+ this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
2251
+ this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
2252
+ this.tagPropertyKey = tagPropertyKey;
2138
2253
  }
2139
2254
 
2140
2255
  getProxy(value) {
2141
2256
  const unwrappedValue = unwrap$1(value);
2142
- const distorted = this.valueDistortion(unwrappedValue);
2143
2257
 
2144
- if (this.valueIsObservable(distorted)) {
2145
- if (this.readOnlyObjectGraph.get(distorted) === value) {
2146
- // when trying to extract the writable version of a readonly
2147
- // we return the readonly.
2258
+ if (this.valueIsObservable(unwrappedValue)) {
2259
+ // When trying to extract the writable version of a readonly we return the readonly.
2260
+ if (this.readOnlyObjectGraph.get(unwrappedValue) === value) {
2148
2261
  return value;
2149
2262
  }
2150
2263
 
2151
- return this.getReactiveHandler(unwrappedValue, distorted);
2264
+ return this.getReactiveHandler(unwrappedValue);
2152
2265
  }
2153
2266
 
2154
- return distorted;
2267
+ return unwrappedValue;
2155
2268
  }
2156
2269
 
2157
2270
  getReadOnlyProxy(value) {
2158
2271
  value = unwrap$1(value);
2159
- const distorted = this.valueDistortion(value);
2160
2272
 
2161
- if (this.valueIsObservable(distorted)) {
2162
- return this.getReadOnlyHandler(value, distorted);
2273
+ if (this.valueIsObservable(value)) {
2274
+ return this.getReadOnlyHandler(value);
2163
2275
  }
2164
2276
 
2165
- return distorted;
2277
+ return value;
2166
2278
  }
2167
2279
 
2168
2280
  unwrapProxy(p) {
2169
2281
  return unwrap$1(p);
2170
2282
  }
2171
2283
 
2172
- getReactiveHandler(value, distortedValue) {
2173
- let proxy = this.reactiveObjectGraph.get(distortedValue);
2284
+ getReactiveHandler(value) {
2285
+ let proxy = this.reactiveObjectGraph.get(value);
2174
2286
 
2175
2287
  if (isUndefined(proxy)) {
2176
2288
  // caching the proxy after the first time it is accessed
2177
- const handler = new ReactiveProxyHandler(this, distortedValue);
2178
- proxy = new Proxy(createShadowTarget(distortedValue), handler);
2289
+ const handler = new ReactiveProxyHandler(this, value);
2290
+ proxy = new Proxy(createShadowTarget(value), handler);
2179
2291
  registerProxy(proxy, value);
2180
- this.reactiveObjectGraph.set(distortedValue, proxy);
2292
+ this.reactiveObjectGraph.set(value, proxy);
2181
2293
  }
2182
2294
 
2183
2295
  return proxy;
2184
2296
  }
2185
2297
 
2186
- getReadOnlyHandler(value, distortedValue) {
2187
- let proxy = this.readOnlyObjectGraph.get(distortedValue);
2298
+ getReadOnlyHandler(value) {
2299
+ let proxy = this.readOnlyObjectGraph.get(value);
2188
2300
 
2189
2301
  if (isUndefined(proxy)) {
2190
2302
  // caching the proxy after the first time it is accessed
2191
- const handler = new ReadOnlyHandler(this, distortedValue);
2192
- proxy = new Proxy(createShadowTarget(distortedValue), handler);
2303
+ const handler = new ReadOnlyHandler(this, value);
2304
+ proxy = new Proxy(createShadowTarget(value), handler);
2193
2305
  registerProxy(proxy, value);
2194
- this.readOnlyObjectGraph.set(distortedValue, proxy);
2306
+ this.readOnlyObjectGraph.set(value, proxy);
2195
2307
  }
2196
2308
 
2197
2309
  return proxy;
2198
2310
  }
2199
2311
 
2200
2312
  }
2201
- /** version: 1.1.5 */
2313
+ /** version: 2.0.0 */
2202
2314
 
2203
2315
  /*
2204
2316
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2207,15 +2319,9 @@ class ReactiveMembrane {
2207
2319
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
2208
2320
  */
2209
2321
  const lockerLivePropertyKey = Symbol.for('@@lockerLiveValue');
2210
-
2211
- function valueDistortion(value) {
2212
- return value;
2213
- }
2214
-
2215
- const reactiveMembrane = new ReactiveMembrane({
2322
+ const reactiveMembrane = new ObservableMembrane({
2216
2323
  valueObserved,
2217
2324
  valueMutated,
2218
- valueDistortion,
2219
2325
  tagPropertyKey: lockerLivePropertyKey
2220
2326
  });
2221
2327
  /**
@@ -2224,16 +2330,9 @@ const reactiveMembrane = new ReactiveMembrane({
2224
2330
  * change or being removed.
2225
2331
  */
2226
2332
 
2227
- const unwrap = function (value) {
2228
- const unwrapped = reactiveMembrane.unwrapProxy(value);
2229
-
2230
- if (unwrapped !== value) {
2231
- // if value is a proxy, unwrap to access original value and apply distortion
2232
- return valueDistortion(unwrapped);
2233
- }
2234
-
2235
- return value;
2236
- };
2333
+ function unwrap(value) {
2334
+ return reactiveMembrane.unwrapProxy(value);
2335
+ }
2237
2336
 
2238
2337
  /*
2239
2338
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2320,9 +2419,7 @@ function createBridgeToElementDescriptor(propName, descriptor) {
2320
2419
 
2321
2420
 
2322
2421
  const LightningElement = function () {
2323
- var _a; // This should be as performant as possible, while any initialization should be done lazily
2324
-
2325
-
2422
+ // This should be as performant as possible, while any initialization should be done lazily
2326
2423
  if (shared.isNull(vmBeingConstructed)) {
2327
2424
  throw new ReferenceError('Illegal constructor');
2328
2425
  }
@@ -2330,15 +2427,14 @@ const LightningElement = function () {
2330
2427
  const vm = vmBeingConstructed;
2331
2428
  const {
2332
2429
  def,
2333
- elm,
2334
- renderer
2430
+ elm
2335
2431
  } = vm;
2336
2432
  const {
2337
2433
  bridge
2338
2434
  } = def;
2339
2435
 
2340
2436
  if (process.env.NODE_ENV !== 'production') {
2341
- (_a = renderer.assertInstanceOfHTMLElement) === null || _a === void 0 ? void 0 : _a.call(renderer, vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
2437
+ assertInstanceOfHTMLElement(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
2342
2438
  }
2343
2439
 
2344
2440
  const component = this;
@@ -2368,7 +2464,7 @@ const LightningElement = function () {
2368
2464
  if (vm.renderMode === 1
2369
2465
  /* Shadow */
2370
2466
  ) {
2371
- attachShadow(vm);
2467
+ doAttachShadow(vm);
2372
2468
  } // Adding extra guard rails in DEV mode.
2373
2469
 
2374
2470
 
@@ -2380,17 +2476,16 @@ const LightningElement = function () {
2380
2476
  return this;
2381
2477
  };
2382
2478
 
2383
- function attachShadow(vm) {
2479
+ function doAttachShadow(vm) {
2384
2480
  const {
2385
2481
  elm,
2386
2482
  mode,
2387
- renderer,
2388
2483
  shadowMode,
2389
2484
  def: {
2390
2485
  ctor
2391
2486
  }
2392
2487
  } = vm;
2393
- const cmpRoot = renderer.attachShadow(elm, {
2488
+ const cmpRoot = attachShadow(elm, {
2394
2489
  [shared.KEY__SYNTHETIC_MODE]: shadowMode === 1
2395
2490
  /* Synthetic */
2396
2491
  ,
@@ -2417,10 +2512,7 @@ LightningElement.prototype = {
2417
2512
 
2418
2513
  dispatchEvent(event) {
2419
2514
  const {
2420
- elm,
2421
- renderer: {
2422
- dispatchEvent
2423
- }
2515
+ elm
2424
2516
  } = getAssociatedVM(this);
2425
2517
  return dispatchEvent(elm, event);
2426
2518
  },
@@ -2428,10 +2520,7 @@ LightningElement.prototype = {
2428
2520
  addEventListener(type, listener, options) {
2429
2521
  const vm = getAssociatedVM(this);
2430
2522
  const {
2431
- elm,
2432
- renderer: {
2433
- addEventListener
2434
- }
2523
+ elm
2435
2524
  } = vm;
2436
2525
 
2437
2526
  if (process.env.NODE_ENV !== 'production') {
@@ -2448,10 +2537,7 @@ LightningElement.prototype = {
2448
2537
  removeEventListener(type, listener, options) {
2449
2538
  const vm = getAssociatedVM(this);
2450
2539
  const {
2451
- elm,
2452
- renderer: {
2453
- removeEventListener
2454
- }
2540
+ elm
2455
2541
  } = vm;
2456
2542
  const wrappedListener = getWrappedComponentsListener(vm, listener);
2457
2543
  removeEventListener(elm, type, wrappedListener, options);
@@ -2459,30 +2545,21 @@ LightningElement.prototype = {
2459
2545
 
2460
2546
  hasAttribute(name) {
2461
2547
  const {
2462
- elm,
2463
- renderer: {
2464
- getAttribute
2465
- }
2548
+ elm
2466
2549
  } = getAssociatedVM(this);
2467
2550
  return !shared.isNull(getAttribute(elm, name));
2468
2551
  },
2469
2552
 
2470
2553
  hasAttributeNS(namespace, name) {
2471
2554
  const {
2472
- elm,
2473
- renderer: {
2474
- getAttribute
2475
- }
2555
+ elm
2476
2556
  } = getAssociatedVM(this);
2477
2557
  return !shared.isNull(getAttribute(elm, name, namespace));
2478
2558
  },
2479
2559
 
2480
2560
  removeAttribute(name) {
2481
2561
  const {
2482
- elm,
2483
- renderer: {
2484
- removeAttribute
2485
- }
2562
+ elm
2486
2563
  } = getAssociatedVM(this);
2487
2564
  unlockAttribute(elm, name);
2488
2565
  removeAttribute(elm, name);
@@ -2491,10 +2568,7 @@ LightningElement.prototype = {
2491
2568
 
2492
2569
  removeAttributeNS(namespace, name) {
2493
2570
  const {
2494
- elm,
2495
- renderer: {
2496
- removeAttribute
2497
- }
2571
+ elm
2498
2572
  } = getAssociatedVM(this);
2499
2573
  unlockAttribute(elm, name);
2500
2574
  removeAttribute(elm, name, namespace);
@@ -2503,20 +2577,14 @@ LightningElement.prototype = {
2503
2577
 
2504
2578
  getAttribute(name) {
2505
2579
  const {
2506
- elm,
2507
- renderer: {
2508
- getAttribute
2509
- }
2580
+ elm
2510
2581
  } = getAssociatedVM(this);
2511
2582
  return getAttribute(elm, name);
2512
2583
  },
2513
2584
 
2514
2585
  getAttributeNS(namespace, name) {
2515
2586
  const {
2516
- elm,
2517
- renderer: {
2518
- getAttribute
2519
- }
2587
+ elm
2520
2588
  } = getAssociatedVM(this);
2521
2589
  return getAttribute(elm, name, namespace);
2522
2590
  },
@@ -2524,10 +2592,7 @@ LightningElement.prototype = {
2524
2592
  setAttribute(name, value) {
2525
2593
  const vm = getAssociatedVM(this);
2526
2594
  const {
2527
- elm,
2528
- renderer: {
2529
- setAttribute
2530
- }
2595
+ elm
2531
2596
  } = vm;
2532
2597
 
2533
2598
  if (process.env.NODE_ENV !== 'production') {
@@ -2542,10 +2607,7 @@ LightningElement.prototype = {
2542
2607
  setAttributeNS(namespace, name, value) {
2543
2608
  const vm = getAssociatedVM(this);
2544
2609
  const {
2545
- elm,
2546
- renderer: {
2547
- setAttribute
2548
- }
2610
+ elm
2549
2611
  } = vm;
2550
2612
 
2551
2613
  if (process.env.NODE_ENV !== 'production') {
@@ -2560,10 +2622,7 @@ LightningElement.prototype = {
2560
2622
  getBoundingClientRect() {
2561
2623
  const vm = getAssociatedVM(this);
2562
2624
  const {
2563
- elm,
2564
- renderer: {
2565
- getBoundingClientRect
2566
- }
2625
+ elm
2567
2626
  } = vm;
2568
2627
 
2569
2628
  if (process.env.NODE_ENV !== 'production') {
@@ -2575,10 +2634,7 @@ LightningElement.prototype = {
2575
2634
 
2576
2635
  get isConnected() {
2577
2636
  const {
2578
- elm,
2579
- renderer: {
2580
- isConnected
2581
- }
2637
+ elm
2582
2638
  } = getAssociatedVM(this);
2583
2639
  return isConnected(elm);
2584
2640
  },
@@ -2586,10 +2642,7 @@ LightningElement.prototype = {
2586
2642
  get classList() {
2587
2643
  const vm = getAssociatedVM(this);
2588
2644
  const {
2589
- elm,
2590
- renderer: {
2591
- getClassList
2592
- }
2645
+ elm
2593
2646
  } = vm;
2594
2647
 
2595
2648
  if (process.env.NODE_ENV !== 'production') {
@@ -2632,23 +2685,48 @@ LightningElement.prototype = {
2632
2685
  }
2633
2686
 
2634
2687
  };
2635
- const queryAndChildGetterDescriptors = shared.create(null);
2636
- const childGetters = [['children', 'getChildren'], ['childNodes', 'getChildNodes'], ['firstChild', 'getFirstChild'], ['firstElementChild', 'getFirstElementChild'], ['lastChild', 'getLastChild'], ['lastElementChild', 'getLastElementChild']]; // Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
2688
+ const queryAndChildGetterDescriptors = shared.create(null); // The reason we don't just call `import * as renderer from '../renderer'` here is that the bundle size
2689
+ // is smaller if we reference each function individually. Otherwise Rollup will create one big frozen
2690
+ // object representing the renderer, with a lot of methods we don't actually need.
2691
+
2692
+ const childGetters = ['children', 'childNodes', 'firstChild', 'firstElementChild', 'lastChild', 'lastElementChild'];
2693
+
2694
+ function getChildGetter(methodName) {
2695
+ switch (methodName) {
2696
+ case 'children':
2697
+ return getChildren;
2698
+
2699
+ case 'childNodes':
2700
+ return getChildNodes;
2701
+
2702
+ case 'firstChild':
2703
+ return getFirstChild;
2704
+
2705
+ case 'firstElementChild':
2706
+ return getFirstElementChild;
2637
2707
 
2638
- for (const [elementProp, rendererMethod] of childGetters) {
2639
- queryAndChildGetterDescriptors[elementProp] = {
2708
+ case 'lastChild':
2709
+ return getLastChild;
2710
+
2711
+ case 'lastElementChild':
2712
+ return getLastElementChild;
2713
+ }
2714
+ } // Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
2715
+
2716
+
2717
+ for (const childGetter of childGetters) {
2718
+ queryAndChildGetterDescriptors[childGetter] = {
2640
2719
  get() {
2641
2720
  const vm = getAssociatedVM(this);
2642
2721
  const {
2643
- elm,
2644
- renderer
2722
+ elm
2645
2723
  } = vm;
2646
2724
 
2647
2725
  if (process.env.NODE_ENV !== 'production') {
2648
- warnIfInvokedDuringConstruction(vm, elementProp);
2726
+ warnIfInvokedDuringConstruction(vm, childGetter);
2649
2727
  }
2650
2728
 
2651
- return renderer[rendererMethod](elm);
2729
+ return getChildGetter(childGetter)(elm);
2652
2730
  },
2653
2731
 
2654
2732
  configurable: true,
@@ -2656,22 +2734,38 @@ for (const [elementProp, rendererMethod] of childGetters) {
2656
2734
  };
2657
2735
  }
2658
2736
 
2659
- const queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll']; // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
2737
+ const queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll'];
2738
+
2739
+ function getQueryMethod(methodName) {
2740
+ switch (methodName) {
2741
+ case 'getElementsByClassName':
2742
+ return getElementsByClassName;
2743
+
2744
+ case 'getElementsByTagName':
2745
+ return getElementsByTagName;
2746
+
2747
+ case 'querySelector':
2748
+ return querySelector;
2749
+
2750
+ case 'querySelectorAll':
2751
+ return querySelectorAll;
2752
+ }
2753
+ } // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
2754
+
2660
2755
 
2661
2756
  for (const queryMethod of queryMethods) {
2662
2757
  queryAndChildGetterDescriptors[queryMethod] = {
2663
2758
  value(arg) {
2664
2759
  const vm = getAssociatedVM(this);
2665
2760
  const {
2666
- elm,
2667
- renderer
2761
+ elm
2668
2762
  } = vm;
2669
2763
 
2670
2764
  if (process.env.NODE_ENV !== 'production') {
2671
2765
  warnIfInvokedDuringConstruction(vm, `${queryMethod}()`);
2672
2766
  }
2673
2767
 
2674
- return renderer[queryMethod](elm, arg);
2768
+ return getQueryMethod(queryMethod)(elm, arg);
2675
2769
  },
2676
2770
 
2677
2771
  configurable: true,
@@ -3801,10 +3895,6 @@ function createComponentDef(Ctor) {
3801
3895
 
3802
3896
  shared.assert.isTrue(Ctor.constructor, `Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
3803
3897
 
3804
- if (!features.runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
3805
- shared.assert.isFalse('shadowSupportMode' in Ctor, `${ctorName || 'Anonymous class'} is an invalid LWC component. The shadowSupportMode static property is not available in this environment.`);
3806
- }
3807
-
3808
3898
  if (!shared.isUndefined(ctorShadowSupportMode)) {
3809
3899
  shared.assert.invariant(ctorShadowSupportMode === "any"
3810
3900
  /* Any */
@@ -4046,17 +4136,14 @@ function setScopeTokenClassIfNecessary(elm, owner) {
4046
4136
  const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
4047
4137
 
4048
4138
  if (!shared.isUndefined(token) && context.hasScopedStyles) {
4049
- owner.renderer.getClassList(elm).add(token);
4139
+ getClassList(elm).add(token);
4050
4140
  }
4051
4141
  }
4052
4142
 
4053
4143
  function updateNodeHook(oldVnode, vnode) {
4054
4144
  const {
4055
4145
  elm,
4056
- text,
4057
- owner: {
4058
- renderer
4059
- }
4146
+ text
4060
4147
  } = vnode;
4061
4148
 
4062
4149
  if (oldVnode.text !== text) {
@@ -4064,7 +4151,7 @@ function updateNodeHook(oldVnode, vnode) {
4064
4151
  unlockDomMutation();
4065
4152
  }
4066
4153
 
4067
- renderer.setText(elm, text);
4154
+ setText(elm, text);
4068
4155
 
4069
4156
  if (process.env.NODE_ENV !== 'production') {
4070
4157
  lockDomMutation();
@@ -4072,30 +4159,22 @@ function updateNodeHook(oldVnode, vnode) {
4072
4159
  }
4073
4160
  }
4074
4161
  function insertNodeHook(vnode, parentNode, referenceNode) {
4075
- const {
4076
- renderer
4077
- } = vnode.owner;
4078
-
4079
4162
  if (process.env.NODE_ENV !== 'production') {
4080
4163
  unlockDomMutation();
4081
4164
  }
4082
4165
 
4083
- renderer.insert(vnode.elm, parentNode, referenceNode);
4166
+ insert(vnode.elm, parentNode, referenceNode);
4084
4167
 
4085
4168
  if (process.env.NODE_ENV !== 'production') {
4086
4169
  lockDomMutation();
4087
4170
  }
4088
4171
  }
4089
4172
  function removeNodeHook(vnode, parentNode) {
4090
- const {
4091
- renderer
4092
- } = vnode.owner;
4093
-
4094
4173
  if (process.env.NODE_ENV !== 'production') {
4095
4174
  unlockDomMutation();
4096
4175
  }
4097
4176
 
4098
- renderer.remove(vnode.elm, parentNode);
4177
+ remove(vnode.elm, parentNode);
4099
4178
 
4100
4179
  if (process.env.NODE_ENV !== 'production') {
4101
4180
  lockDomMutation();
@@ -4182,13 +4261,15 @@ function updateElmHook(oldVnode, vnode) {
4182
4261
  }
4183
4262
  function updateChildrenHook(oldVnode, vnode) {
4184
4263
  const {
4185
- children,
4186
- owner
4264
+ elm,
4265
+ children
4187
4266
  } = vnode;
4188
- const fn = hasDynamicChildren(children) ? updateDynamicChildren : updateStaticChildren;
4189
- runWithBoundaryProtection(owner, owner.owner, shared.noop, () => {
4190
- fn(vnode.elm, oldVnode.children, children);
4191
- }, shared.noop);
4267
+
4268
+ if (hasDynamicChildren(children)) {
4269
+ updateDynamicChildren(elm, oldVnode.children, children);
4270
+ } else {
4271
+ updateStaticChildren(elm, oldVnode.children, children);
4272
+ }
4192
4273
  }
4193
4274
  function allocateChildrenHook(vnode, vm) {
4194
4275
  // A component with slots will re-render because:
@@ -4252,8 +4333,7 @@ function createViewModelHook(elm, vnode) {
4252
4333
  createVM(elm, def, {
4253
4334
  mode,
4254
4335
  owner,
4255
- tagName: sel,
4256
- renderer: owner.renderer
4336
+ tagName: sel
4257
4337
  });
4258
4338
 
4259
4339
  if (process.env.NODE_ENV !== 'production') {
@@ -4297,16 +4377,13 @@ function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
4297
4377
  const {
4298
4378
  data: {
4299
4379
  attrs = {}
4300
- },
4301
- owner: {
4302
- renderer
4303
4380
  }
4304
4381
  } = vnode;
4305
4382
  let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
4306
4383
  // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
4307
4384
 
4308
4385
  for (const [attrName, attrValue] of Object.entries(attrs)) {
4309
- const elmAttrValue = renderer.getAttribute(elm, attrName);
4386
+ const elmAttrValue = getAttribute(elm, attrName);
4310
4387
 
4311
4388
  if (String(attrValue) !== elmAttrValue) {
4312
4389
  logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
@@ -4322,9 +4399,6 @@ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
4322
4399
  data: {
4323
4400
  className,
4324
4401
  classMap
4325
- },
4326
- owner: {
4327
- renderer
4328
4402
  }
4329
4403
  } = vnode;
4330
4404
  let nodesAreCompatible = true;
@@ -4336,7 +4410,7 @@ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
4336
4410
  vnodeClassName = className;
4337
4411
  } else if (!shared.isUndefined(classMap)) {
4338
4412
  // classMap is used when class is set to static value.
4339
- const classList = renderer.getClassList(elm);
4413
+ const classList = getClassList(elm);
4340
4414
  let computedClassName = ''; // all classes from the vnode should be in the element.classList
4341
4415
 
4342
4416
  for (const name in classMap) {
@@ -4366,12 +4440,9 @@ function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
4366
4440
  data: {
4367
4441
  style,
4368
4442
  styleDecls
4369
- },
4370
- owner: {
4371
- renderer
4372
4443
  }
4373
4444
  } = vnode;
4374
- const elmStyle = renderer.getAttribute(elm, 'style') || '';
4445
+ const elmStyle = getAttribute(elm, 'style') || '';
4375
4446
  let vnodeStyle;
4376
4447
  let nodesAreCompatible = true;
4377
4448
 
@@ -4503,12 +4574,12 @@ function hasDynamicChildren(children) {
4503
4574
  * SPDX-License-Identifier: MIT
4504
4575
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
4505
4576
  */
4506
- function getUpgradableConstructor(tagName, renderer) {
4577
+ function getUpgradableConstructor(tagName) {
4507
4578
  // Should never get a tag with upper case letter at this point, the compiler should
4508
4579
  // produce only tags with lowercase letters
4509
4580
  // But, for backwards compatibility, we will lower case the tagName
4510
4581
  tagName = tagName.toLowerCase();
4511
- let CE = renderer.getCustomElement(tagName);
4582
+ let CE = getCustomElement(tagName);
4512
4583
 
4513
4584
  if (!shared.isUndefined(CE)) {
4514
4585
  return CE;
@@ -4519,7 +4590,7 @@ function getUpgradableConstructor(tagName, renderer) {
4519
4590
  */
4520
4591
 
4521
4592
 
4522
- CE = class LWCUpgradableElement extends renderer.HTMLElement {
4593
+ CE = class LWCUpgradableElement extends HTMLElementExported {
4523
4594
  constructor(upgradeCallback) {
4524
4595
  super();
4525
4596
 
@@ -4529,7 +4600,7 @@ function getUpgradableConstructor(tagName, renderer) {
4529
4600
  }
4530
4601
 
4531
4602
  };
4532
- renderer.defineCustomElement(tagName, CE);
4603
+ defineCustomElement(tagName, CE);
4533
4604
  return CE;
4534
4605
  }
4535
4606
 
@@ -4546,10 +4617,7 @@ const TextHook = {
4546
4617
  const {
4547
4618
  owner
4548
4619
  } = vnode;
4549
- const {
4550
- renderer
4551
- } = owner;
4552
- const elm = renderer.createText(vnode.text);
4620
+ const elm = createText(vnode.text);
4553
4621
  linkNodeToShadow(elm, owner);
4554
4622
  vnode.elm = elm;
4555
4623
  },
@@ -4583,10 +4651,7 @@ const CommentHook = {
4583
4651
  owner,
4584
4652
  text
4585
4653
  } = vnode;
4586
- const {
4587
- renderer
4588
- } = owner;
4589
- const elm = renderer.createComment(text);
4654
+ const elm = createComment(text);
4590
4655
  linkNodeToShadow(elm, owner);
4591
4656
  vnode.elm = elm;
4592
4657
  },
@@ -4628,11 +4693,8 @@ const ElementHook = {
4628
4693
  svg
4629
4694
  }
4630
4695
  } = vnode;
4631
- const {
4632
- renderer
4633
- } = owner;
4634
4696
  const namespace = shared.isTrue(svg) ? SVG_NAMESPACE : undefined;
4635
- const elm = renderer.createElement(sel, namespace);
4697
+ const elm = createElement(sel, namespace);
4636
4698
  linkNodeToShadow(elm, owner);
4637
4699
  fallbackElmHook(elm, vnode);
4638
4700
  vnode.elm = elm;
@@ -4692,10 +4754,7 @@ const CustomElementHook = {
4692
4754
  sel,
4693
4755
  owner
4694
4756
  } = vnode;
4695
- const {
4696
- renderer
4697
- } = owner;
4698
- const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
4757
+ const UpgradableConstructor = getUpgradableConstructor(sel);
4699
4758
  /**
4700
4759
  * Note: if the upgradable constructor does not expect, or throw when we new it
4701
4760
  * with a callback as the first argument, we could implement a more advanced
@@ -4788,8 +4847,7 @@ const CustomElementHook = {
4788
4847
  createVM(elm, def, {
4789
4848
  mode,
4790
4849
  owner,
4791
- tagName: sel,
4792
- renderer: owner.renderer
4850
+ tagName: sel
4793
4851
  });
4794
4852
  vnode.elm = elm;
4795
4853
  const vm = getAssociatedVM(elm);
@@ -4818,12 +4876,11 @@ const CustomElementHook = {
4818
4876
 
4819
4877
  function linkNodeToShadow(elm, owner) {
4820
4878
  const {
4821
- renderer,
4822
4879
  renderMode,
4823
4880
  shadowMode
4824
4881
  } = owner; // TODO [#1164]: this should eventually be done by the polyfill directly
4825
4882
 
4826
- if (renderer.isSyntheticShadowDefined) {
4883
+ if (isSyntheticShadowDefined) {
4827
4884
  if (shadowMode === 1
4828
4885
  /* Synthetic */
4829
4886
  || renderMode === 0
@@ -5355,7 +5412,6 @@ function updateStylesheetToken(vm, template) {
5355
5412
  const {
5356
5413
  elm,
5357
5414
  context,
5358
- renderer,
5359
5415
  renderMode,
5360
5416
  shadowMode
5361
5417
  } = vm;
@@ -5382,11 +5438,11 @@ function updateStylesheetToken(vm, template) {
5382
5438
  } = context;
5383
5439
 
5384
5440
  if (oldHasTokenInClass) {
5385
- renderer.getClassList(elm).remove(makeHostToken(oldToken));
5441
+ getClassList(elm).remove(makeHostToken(oldToken));
5386
5442
  }
5387
5443
 
5388
5444
  if (oldHasTokenInAttribute) {
5389
- renderer.removeAttribute(elm, makeHostToken(oldToken));
5445
+ removeAttribute(elm, makeHostToken(oldToken));
5390
5446
  } // Apply the new template styling token to the host element, if the new template has any
5391
5447
  // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
5392
5448
 
@@ -5398,12 +5454,12 @@ function updateStylesheetToken(vm, template) {
5398
5454
 
5399
5455
  if (!shared.isUndefined(newToken)) {
5400
5456
  if (hasScopedStyles) {
5401
- renderer.getClassList(elm).add(makeHostToken(newToken));
5457
+ getClassList(elm).add(makeHostToken(newToken));
5402
5458
  newHasTokenInClass = true;
5403
5459
  }
5404
5460
 
5405
5461
  if (isSyntheticShadow) {
5406
- renderer.setAttribute(elm, makeHostToken(newToken), '');
5462
+ setAttribute(elm, makeHostToken(newToken), '');
5407
5463
  newHasTokenInAttribute = true;
5408
5464
  }
5409
5465
  } // Update the styling tokens present on the context object.
@@ -5416,6 +5472,7 @@ function updateStylesheetToken(vm, template) {
5416
5472
 
5417
5473
  function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
5418
5474
  const content = [];
5475
+ let root;
5419
5476
 
5420
5477
  for (let i = 0; i < stylesheets.length; i++) {
5421
5478
  let stylesheet = stylesheets[i];
@@ -5428,23 +5485,46 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
5428
5485
  // the component instance might be attempting to use an old version of
5429
5486
  // the stylesheet, while internally, we have a replacement for it.
5430
5487
  stylesheet = getStyleOrSwappedStyle(stylesheet);
5431
- } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
5432
- // native shadow DOM. Synthetic shadow DOM never uses `:host`.
5488
+ }
5433
5489
 
5490
+ const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
5491
+
5492
+ const scopeToken = isScopedCss || vm.shadowMode === 1
5493
+ /* Synthetic */
5494
+ && vm.renderMode === 1
5495
+ /* Shadow */
5496
+ ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
5497
+ // native shadow DOM. Synthetic shadow DOM never uses `:host`.
5434
5498
 
5435
- const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
5436
5499
  const useActualHostSelector = vm.renderMode === 0
5437
5500
  /* Light */
5438
5501
  ? !isScopedCss : vm.shadowMode === 0
5439
5502
  /* Native */
5440
- ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
5503
+ ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
5504
+ // we use an attribute selector on the host to simulate :dir().
5441
5505
 
5442
- const scopeToken = isScopedCss || vm.shadowMode === 1
5443
- /* Synthetic */
5444
- && vm.renderMode === 1
5506
+ let useNativeDirPseudoclass;
5507
+
5508
+ if (vm.renderMode === 1
5445
5509
  /* Shadow */
5446
- ? stylesheetToken : undefined;
5447
- shared.ArrayPush.call(content, stylesheet(useActualHostSelector, scopeToken));
5510
+ ) {
5511
+ useNativeDirPseudoclass = vm.shadowMode === 0
5512
+ /* Native */
5513
+ ;
5514
+ } else {
5515
+ // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
5516
+ // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
5517
+ if (shared.isUndefined(root)) {
5518
+ // Only calculate the root once as necessary
5519
+ root = getNearestShadowComponent(vm);
5520
+ }
5521
+
5522
+ useNativeDirPseudoclass = shared.isNull(root) || root.shadowMode === 0
5523
+ /* Native */
5524
+ ;
5525
+ }
5526
+
5527
+ shared.ArrayPush.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
5448
5528
  }
5449
5529
  }
5450
5530
 
@@ -5467,14 +5547,12 @@ function getStylesheetsContent(vm, template) {
5467
5547
  // perf testing has not shown it to be a huge improvement yet:
5468
5548
  // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
5469
5549
 
5470
- function getNearestNativeShadowComponent(vm) {
5550
+ function getNearestShadowComponent(vm) {
5471
5551
  let owner = vm;
5472
5552
 
5473
5553
  while (!shared.isNull(owner)) {
5474
5554
  if (owner.renderMode === 1
5475
5555
  /* Shadow */
5476
- && owner.shadowMode === 0
5477
- /* Native */
5478
5556
  ) {
5479
5557
  return owner;
5480
5558
  }
@@ -5485,9 +5563,22 @@ function getNearestNativeShadowComponent(vm) {
5485
5563
  return owner;
5486
5564
  }
5487
5565
 
5566
+ function getNearestNativeShadowComponent(vm) {
5567
+ const owner = getNearestShadowComponent(vm);
5568
+
5569
+ if (!shared.isNull(owner) && owner.shadowMode === 1
5570
+ /* Synthetic */
5571
+ ) {
5572
+ // Synthetic-within-native is impossible. So if the nearest shadow component is
5573
+ // synthetic, we know we won't find a native component if we go any further.
5574
+ return null;
5575
+ }
5576
+
5577
+ return owner;
5578
+ }
5579
+
5488
5580
  function createStylesheet(vm, stylesheets) {
5489
5581
  const {
5490
- renderer,
5491
5582
  renderMode,
5492
5583
  shadowMode
5493
5584
  } = vm;
@@ -5498,9 +5589,9 @@ function createStylesheet(vm, stylesheets) {
5498
5589
  /* Synthetic */
5499
5590
  ) {
5500
5591
  for (let i = 0; i < stylesheets.length; i++) {
5501
- renderer.insertGlobalStylesheet(stylesheets[i]);
5592
+ insertGlobalStylesheet(stylesheets[i]);
5502
5593
  }
5503
- } else if (renderer.ssr || renderer.isHydrating()) {
5594
+ } else if (ssr || isHydrating()) {
5504
5595
  // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
5505
5596
  // This works in the client, because the stylesheets are created, and cached in the VM
5506
5597
  // the first time the VM renders.
@@ -5514,10 +5605,10 @@ function createStylesheet(vm, stylesheets) {
5514
5605
 
5515
5606
  for (let i = 0; i < stylesheets.length; i++) {
5516
5607
  if (isGlobal) {
5517
- renderer.insertGlobalStylesheet(stylesheets[i]);
5608
+ insertGlobalStylesheet(stylesheets[i]);
5518
5609
  } else {
5519
5610
  // local level
5520
- renderer.insertStylesheet(stylesheets[i], root.cmpRoot);
5611
+ insertStylesheet(stylesheets[i], root.cmpRoot);
5521
5612
  }
5522
5613
  }
5523
5614
  }
@@ -5600,7 +5691,7 @@ function logOperationStart(opId, vm) {
5600
5691
  if (isProfilerEnabled) {
5601
5692
  currentDispatcher(opId, 0
5602
5693
  /* Start */
5603
- , vm.tagName, vm.idx);
5694
+ , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
5604
5695
  }
5605
5696
  }
5606
5697
  function logOperationEnd(opId, vm) {
@@ -5613,7 +5704,7 @@ function logOperationEnd(opId, vm) {
5613
5704
  if (isProfilerEnabled) {
5614
5705
  currentDispatcher(opId, 1
5615
5706
  /* Stop */
5616
- , vm.tagName, vm.idx);
5707
+ , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
5617
5708
  }
5618
5709
  }
5619
5710
  function logGlobalOperationStart(opId, vm) {
@@ -5626,7 +5717,7 @@ function logGlobalOperationStart(opId, vm) {
5626
5717
  if (isProfilerEnabled) {
5627
5718
  currentDispatcher(opId, 0
5628
5719
  /* Start */
5629
- , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx);
5720
+ , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx, vm === null || vm === void 0 ? void 0 : vm.renderMode, vm === null || vm === void 0 ? void 0 : vm.shadowMode);
5630
5721
  }
5631
5722
  }
5632
5723
  function logGlobalOperationEnd(opId, vm) {
@@ -5639,7 +5730,7 @@ function logGlobalOperationEnd(opId, vm) {
5639
5730
  if (isProfilerEnabled) {
5640
5731
  currentDispatcher(opId, 1
5641
5732
  /* Stop */
5642
- , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx);
5733
+ , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx, vm === null || vm === void 0 ? void 0 : vm.renderMode, vm === null || vm === void 0 ? void 0 : vm.shadowMode);
5643
5734
  }
5644
5735
  }
5645
5736
 
@@ -5792,6 +5883,7 @@ function evaluateTemplate(vm, html) {
5792
5883
 
5793
5884
  return vnodes;
5794
5885
  }
5886
+
5795
5887
  function computeHasScopedStyles(template) {
5796
5888
  const {
5797
5889
  stylesheets
@@ -6177,7 +6269,6 @@ function createVM(elm, def, options) {
6177
6269
  const {
6178
6270
  mode,
6179
6271
  owner,
6180
- renderer,
6181
6272
  tagName
6182
6273
  } = options;
6183
6274
  const vm = {
@@ -6192,7 +6283,6 @@ function createVM(elm, def, options) {
6192
6283
  tagName,
6193
6284
  mode,
6194
6285
  owner,
6195
- renderer,
6196
6286
  children: EmptyArray,
6197
6287
  aChildren: EmptyArray,
6198
6288
  velements: EmptyArray,
@@ -6247,13 +6337,8 @@ function createVM(elm, def, options) {
6247
6337
 
6248
6338
  function computeShadowMode(vm) {
6249
6339
  const {
6250
- def,
6251
- renderer
6340
+ def
6252
6341
  } = vm;
6253
- const {
6254
- isNativeShadowDefined,
6255
- isSyntheticShadowDefined
6256
- } = renderer;
6257
6342
  let shadowMode;
6258
6343
 
6259
6344
  if (isSyntheticShadowDefined) {
@@ -6403,13 +6488,12 @@ function patchShadowRoot(vm, newCh) {
6403
6488
 
6404
6489
  function runRenderedCallback(vm) {
6405
6490
  const {
6406
- renderer,
6407
6491
  def: {
6408
6492
  renderedCallback
6409
6493
  }
6410
6494
  } = vm;
6411
6495
 
6412
- if (shared.isTrue(renderer.ssr)) {
6496
+ if (shared.isTrue(ssr)) {
6413
6497
  return;
6414
6498
  }
6415
6499
 
@@ -6635,8 +6719,7 @@ function recursivelyDisconnectChildren(vnodes) {
6635
6719
 
6636
6720
  function resetComponentRoot(vm) {
6637
6721
  const {
6638
- children,
6639
- renderer
6722
+ children
6640
6723
  } = vm;
6641
6724
  const rootNode = getRenderRoot(vm);
6642
6725
 
@@ -6644,7 +6727,7 @@ function resetComponentRoot(vm) {
6644
6727
  const child = children[i];
6645
6728
 
6646
6729
  if (!shared.isNull(child) && !shared.isUndefined(child.elm)) {
6647
- renderer.remove(child.elm, rootNode);
6730
+ remove(child.elm, rootNode);
6648
6731
  }
6649
6732
  }
6650
6733
 
@@ -6653,7 +6736,7 @@ function resetComponentRoot(vm) {
6653
6736
  vm.velements = EmptyArray;
6654
6737
  }
6655
6738
  function scheduleRehydration(vm) {
6656
- if (shared.isTrue(vm.renderer.ssr) || shared.isTrue(vm.isScheduled)) {
6739
+ if (shared.isTrue(ssr) || shared.isTrue(vm.isScheduled)) {
6657
6740
  return;
6658
6741
  }
6659
6742
 
@@ -6893,7 +6976,6 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
6893
6976
 
6894
6977
  const {
6895
6978
  elm,
6896
- renderer,
6897
6979
  context: {
6898
6980
  wiredConnecting,
6899
6981
  wiredDisconnecting
@@ -6920,7 +7002,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
6920
7002
  }
6921
7003
 
6922
7004
  });
6923
- renderer.dispatchEvent(elm, contextRegistrationEvent);
7005
+ dispatchEvent(elm, contextRegistrationEvent);
6924
7006
  });
6925
7007
  }
6926
7008
 
@@ -7203,11 +7285,51 @@ exports.registerComponent = registerComponent;
7203
7285
  exports.registerDecorators = registerDecorators;
7204
7286
  exports.registerTemplate = registerTemplate;
7205
7287
  exports.sanitizeAttribute = sanitizeAttribute;
7288
+ exports.setAddEventListener = setAddEventListener;
7289
+ exports.setAssertInstanceOfHTMLElement = setAssertInstanceOfHTMLElement;
7290
+ exports.setAttachShadow = setAttachShadow;
7291
+ exports.setCreateComment = setCreateComment;
7292
+ exports.setCreateElement = setCreateElement;
7293
+ exports.setCreateText = setCreateText;
7294
+ exports.setDefineCustomElement = setDefineCustomElement;
7295
+ exports.setDispatchEvent = setDispatchEvent;
7296
+ exports.setGetAttribute = setGetAttribute;
7297
+ exports.setGetBoundingClientRect = setGetBoundingClientRect;
7298
+ exports.setGetChildNodes = setGetChildNodes;
7299
+ exports.setGetChildren = setGetChildren;
7300
+ exports.setGetClassList = setGetClassList;
7301
+ exports.setGetCustomElement = setGetCustomElement;
7302
+ exports.setGetElementsByClassName = setGetElementsByClassName;
7303
+ exports.setGetElementsByTagName = setGetElementsByTagName;
7304
+ exports.setGetFirstChild = setGetFirstChild;
7305
+ exports.setGetFirstElementChild = setGetFirstElementChild;
7306
+ exports.setGetLastChild = setGetLastChild;
7307
+ exports.setGetLastElementChild = setGetLastElementChild;
7308
+ exports.setGetProperty = setGetProperty;
7309
+ exports.setHTMLElement = setHTMLElement;
7206
7310
  exports.setHooks = setHooks;
7311
+ exports.setInsert = setInsert;
7312
+ exports.setInsertGlobalStylesheet = setInsertGlobalStylesheet;
7313
+ exports.setInsertStylesheet = setInsertStylesheet;
7314
+ exports.setIsConnected = setIsConnected;
7315
+ exports.setIsHydrating = setIsHydrating;
7316
+ exports.setIsNativeShadowDefined = setIsNativeShadowDefined;
7317
+ exports.setIsSyntheticShadowDefined = setIsSyntheticShadowDefined;
7318
+ exports.setNextSibling = setNextSibling;
7319
+ exports.setQuerySelector = setQuerySelector;
7320
+ exports.setQuerySelectorAll = setQuerySelectorAll;
7321
+ exports.setRemove = setRemove;
7322
+ exports.setRemoveAttribute = setRemoveAttribute;
7323
+ exports.setRemoveEventListener = setRemoveEventListener;
7324
+ exports.setSetAttribute = setSetAttribute;
7325
+ exports.setSetCSSStyleProperty = setSetCSSStyleProperty;
7326
+ exports.setSetProperty = setSetProperty;
7327
+ exports.setSetText = setSetText;
7328
+ exports.setSsr = setSsr;
7207
7329
  exports.swapComponent = swapComponent;
7208
7330
  exports.swapStyle = swapStyle;
7209
7331
  exports.swapTemplate = swapTemplate;
7210
7332
  exports.track = track;
7211
7333
  exports.unwrap = unwrap;
7212
7334
  exports.wire = wire;
7213
- /* version: 2.5.10 */
7335
+ /* version: 2.6.3 */