lwc 2.4.0 → 2.5.0

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.
Files changed (35) hide show
  1. package/dist/engine-dom/esm/es2017/engine-dom.js +117 -64
  2. package/dist/engine-dom/iife/es2017/engine-dom.js +117 -64
  3. package/dist/engine-dom/iife/es2017/engine-dom.min.js +2 -2
  4. package/dist/engine-dom/iife/es2017/engine-dom_debug.js +116 -63
  5. package/dist/engine-dom/iife/es5/engine-dom.js +133 -86
  6. package/dist/engine-dom/iife/es5/engine-dom.min.js +2 -2
  7. package/dist/engine-dom/iife/es5/engine-dom_debug.js +130 -83
  8. package/dist/engine-dom/umd/es2017/engine-dom.js +117 -64
  9. package/dist/engine-dom/umd/es2017/engine-dom.min.js +2 -2
  10. package/dist/engine-dom/umd/es2017/engine-dom_debug.js +116 -63
  11. package/dist/engine-dom/umd/es5/engine-dom.js +133 -86
  12. package/dist/engine-dom/umd/es5/engine-dom.min.js +2 -2
  13. package/dist/engine-dom/umd/es5/engine-dom_debug.js +130 -83
  14. package/dist/engine-server/commonjs/es2017/engine-server.js +117 -64
  15. package/dist/engine-server/commonjs/es2017/engine-server.min.js +2 -2
  16. package/dist/engine-server/esm/es2017/engine-server.js +117 -64
  17. package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js +3 -3
  18. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js +3 -3
  19. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow_debug.js +3 -3
  20. package/dist/synthetic-shadow/iife/es5/synthetic-shadow.js +3 -3
  21. package/dist/synthetic-shadow/iife/es5/synthetic-shadow_debug.js +3 -3
  22. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.js +3 -3
  23. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow_debug.js +3 -3
  24. package/dist/synthetic-shadow/umd/es5/synthetic-shadow.js +3 -3
  25. package/dist/synthetic-shadow/umd/es5/synthetic-shadow_debug.js +3 -3
  26. package/dist/wire-service/esm/es2017/wire-service.js +2 -2
  27. package/dist/wire-service/iife/es2017/wire-service.js +2 -2
  28. package/dist/wire-service/iife/es2017/wire-service_debug.js +2 -2
  29. package/dist/wire-service/iife/es5/wire-service.js +2 -2
  30. package/dist/wire-service/iife/es5/wire-service_debug.js +2 -2
  31. package/dist/wire-service/umd/es2017/wire-service.js +2 -2
  32. package/dist/wire-service/umd/es2017/wire-service_debug.js +2 -2
  33. package/dist/wire-service/umd/es5/wire-service.js +2 -2
  34. package/dist/wire-service/umd/es5/wire-service_debug.js +2 -2
  35. package/package.json +8 -8
@@ -250,6 +250,7 @@ const KEY__IS_NATIVE_SHADOW_ROOT_DEFINED = '$isNativeShadowRootDefined$';
250
250
  const KEY__SHADOW_RESOLVER = '$shadowResolver$';
251
251
  const KEY__SHADOW_TOKEN = '$shadowToken$';
252
252
  const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
253
+ const KEY__SCOPED_CSS = '$scoped$';
253
254
  /**
254
255
  * Map composed of properties to attributes not following the HTML property to attribute mapping
255
256
  * convention.
@@ -298,7 +299,7 @@ function htmlPropertyToAttribute(propName) {
298
299
  CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
299
300
  return attributeName;
300
301
  }
301
- /** version: 2.4.0 */
302
+ /** version: 2.5.0 */
302
303
 
303
304
  /*
304
305
  * Copyright (c) 2018, salesforce.com, inc.
@@ -477,7 +478,7 @@ function setFeatureFlagForTest(name, value) {
477
478
  setFeatureFlag(name, value);
478
479
  }
479
480
  }
480
- /** version: 2.4.0 */
481
+ /** version: 2.5.0 */
481
482
 
482
483
  /* proxy-compat-disable */
483
484
 
@@ -4485,6 +4486,19 @@ function observeElementChildNodes(elm) {
4485
4486
 
4486
4487
  function setElementShadowToken(elm, token) {
4487
4488
  elm.$shadowToken$ = token;
4489
+ } // Set the scope token class for *.scoped.css styles
4490
+
4491
+
4492
+ function setScopeTokenClassIfNecessary(elm, owner) {
4493
+ const {
4494
+ cmpTemplate,
4495
+ context
4496
+ } = owner;
4497
+ const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
4498
+
4499
+ if (!isUndefined$1(token) && context.hasScopedStyles) {
4500
+ owner.renderer.getClassList(elm).add(token);
4501
+ }
4488
4502
  }
4489
4503
 
4490
4504
  function updateNodeHook(oldVnode, vnode) {
@@ -4558,6 +4572,7 @@ function fallbackElmHook(elm, vnode) {
4558
4572
  const {
4559
4573
  owner
4560
4574
  } = vnode;
4575
+ setScopeTokenClassIfNecessary(elm, owner);
4561
4576
 
4562
4577
  if (owner.shadowMode === 1
4563
4578
  /* Synthetic */
@@ -4568,7 +4583,7 @@ function fallbackElmHook(elm, vnode) {
4568
4583
  }
4569
4584
  } = vnode;
4570
4585
  const {
4571
- shadowAttribute
4586
+ stylesheetToken
4572
4587
  } = owner.context;
4573
4588
 
4574
4589
  if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -4580,7 +4595,7 @@ function fallbackElmHook(elm, vnode) {
4580
4595
  // into each element from the template, so they can be styled accordingly.
4581
4596
 
4582
4597
 
4583
- setElementShadowToken(elm, shadowAttribute);
4598
+ setElementShadowToken(elm, stylesheetToken);
4584
4599
  }
4585
4600
 
4586
4601
  if (process.env.NODE_ENV !== 'production') {
@@ -4669,16 +4684,17 @@ function createViewModelHook(elm, vnode) {
4669
4684
  ctor,
4670
4685
  owner
4671
4686
  } = vnode;
4687
+ setScopeTokenClassIfNecessary(elm, owner);
4672
4688
 
4673
4689
  if (owner.shadowMode === 1
4674
4690
  /* Synthetic */
4675
4691
  ) {
4676
4692
  const {
4677
- shadowAttribute
4693
+ stylesheetToken
4678
4694
  } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
4679
4695
  // into each element from the template, so they can be styled accordingly.
4680
4696
 
4681
- setElementShadowToken(elm, shadowAttribute);
4697
+ setElementShadowToken(elm, stylesheetToken);
4682
4698
  }
4683
4699
 
4684
4700
  const def = getComponentInternalDef(ctor);
@@ -5474,6 +5490,10 @@ var api = /*#__PURE__*/Object.freeze({
5474
5490
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
5475
5491
  */
5476
5492
 
5493
+ function makeHostToken(token) {
5494
+ return `${token}-host`;
5495
+ }
5496
+
5477
5497
  function createInlineStyleVNode(content) {
5478
5498
  return h('style', {
5479
5499
  key: 'style',
@@ -5483,59 +5503,100 @@ function createInlineStyleVNode(content) {
5483
5503
  }, [t(content)]);
5484
5504
  }
5485
5505
 
5486
- function updateSyntheticShadowAttributes(vm, template) {
5506
+ function updateStylesheetToken(vm, template) {
5487
5507
  const {
5488
5508
  elm,
5489
5509
  context,
5490
5510
  renderer,
5491
- renderMode
5511
+ renderMode,
5512
+ shadowMode
5492
5513
  } = vm;
5493
5514
  const {
5494
5515
  stylesheets: newStylesheets,
5495
- stylesheetTokens: newStylesheetTokens
5516
+ stylesheetToken: newStylesheetToken
5496
5517
  } = template;
5497
- let newTokens; // Reset the styling token applied to the host element.
5518
+ const isSyntheticShadow = renderMode === 1
5519
+ /* Shadow */
5520
+ && shadowMode === 1
5521
+ /* Synthetic */
5522
+ ;
5523
+ const {
5524
+ hasScopedStyles
5525
+ } = context;
5526
+ let newToken;
5527
+ let newHasTokenInClass;
5528
+ let newHasTokenInAttribute; // Reset the styling token applied to the host element.
5498
5529
 
5499
- const oldHostAttribute = context.hostAttribute;
5530
+ const {
5531
+ stylesheetToken: oldToken,
5532
+ hasTokenInClass: oldHasTokenInClass,
5533
+ hasTokenInAttribute: oldHasTokenInAttribute
5534
+ } = context;
5500
5535
 
5501
- if (!isUndefined$1(oldHostAttribute)) {
5502
- renderer.removeAttribute(elm, oldHostAttribute);
5536
+ if (oldHasTokenInClass) {
5537
+ renderer.getClassList(elm).remove(makeHostToken(oldToken));
5538
+ }
5539
+
5540
+ if (oldHasTokenInAttribute) {
5541
+ renderer.removeAttribute(elm, makeHostToken(oldToken));
5503
5542
  } // Apply the new template styling token to the host element, if the new template has any
5504
- // associated stylesheets.
5543
+ // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
5505
5544
 
5506
5545
 
5507
- if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0 && renderMode === 1
5508
- /* Shadow */
5509
- ) {
5510
- newTokens = newStylesheetTokens;
5511
- }
5546
+ if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
5547
+ newToken = newStylesheetToken;
5548
+ } // Set the new styling token on the host element
5549
+
5550
+
5551
+ if (!isUndefined$1(newToken)) {
5552
+ if (hasScopedStyles) {
5553
+ renderer.getClassList(elm).add(makeHostToken(newToken));
5554
+ newHasTokenInClass = true;
5555
+ }
5512
5556
 
5513
- if (!isUndefined$1(newTokens)) {
5514
- renderer.setAttribute(elm, newTokens.hostAttribute, '');
5557
+ if (isSyntheticShadow) {
5558
+ renderer.setAttribute(elm, makeHostToken(newToken), '');
5559
+ newHasTokenInAttribute = true;
5560
+ }
5515
5561
  } // Update the styling tokens present on the context object.
5516
5562
 
5517
5563
 
5518
- context.hostAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.hostAttribute;
5519
- context.shadowAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.shadowAttribute;
5564
+ context.stylesheetToken = newToken;
5565
+ context.hasTokenInClass = newHasTokenInClass;
5566
+ context.hasTokenInAttribute = newHasTokenInAttribute;
5520
5567
  }
5521
5568
 
5522
- function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, nativeShadow) {
5569
+ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
5523
5570
  const content = [];
5524
5571
 
5525
5572
  for (let i = 0; i < stylesheets.length; i++) {
5526
5573
  let stylesheet = stylesheets[i];
5527
5574
 
5528
5575
  if (isArray$1(stylesheet)) {
5529
- ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, hostSelector, shadowSelector, nativeShadow));
5576
+ ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
5530
5577
  } else {
5531
5578
  if (process.env.NODE_ENV !== 'production') {
5532
5579
  // in dev-mode, we support hot swapping of stylesheet, which means that
5533
5580
  // the component instance might be attempting to use an old version of
5534
5581
  // the stylesheet, while internally, we have a replacement for it.
5535
5582
  stylesheet = getStyleOrSwappedStyle(stylesheet);
5536
- }
5583
+ } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
5584
+ // native shadow DOM. Synthetic shadow DOM never uses `:host`.
5585
+
5586
+
5587
+ const isScopedCss = stylesheet[KEY__SCOPED_CSS];
5588
+ const useActualHostSelector = vm.renderMode === 0
5589
+ /* Light */
5590
+ ? !isScopedCss : vm.shadowMode === 0
5591
+ /* Native */
5592
+ ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
5537
5593
 
5538
- ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
5594
+ const scopeToken = isScopedCss || vm.shadowMode === 1
5595
+ /* Synthetic */
5596
+ && vm.renderMode === 1
5597
+ /* Shadow */
5598
+ ? stylesheetToken : undefined;
5599
+ ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
5539
5600
  }
5540
5601
  }
5541
5602
 
@@ -5545,34 +5606,12 @@ function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, n
5545
5606
  function getStylesheetsContent(vm, template) {
5546
5607
  const {
5547
5608
  stylesheets,
5548
- stylesheetTokens
5609
+ stylesheetToken
5549
5610
  } = template;
5550
- const {
5551
- renderMode,
5552
- shadowMode
5553
- } = vm;
5554
5611
  let content = [];
5555
5612
 
5556
5613
  if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
5557
- let hostSelector;
5558
- let shadowSelector; // Scoping with the tokens is only necessary for synthetic shadow. For both
5559
- // light DOM elements and native shadow, we just render the CSS as-is.
5560
-
5561
- if (renderMode === 1
5562
- /* Shadow */
5563
- && shadowMode === 1
5564
- /* Synthetic */
5565
- && !isUndefined$1(stylesheetTokens)) {
5566
- hostSelector = `[${stylesheetTokens.hostAttribute}]`;
5567
- shadowSelector = `[${stylesheetTokens.shadowAttribute}]`;
5568
- } else {
5569
- hostSelector = '';
5570
- shadowSelector = '';
5571
- }
5572
-
5573
- content = evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, shadowMode === 0
5574
- /* Native */
5575
- );
5614
+ content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
5576
5615
  }
5577
5616
 
5578
5617
  return content;
@@ -5839,8 +5878,7 @@ function evaluateTemplate(vm, html) {
5839
5878
  context,
5840
5879
  cmpSlots,
5841
5880
  cmpTemplate,
5842
- tro,
5843
- shadowMode
5881
+ tro
5844
5882
  } = vm;
5845
5883
  tro.observe(() => {
5846
5884
  // Reset the cache memoizer for template when needed.
@@ -5865,15 +5903,12 @@ function evaluateTemplate(vm, html) {
5865
5903
 
5866
5904
  vm.cmpTemplate = html; // Create a brand new template cache for the swapped templated.
5867
5905
 
5868
- context.tplCache = create(null); // Update the synthetic shadow attributes on the host element if necessary.
5906
+ context.tplCache = create(null); // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
5869
5907
 
5870
- if (shadowMode === 1
5871
- /* Synthetic */
5872
- ) {
5873
- updateSyntheticShadowAttributes(vm, html);
5874
- } // Evaluate, create stylesheet and cache the produced VNode for future
5875
- // re-rendering.
5908
+ context.hasScopedStyles = computeHasScopedStyles(html); // Update the scoping token on the host element.
5876
5909
 
5910
+ updateStylesheetToken(vm, html); // Evaluate, create stylesheet and cache the produced VNode for future
5911
+ // re-rendering.
5877
5912
 
5878
5913
  const stylesheetsContent = getStylesheetsContent(vm, html);
5879
5914
  context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
@@ -5915,6 +5950,22 @@ function evaluateTemplate(vm, html) {
5915
5950
 
5916
5951
  return vnodes;
5917
5952
  }
5953
+
5954
+ function computeHasScopedStyles(template) {
5955
+ const {
5956
+ stylesheets
5957
+ } = template;
5958
+
5959
+ if (!isUndefined$1(stylesheets)) {
5960
+ for (let i = 0; i < stylesheets.length; i++) {
5961
+ if (isTrue(stylesheets[i][KEY__SCOPED_CSS])) {
5962
+ return true;
5963
+ }
5964
+ }
5965
+ }
5966
+
5967
+ return false;
5968
+ }
5918
5969
  /*
5919
5970
  * Copyright (c) 2018, salesforce.com, inc.
5920
5971
  * All rights reserved.
@@ -6325,8 +6376,10 @@ function createVM(elm, def, options) {
6325
6376
  renderMode: def.renderMode,
6326
6377
  shadowMode: null,
6327
6378
  context: {
6328
- hostAttribute: undefined,
6329
- shadowAttribute: undefined,
6379
+ stylesheetToken: undefined,
6380
+ hasTokenInClass: undefined,
6381
+ hasTokenInAttribute: undefined,
6382
+ hasScopedStyles: undefined,
6330
6383
  styleVNode: null,
6331
6384
  tplCache: EmptyObject,
6332
6385
  wiredConnecting: EmptyArray,
@@ -7275,7 +7328,7 @@ function readonly(obj) {
7275
7328
 
7276
7329
  return reactiveMembrane.getReadOnlyProxy(obj);
7277
7330
  }
7278
- /* version: 2.4.0 */
7331
+ /* version: 2.5.0 */
7279
7332
 
7280
7333
  /*
7281
7334
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7833,6 +7886,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
7833
7886
  });
7834
7887
  freeze(LightningElement);
7835
7888
  seal(LightningElement.prototype);
7836
- /* version: 2.4.0 */
7889
+ /* version: 2.5.0 */
7837
7890
 
7838
7891
  export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
@@ -253,6 +253,7 @@ var LWC = (function (exports) {
253
253
  const KEY__SHADOW_RESOLVER = '$shadowResolver$';
254
254
  const KEY__SHADOW_TOKEN = '$shadowToken$';
255
255
  const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
256
+ const KEY__SCOPED_CSS = '$scoped$';
256
257
  /**
257
258
  * Map composed of properties to attributes not following the HTML property to attribute mapping
258
259
  * convention.
@@ -301,7 +302,7 @@ var LWC = (function (exports) {
301
302
  CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
302
303
  return attributeName;
303
304
  }
304
- /** version: 2.4.0 */
305
+ /** version: 2.5.0 */
305
306
 
306
307
  /*
307
308
  * Copyright (c) 2018, salesforce.com, inc.
@@ -480,7 +481,7 @@ var LWC = (function (exports) {
480
481
  setFeatureFlag(name, value);
481
482
  }
482
483
  }
483
- /** version: 2.4.0 */
484
+ /** version: 2.5.0 */
484
485
 
485
486
  /* proxy-compat-disable */
486
487
 
@@ -4488,6 +4489,19 @@ var LWC = (function (exports) {
4488
4489
 
4489
4490
  function setElementShadowToken(elm, token) {
4490
4491
  elm.$shadowToken$ = token;
4492
+ } // Set the scope token class for *.scoped.css styles
4493
+
4494
+
4495
+ function setScopeTokenClassIfNecessary(elm, owner) {
4496
+ const {
4497
+ cmpTemplate,
4498
+ context
4499
+ } = owner;
4500
+ const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
4501
+
4502
+ if (!isUndefined$1(token) && context.hasScopedStyles) {
4503
+ owner.renderer.getClassList(elm).add(token);
4504
+ }
4491
4505
  }
4492
4506
 
4493
4507
  function updateNodeHook(oldVnode, vnode) {
@@ -4561,6 +4575,7 @@ var LWC = (function (exports) {
4561
4575
  const {
4562
4576
  owner
4563
4577
  } = vnode;
4578
+ setScopeTokenClassIfNecessary(elm, owner);
4564
4579
 
4565
4580
  if (owner.shadowMode === 1
4566
4581
  /* Synthetic */
@@ -4571,7 +4586,7 @@ var LWC = (function (exports) {
4571
4586
  }
4572
4587
  } = vnode;
4573
4588
  const {
4574
- shadowAttribute
4589
+ stylesheetToken
4575
4590
  } = owner.context;
4576
4591
 
4577
4592
  if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -4583,7 +4598,7 @@ var LWC = (function (exports) {
4583
4598
  // into each element from the template, so they can be styled accordingly.
4584
4599
 
4585
4600
 
4586
- setElementShadowToken(elm, shadowAttribute);
4601
+ setElementShadowToken(elm, stylesheetToken);
4587
4602
  }
4588
4603
 
4589
4604
  if (process.env.NODE_ENV !== 'production') {
@@ -4672,16 +4687,17 @@ var LWC = (function (exports) {
4672
4687
  ctor,
4673
4688
  owner
4674
4689
  } = vnode;
4690
+ setScopeTokenClassIfNecessary(elm, owner);
4675
4691
 
4676
4692
  if (owner.shadowMode === 1
4677
4693
  /* Synthetic */
4678
4694
  ) {
4679
4695
  const {
4680
- shadowAttribute
4696
+ stylesheetToken
4681
4697
  } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
4682
4698
  // into each element from the template, so they can be styled accordingly.
4683
4699
 
4684
- setElementShadowToken(elm, shadowAttribute);
4700
+ setElementShadowToken(elm, stylesheetToken);
4685
4701
  }
4686
4702
 
4687
4703
  const def = getComponentInternalDef(ctor);
@@ -5477,6 +5493,10 @@ var LWC = (function (exports) {
5477
5493
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
5478
5494
  */
5479
5495
 
5496
+ function makeHostToken(token) {
5497
+ return `${token}-host`;
5498
+ }
5499
+
5480
5500
  function createInlineStyleVNode(content) {
5481
5501
  return h('style', {
5482
5502
  key: 'style',
@@ -5486,59 +5506,100 @@ var LWC = (function (exports) {
5486
5506
  }, [t(content)]);
5487
5507
  }
5488
5508
 
5489
- function updateSyntheticShadowAttributes(vm, template) {
5509
+ function updateStylesheetToken(vm, template) {
5490
5510
  const {
5491
5511
  elm,
5492
5512
  context,
5493
5513
  renderer,
5494
- renderMode
5514
+ renderMode,
5515
+ shadowMode
5495
5516
  } = vm;
5496
5517
  const {
5497
5518
  stylesheets: newStylesheets,
5498
- stylesheetTokens: newStylesheetTokens
5519
+ stylesheetToken: newStylesheetToken
5499
5520
  } = template;
5500
- let newTokens; // Reset the styling token applied to the host element.
5521
+ const isSyntheticShadow = renderMode === 1
5522
+ /* Shadow */
5523
+ && shadowMode === 1
5524
+ /* Synthetic */
5525
+ ;
5526
+ const {
5527
+ hasScopedStyles
5528
+ } = context;
5529
+ let newToken;
5530
+ let newHasTokenInClass;
5531
+ let newHasTokenInAttribute; // Reset the styling token applied to the host element.
5501
5532
 
5502
- const oldHostAttribute = context.hostAttribute;
5533
+ const {
5534
+ stylesheetToken: oldToken,
5535
+ hasTokenInClass: oldHasTokenInClass,
5536
+ hasTokenInAttribute: oldHasTokenInAttribute
5537
+ } = context;
5503
5538
 
5504
- if (!isUndefined$1(oldHostAttribute)) {
5505
- renderer.removeAttribute(elm, oldHostAttribute);
5539
+ if (oldHasTokenInClass) {
5540
+ renderer.getClassList(elm).remove(makeHostToken(oldToken));
5541
+ }
5542
+
5543
+ if (oldHasTokenInAttribute) {
5544
+ renderer.removeAttribute(elm, makeHostToken(oldToken));
5506
5545
  } // Apply the new template styling token to the host element, if the new template has any
5507
- // associated stylesheets.
5546
+ // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
5508
5547
 
5509
5548
 
5510
- if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0 && renderMode === 1
5511
- /* Shadow */
5512
- ) {
5513
- newTokens = newStylesheetTokens;
5514
- }
5549
+ if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
5550
+ newToken = newStylesheetToken;
5551
+ } // Set the new styling token on the host element
5552
+
5553
+
5554
+ if (!isUndefined$1(newToken)) {
5555
+ if (hasScopedStyles) {
5556
+ renderer.getClassList(elm).add(makeHostToken(newToken));
5557
+ newHasTokenInClass = true;
5558
+ }
5515
5559
 
5516
- if (!isUndefined$1(newTokens)) {
5517
- renderer.setAttribute(elm, newTokens.hostAttribute, '');
5560
+ if (isSyntheticShadow) {
5561
+ renderer.setAttribute(elm, makeHostToken(newToken), '');
5562
+ newHasTokenInAttribute = true;
5563
+ }
5518
5564
  } // Update the styling tokens present on the context object.
5519
5565
 
5520
5566
 
5521
- context.hostAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.hostAttribute;
5522
- context.shadowAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.shadowAttribute;
5567
+ context.stylesheetToken = newToken;
5568
+ context.hasTokenInClass = newHasTokenInClass;
5569
+ context.hasTokenInAttribute = newHasTokenInAttribute;
5523
5570
  }
5524
5571
 
5525
- function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, nativeShadow) {
5572
+ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
5526
5573
  const content = [];
5527
5574
 
5528
5575
  for (let i = 0; i < stylesheets.length; i++) {
5529
5576
  let stylesheet = stylesheets[i];
5530
5577
 
5531
5578
  if (isArray$1(stylesheet)) {
5532
- ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, hostSelector, shadowSelector, nativeShadow));
5579
+ ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
5533
5580
  } else {
5534
5581
  if (process.env.NODE_ENV !== 'production') {
5535
5582
  // in dev-mode, we support hot swapping of stylesheet, which means that
5536
5583
  // the component instance might be attempting to use an old version of
5537
5584
  // the stylesheet, while internally, we have a replacement for it.
5538
5585
  stylesheet = getStyleOrSwappedStyle(stylesheet);
5539
- }
5586
+ } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
5587
+ // native shadow DOM. Synthetic shadow DOM never uses `:host`.
5588
+
5589
+
5590
+ const isScopedCss = stylesheet[KEY__SCOPED_CSS];
5591
+ const useActualHostSelector = vm.renderMode === 0
5592
+ /* Light */
5593
+ ? !isScopedCss : vm.shadowMode === 0
5594
+ /* Native */
5595
+ ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
5540
5596
 
5541
- ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
5597
+ const scopeToken = isScopedCss || vm.shadowMode === 1
5598
+ /* Synthetic */
5599
+ && vm.renderMode === 1
5600
+ /* Shadow */
5601
+ ? stylesheetToken : undefined;
5602
+ ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
5542
5603
  }
5543
5604
  }
5544
5605
 
@@ -5548,34 +5609,12 @@ var LWC = (function (exports) {
5548
5609
  function getStylesheetsContent(vm, template) {
5549
5610
  const {
5550
5611
  stylesheets,
5551
- stylesheetTokens
5612
+ stylesheetToken
5552
5613
  } = template;
5553
- const {
5554
- renderMode,
5555
- shadowMode
5556
- } = vm;
5557
5614
  let content = [];
5558
5615
 
5559
5616
  if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
5560
- let hostSelector;
5561
- let shadowSelector; // Scoping with the tokens is only necessary for synthetic shadow. For both
5562
- // light DOM elements and native shadow, we just render the CSS as-is.
5563
-
5564
- if (renderMode === 1
5565
- /* Shadow */
5566
- && shadowMode === 1
5567
- /* Synthetic */
5568
- && !isUndefined$1(stylesheetTokens)) {
5569
- hostSelector = `[${stylesheetTokens.hostAttribute}]`;
5570
- shadowSelector = `[${stylesheetTokens.shadowAttribute}]`;
5571
- } else {
5572
- hostSelector = '';
5573
- shadowSelector = '';
5574
- }
5575
-
5576
- content = evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, shadowMode === 0
5577
- /* Native */
5578
- );
5617
+ content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
5579
5618
  }
5580
5619
 
5581
5620
  return content;
@@ -5842,8 +5881,7 @@ var LWC = (function (exports) {
5842
5881
  context,
5843
5882
  cmpSlots,
5844
5883
  cmpTemplate,
5845
- tro,
5846
- shadowMode
5884
+ tro
5847
5885
  } = vm;
5848
5886
  tro.observe(() => {
5849
5887
  // Reset the cache memoizer for template when needed.
@@ -5868,15 +5906,12 @@ var LWC = (function (exports) {
5868
5906
 
5869
5907
  vm.cmpTemplate = html; // Create a brand new template cache for the swapped templated.
5870
5908
 
5871
- context.tplCache = create(null); // Update the synthetic shadow attributes on the host element if necessary.
5909
+ context.tplCache = create(null); // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
5872
5910
 
5873
- if (shadowMode === 1
5874
- /* Synthetic */
5875
- ) {
5876
- updateSyntheticShadowAttributes(vm, html);
5877
- } // Evaluate, create stylesheet and cache the produced VNode for future
5878
- // re-rendering.
5911
+ context.hasScopedStyles = computeHasScopedStyles(html); // Update the scoping token on the host element.
5879
5912
 
5913
+ updateStylesheetToken(vm, html); // Evaluate, create stylesheet and cache the produced VNode for future
5914
+ // re-rendering.
5880
5915
 
5881
5916
  const stylesheetsContent = getStylesheetsContent(vm, html);
5882
5917
  context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
@@ -5918,6 +5953,22 @@ var LWC = (function (exports) {
5918
5953
 
5919
5954
  return vnodes;
5920
5955
  }
5956
+
5957
+ function computeHasScopedStyles(template) {
5958
+ const {
5959
+ stylesheets
5960
+ } = template;
5961
+
5962
+ if (!isUndefined$1(stylesheets)) {
5963
+ for (let i = 0; i < stylesheets.length; i++) {
5964
+ if (isTrue(stylesheets[i][KEY__SCOPED_CSS])) {
5965
+ return true;
5966
+ }
5967
+ }
5968
+ }
5969
+
5970
+ return false;
5971
+ }
5921
5972
  /*
5922
5973
  * Copyright (c) 2018, salesforce.com, inc.
5923
5974
  * All rights reserved.
@@ -6328,8 +6379,10 @@ var LWC = (function (exports) {
6328
6379
  renderMode: def.renderMode,
6329
6380
  shadowMode: null,
6330
6381
  context: {
6331
- hostAttribute: undefined,
6332
- shadowAttribute: undefined,
6382
+ stylesheetToken: undefined,
6383
+ hasTokenInClass: undefined,
6384
+ hasTokenInAttribute: undefined,
6385
+ hasScopedStyles: undefined,
6333
6386
  styleVNode: null,
6334
6387
  tplCache: EmptyObject,
6335
6388
  wiredConnecting: EmptyArray,
@@ -7278,7 +7331,7 @@ var LWC = (function (exports) {
7278
7331
 
7279
7332
  return reactiveMembrane.getReadOnlyProxy(obj);
7280
7333
  }
7281
- /* version: 2.4.0 */
7334
+ /* version: 2.5.0 */
7282
7335
 
7283
7336
  /*
7284
7337
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7836,7 +7889,7 @@ var LWC = (function (exports) {
7836
7889
  });
7837
7890
  freeze(LightningElement);
7838
7891
  seal(LightningElement.prototype);
7839
- /* version: 2.4.0 */
7892
+ /* version: 2.5.0 */
7840
7893
 
7841
7894
  exports.LightningElement = LightningElement;
7842
7895
  exports.__unstable__ProfilerControl = profilerControl;