lwc 2.4.0 → 2.5.0

package/dist/engine-server/esm/es2017/engine-server.js

@@ -245,6 +245,7 @@ const _globalThis = /*@__PURE__*/function () {
 
 const KEY__SHADOW_RESOLVER = '$shadowResolver$';
 const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
+const KEY__SCOPED_CSS = '$scoped$';
 /*
  * Copyright (c) 2020, salesforce.com, inc.
  * All rights reserved.
@@ -334,7 +335,7 @@ function htmlPropertyToAttribute(propName) {
   CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
   return attributeName;
 }
-/** version: 2.4.0 */
+/** version: 2.5.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -454,7 +455,7 @@ function setFeatureFlagForTest(name, value) {
     setFeatureFlag(name, value);
   }
 }
-/** version: 2.4.0 */
+/** version: 2.5.0 */
 
 /* proxy-compat-disable */
 
@@ -4342,6 +4343,19 @@ function observeElementChildNodes(elm) {
 
 function setElementShadowToken(elm, token) {
   elm.$shadowToken$ = token;
+} // Set the scope token class for *.scoped.css styles
+
+
+function setScopeTokenClassIfNecessary(elm, owner) {
+  const {
+    cmpTemplate,
+    context
+  } = owner;
+  const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
+
+  if (!isUndefined$1(token) && context.hasScopedStyles) {
+    owner.renderer.getClassList(elm).add(token);
+  }
 }
 
 function updateNodeHook(oldVnode, vnode) {
@@ -4415,6 +4429,7 @@ function fallbackElmHook(elm, vnode) {
   const {
     owner
   } = vnode;
+  setScopeTokenClassIfNecessary(elm, owner);
 
   if (owner.shadowMode === 1
   /* Synthetic */
@@ -4425,7 +4440,7 @@ function fallbackElmHook(elm, vnode) {
       }
     } = vnode;
     const {
-      shadowAttribute
+      stylesheetToken
     } = owner.context;
 
     if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -4437,7 +4452,7 @@ function fallbackElmHook(elm, vnode) {
     // into each element from the template, so they can be styled accordingly.
 
 
-    setElementShadowToken(elm, shadowAttribute);
+    setElementShadowToken(elm, stylesheetToken);
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4526,16 +4541,17 @@ function createViewModelHook(elm, vnode) {
     ctor,
     owner
   } = vnode;
+  setScopeTokenClassIfNecessary(elm, owner);
 
   if (owner.shadowMode === 1
   /* Synthetic */
   ) {
     const {
-      shadowAttribute
+      stylesheetToken
     } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
     // into each element from the template, so they can be styled accordingly.
 
-    setElementShadowToken(elm, shadowAttribute);
+    setElementShadowToken(elm, stylesheetToken);
   }
 
   const def = getComponentInternalDef(ctor);
@@ -5331,6 +5347,10 @@ var api = /*#__PURE__*/Object.freeze({
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
+function makeHostToken(token) {
+  return `${token}-host`;
+}
+
 function createInlineStyleVNode(content) {
   return h('style', {
     key: 'style',
@@ -5340,59 +5360,100 @@ function createInlineStyleVNode(content) {
   }, [t(content)]);
 }
 
-function updateSyntheticShadowAttributes(vm, template) {
+function updateStylesheetToken(vm, template) {
   const {
     elm,
     context,
     renderer,
-    renderMode
+    renderMode,
+    shadowMode
   } = vm;
   const {
     stylesheets: newStylesheets,
-    stylesheetTokens: newStylesheetTokens
+    stylesheetToken: newStylesheetToken
   } = template;
-  let newTokens; // Reset the styling token applied to the host element.
+  const isSyntheticShadow = renderMode === 1
+  /* Shadow */
+  && shadowMode === 1
+  /* Synthetic */
+  ;
+  const {
+    hasScopedStyles
+  } = context;
+  let newToken;
+  let newHasTokenInClass;
+  let newHasTokenInAttribute; // Reset the styling token applied to the host element.
 
-  const oldHostAttribute = context.hostAttribute;
+  const {
+    stylesheetToken: oldToken,
+    hasTokenInClass: oldHasTokenInClass,
+    hasTokenInAttribute: oldHasTokenInAttribute
+  } = context;
 
-  if (!isUndefined$1(oldHostAttribute)) {
-    renderer.removeAttribute(elm, oldHostAttribute);
+  if (oldHasTokenInClass) {
+    renderer.getClassList(elm).remove(makeHostToken(oldToken));
+  }
+
+  if (oldHasTokenInAttribute) {
+    renderer.removeAttribute(elm, makeHostToken(oldToken));
   } // Apply the new template styling token to the host element, if the new template has any
-  // associated stylesheets.
+  // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
 
-  if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0 && renderMode === 1
-  /* Shadow */
-  ) {
-    newTokens = newStylesheetTokens;
-  }
+  if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+    newToken = newStylesheetToken;
+  } // Set the new styling token on the host element
+
+
+  if (!isUndefined$1(newToken)) {
+    if (hasScopedStyles) {
+      renderer.getClassList(elm).add(makeHostToken(newToken));
+      newHasTokenInClass = true;
+    }
 
-  if (!isUndefined$1(newTokens)) {
-    renderer.setAttribute(elm, newTokens.hostAttribute, '');
+    if (isSyntheticShadow) {
+      renderer.setAttribute(elm, makeHostToken(newToken), '');
+      newHasTokenInAttribute = true;
+    }
   } // Update the styling tokens present on the context object.
 
 
-  context.hostAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.hostAttribute;
-  context.shadowAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.shadowAttribute;
+  context.stylesheetToken = newToken;
+  context.hasTokenInClass = newHasTokenInClass;
+  context.hasTokenInAttribute = newHasTokenInAttribute;
 }
 
-function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, nativeShadow) {
+function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
   const content = [];
 
   for (let i = 0; i < stylesheets.length; i++) {
     let stylesheet = stylesheets[i];
 
     if (isArray$1(stylesheet)) {
-      ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, hostSelector, shadowSelector, nativeShadow));
+      ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
     } else {
       if (process.env.NODE_ENV !== 'production') {
         // in dev-mode, we support hot swapping of stylesheet, which means that
         // the component instance might be attempting to use an old version of
         // the stylesheet, while internally, we have a replacement for it.
         stylesheet = getStyleOrSwappedStyle(stylesheet);
-      }
+      } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+      // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+
+
+      const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+      const useActualHostSelector = vm.renderMode === 0
+      /* Light */
+      ? !isScopedCss : vm.shadowMode === 0
+      /* Native */
+      ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
 
-      ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
+      const scopeToken = isScopedCss || vm.shadowMode === 1
+      /* Synthetic */
+      && vm.renderMode === 1
+      /* Shadow */
+      ? stylesheetToken : undefined;
+      ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
     }
   }
 
@@ -5402,34 +5463,12 @@ function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, n
 function getStylesheetsContent(vm, template) {
   const {
     stylesheets,
-    stylesheetTokens
+    stylesheetToken
   } = template;
-  const {
-    renderMode,
-    shadowMode
-  } = vm;
   let content = [];
 
   if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-    let hostSelector;
-    let shadowSelector; // Scoping with the tokens is only necessary for synthetic shadow. For both
-    // light DOM elements and native shadow, we just render the CSS as-is.
-
-    if (renderMode === 1
-    /* Shadow */
-    && shadowMode === 1
-    /* Synthetic */
-    && !isUndefined$1(stylesheetTokens)) {
-      hostSelector = `[${stylesheetTokens.hostAttribute}]`;
-      shadowSelector = `[${stylesheetTokens.shadowAttribute}]`;
-    } else {
-      hostSelector = '';
-      shadowSelector = '';
-    }
-
-    content = evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, shadowMode === 0
-    /* Native */
-    );
+    content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
   }
 
   return content;
@@ -5644,8 +5683,7 @@ function evaluateTemplate(vm, html) {
       context,
       cmpSlots,
       cmpTemplate,
-      tro,
-      shadowMode
+      tro
     } = vm;
     tro.observe(() => {
       // Reset the cache memoizer for template when needed.
@@ -5670,15 +5708,12 @@ function evaluateTemplate(vm, html) {
 
         vm.cmpTemplate = html; // Create a brand new template cache for the swapped templated.
 
-        context.tplCache = create(null); // Update the synthetic shadow attributes on the host element if necessary.
+        context.tplCache = create(null); // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
 
-        if (shadowMode === 1
-        /* Synthetic */
-        ) {
-          updateSyntheticShadowAttributes(vm, html);
-        } // Evaluate, create stylesheet and cache the produced VNode for future
-        // re-rendering.
+        context.hasScopedStyles = computeHasScopedStyles(html); // Update the scoping token on the host element.
 
+        updateStylesheetToken(vm, html); // Evaluate, create stylesheet and cache the produced VNode for future
+        // re-rendering.
 
         const stylesheetsContent = getStylesheetsContent(vm, html);
         context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
@@ -5720,6 +5755,22 @@ function evaluateTemplate(vm, html) {
 
   return vnodes;
 }
+
+function computeHasScopedStyles(template) {
+  const {
+    stylesheets
+  } = template;
+
+  if (!isUndefined$1(stylesheets)) {
+    for (let i = 0; i < stylesheets.length; i++) {
+      if (isTrue(stylesheets[i][KEY__SCOPED_CSS])) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -6130,8 +6181,10 @@ function createVM(elm, def, options) {
     renderMode: def.renderMode,
     shadowMode: null,
     context: {
-      hostAttribute: undefined,
-      shadowAttribute: undefined,
+      stylesheetToken: undefined,
+      hasTokenInClass: undefined,
+      hasTokenInAttribute: undefined,
+      hasScopedStyles: undefined,
       styleVNode: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
@@ -7062,7 +7115,7 @@ function readonly(obj) {
 
   return reactiveMembrane.getReadOnlyProxy(obj);
 }
-/* version: 2.4.0 */
+/* version: 2.5.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -7533,6 +7586,6 @@ function renderComponent(tagName, Ctor, props = {}) {
 
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.4.0 */
+/* version: 2.5.0 */
 
 export { LightningElement, api$1 as api, createContextProvider, getComponentDef, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, track, unwrap, wire };

package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js

@@ -194,7 +194,7 @@ const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
 // we can't use typeof since it will fail when transpiling.
 
 const hasNativeSymbolSupport = /*@__PURE__*/(() => Symbol('x').toString() === 'Symbol(x)')();
-/** version: 2.4.0 */
+/** version: 2.5.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -533,7 +533,7 @@ if (!_globalThis.lwcRuntimeFlags) {
 }
 
 const runtimeFlags = _globalThis.lwcRuntimeFlags;
-/** version: 2.4.0 */
+/** version: 2.5.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5823,4 +5823,4 @@ defineProperty(Element.prototype, '$domManual$', {
 
   configurable: true
 });
-/** version: 2.4.0 */
+/** version: 2.5.0 */

package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js

@@ -197,7 +197,7 @@
   // we can't use typeof since it will fail when transpiling.
 
   const hasNativeSymbolSupport = /*@__PURE__*/(() => Symbol('x').toString() === 'Symbol(x)')();
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -536,7 +536,7 @@
   }
 
   const runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5826,6 +5826,6 @@
 
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 }());

package/dist/synthetic-shadow/iife/es2017/synthetic-shadow_debug.js

@@ -125,7 +125,7 @@
   const KEY__SHADOW_TOKEN = '$shadowToken$';
   const KEY__SHADOW_TOKEN_PRIVATE = '$$ShadowTokenKey$$';
   const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -464,7 +464,7 @@
   }
 
   const runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5634,6 +5634,6 @@
 
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 }());

package/dist/synthetic-shadow/iife/es5/synthetic-shadow.js

@@ -193,7 +193,7 @@
   var hasNativeSymbolSupport = /*@__PURE__*/function () {
     return Symbol('x').toString() === 'Symbol(x)';
   }();
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -526,7 +526,7 @@
   }
 
   var runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5625,6 +5625,6 @@
     },
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 }());

package/dist/synthetic-shadow/iife/es5/synthetic-shadow_debug.js

@@ -117,7 +117,7 @@
   var KEY__SHADOW_TOKEN = '$shadowToken$';
   var KEY__SHADOW_TOKEN_PRIVATE = '$$ShadowTokenKey$$';
   var KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -448,7 +448,7 @@
   }
 
   var runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5429,6 +5429,6 @@
     },
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 }());

package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.js

@@ -199,7 +199,7 @@
   // we can't use typeof since it will fail when transpiling.
 
   const hasNativeSymbolSupport = /*@__PURE__*/(() => Symbol('x').toString() === 'Symbol(x)')();
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -538,7 +538,7 @@
   }
 
   const runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5828,6 +5828,6 @@
 
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 })));

package/dist/synthetic-shadow/umd/es2017/synthetic-shadow_debug.js

@@ -127,7 +127,7 @@
   const KEY__SHADOW_TOKEN = '$shadowToken$';
   const KEY__SHADOW_TOKEN_PRIVATE = '$$ShadowTokenKey$$';
   const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -466,7 +466,7 @@
   }
 
   const runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5636,6 +5636,6 @@
 
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 })));

package/dist/synthetic-shadow/umd/es5/synthetic-shadow.js

@@ -195,7 +195,7 @@
   var hasNativeSymbolSupport = /*@__PURE__*/function () {
     return Symbol('x').toString() === 'Symbol(x)';
   }();
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -528,7 +528,7 @@
   }
 
   var runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5627,6 +5627,6 @@
     },
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 })));

package/dist/synthetic-shadow/umd/es5/synthetic-shadow_debug.js

@@ -119,7 +119,7 @@
   var KEY__SHADOW_TOKEN = '$shadowToken$';
   var KEY__SHADOW_TOKEN_PRIVATE = '$$ShadowTokenKey$$';
   var KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -450,7 +450,7 @@
   }
 
   var runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5431,6 +5431,6 @@
     },
     configurable: true
   });
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
 })));

package/dist/wire-service/esm/es2017/wire-service.js

@@ -8,7 +8,7 @@
 function isUndefined(obj) {
   return obj === undefined;
 }
-/** version: 2.4.0 */
+/** version: 2.5.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -227,6 +227,6 @@ class LegacyWireAdapterBridge {
   }
 
 }
-/** version: 2.4.0 */
+/** version: 2.5.0 */
 
 export { ValueChangedEvent, register, registerWireService };

package/dist/wire-service/iife/es2017/wire-service.js

@@ -11,7 +11,7 @@ var WireService = (function (exports) {
     function isUndefined(obj) {
       return obj === undefined;
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -230,7 +230,7 @@ var WireService = (function (exports) {
       }
 
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     exports.ValueChangedEvent = ValueChangedEvent;
     exports.register = register;

package/dist/wire-service/iife/es2017/wire-service_debug.js

@@ -11,7 +11,7 @@ var WireService = (function (exports) {
     function isUndefined(obj) {
       return obj === undefined;
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -230,7 +230,7 @@ var WireService = (function (exports) {
       }
 
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     exports.ValueChangedEvent = ValueChangedEvent;
     exports.register = register;

package/dist/wire-service/iife/es5/wire-service.js

@@ -33,7 +33,7 @@ var WireService = (function (exports) {
     function isUndefined(obj) {
       return obj === undefined;
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -280,7 +280,7 @@ var WireService = (function (exports) {
 
       return LegacyWireAdapterBridge;
     }();
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     exports.ValueChangedEvent = ValueChangedEvent;
     exports.register = register;

package/dist/wire-service/iife/es5/wire-service_debug.js

@@ -33,7 +33,7 @@ var WireService = (function (exports) {
     function isUndefined(obj) {
       return obj === undefined;
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -280,7 +280,7 @@ var WireService = (function (exports) {
 
       return LegacyWireAdapterBridge;
     }();
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     exports.ValueChangedEvent = ValueChangedEvent;
     exports.register = register;

package/dist/wire-service/umd/es2017/wire-service.js

@@ -14,7 +14,7 @@
     function isUndefined(obj) {
       return obj === undefined;
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -233,7 +233,7 @@
       }
 
     }
-    /** version: 2.4.0 */
+    /** version: 2.5.0 */
 
     exports.ValueChangedEvent = ValueChangedEvent;
     exports.register = register;