lwc 2.4.0 → 2.5.0

package/dist/engine-dom/umd/es5/engine-dom.js

@@ -301,6 +301,7 @@
   var KEY__SHADOW_RESOLVER = '$shadowResolver$';
   var KEY__SHADOW_TOKEN = '$shadowToken$';
   var KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
+  var KEY__SCOPED_CSS = '$scoped$';
   /**
    * Map composed of properties to attributes not following the HTML property to attribute mapping
    * convention.
@@ -349,7 +350,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -528,7 +529,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /* proxy-compat-disable */
 
@@ -4391,6 +4392,17 @@
 
   function setElementShadowToken(elm, token) {
     elm.$shadowToken$ = token;
+  } // Set the scope token class for *.scoped.css styles
+
+
+  function setScopeTokenClassIfNecessary(elm, owner) {
+    var cmpTemplate = owner.cmpTemplate,
+        context = owner.context;
+    var 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) {
@@ -4454,12 +4466,13 @@
 
   function fallbackElmHook(elm, vnode) {
     var owner = vnode.owner;
+    setScopeTokenClassIfNecessary(elm, owner);
 
     if (owner.shadowMode === 1
     /* Synthetic */
     ) {
       var context = vnode.data.context;
-      var shadowAttribute = owner.context.shadowAttribute;
+      var stylesheetToken = owner.context.stylesheetToken;
 
       if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
       /* manual */
@@ -4470,7 +4483,7 @@
       // into each element from the template, so they can be styled accordingly.
 
 
-      setElementShadowToken(elm, shadowAttribute);
+      setElementShadowToken(elm, stylesheetToken);
     }
 
     if (process.env.NODE_ENV !== 'production') {
@@ -4549,14 +4562,15 @@
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
+    setScopeTokenClassIfNecessary(elm, owner);
 
     if (owner.shadowMode === 1
     /* Synthetic */
     ) {
-      var shadowAttribute = owner.context.shadowAttribute; // when running in synthetic shadow mode, we need to set the shadowToken value
+      var stylesheetToken = owner.context.stylesheetToken; // 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);
     }
 
     var def = getComponentInternalDef(ctor);
@@ -5330,6 +5344,10 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+  function makeHostToken(token) {
+    return "".concat(token, "-host");
+  }
+
   function createInlineStyleVNode(content) {
     return h('style', {
       key: 'style',
@@ -5339,55 +5357,92 @@
     }, [t(content)]);
   }
 
-  function updateSyntheticShadowAttributes(vm, template) {
+  function updateStylesheetToken(vm, template) {
     var elm = vm.elm,
         context = vm.context,
         renderer = vm.renderer,
-        renderMode = vm.renderMode;
+        renderMode = vm.renderMode,
+        shadowMode = vm.shadowMode;
     var newStylesheets = template.stylesheets,
-        newStylesheetTokens = template.stylesheetTokens;
-    var newTokens; // Reset the styling token applied to the host element.
+        newStylesheetToken = template.stylesheetToken;
+    var isSyntheticShadow = renderMode === 1
+    /* Shadow */
+    && shadowMode === 1
+    /* Synthetic */
+    ;
+    var hasScopedStyles = context.hasScopedStyles;
+    var newToken;
+    var newHasTokenInClass;
+    var newHasTokenInAttribute; // Reset the styling token applied to the host element.
+
+    var oldToken = context.stylesheetToken,
+        oldHasTokenInClass = context.hasTokenInClass,
+        oldHasTokenInAttribute = context.hasTokenInAttribute;
 
-    var oldHostAttribute = context.hostAttribute;
+    if (oldHasTokenInClass) {
+      renderer.getClassList(elm).remove(makeHostToken(oldToken));
+    }
 
-    if (!isUndefined$1(oldHostAttribute)) {
-      renderer.removeAttribute(elm, oldHostAttribute);
+    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) {
     var content = [];
 
     for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
       var stylesheet = stylesheets[_i12];
 
       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`.
 
-        ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
+
+        var isScopedCss = stylesheet[KEY__SCOPED_CSS];
+        var 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.
+
+        var scopeToken = isScopedCss || vm.shadowMode === 1
+        /* Synthetic */
+        && vm.renderMode === 1
+        /* Shadow */
+        ? stylesheetToken : undefined;
+        ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
       }
     }
 
@@ -5396,31 +5451,11 @@
 
   function getStylesheetsContent(vm, template) {
     var stylesheets = template.stylesheets,
-        stylesheetTokens = template.stylesheetTokens;
-    var renderMode = vm.renderMode,
-        shadowMode = vm.shadowMode;
+        stylesheetToken = template.stylesheetToken;
     var content = [];
 
     if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-      var hostSelector;
-      var 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 = "[".concat(stylesheetTokens.hostAttribute, "]");
-        shadowSelector = "[".concat(stylesheetTokens.shadowAttribute, "]");
-      } else {
-        hostSelector = '';
-        shadowSelector = '';
-      }
-
-      content = evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, shadowMode === 0
-      /* Native */
-      );
+      content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
     }
 
     return content;
@@ -5677,8 +5712,7 @@
           context = vm.context,
           cmpSlots = vm.cmpSlots,
           cmpTemplate = vm.cmpTemplate,
-          tro = vm.tro,
-          shadowMode = vm.shadowMode;
+          tro = vm.tro;
       tro.observe(function () {
         // Reset the cache memoizer for template when needed.
         if (html !== cmpTemplate) {
@@ -5702,15 +5736,12 @@
 
           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.
 
           var stylesheetsContent = getStylesheetsContent(vm, html);
           context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
@@ -5750,6 +5781,20 @@
 
     return vnodes;
   }
+
+  function computeHasScopedStyles(template) {
+    var stylesheets = template.stylesheets;
+
+    if (!isUndefined$1(stylesheets)) {
+      for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
+        if (isTrue(stylesheets[_i15][KEY__SCOPED_CSS])) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5972,8 +6017,8 @@
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
 
-    for (var _i15 = 0; _i15 < hooks.length; ++_i15) {
-      var hookName = hooks[_i15];
+    for (var _i16 = 0; _i16 < hooks.length; ++_i16) {
+      var hookName = hooks[_i16];
 
       if (hookName in service) {
         var l = Services[hookName];
@@ -5996,8 +6041,8 @@
         def = vm.def,
         context = vm.context;
 
-    for (var _i16 = 0, _len6 = cbs.length; _i16 < _len6; ++_i16) {
-      cbs[_i16].call(undefined, component, {}, def, context);
+    for (var _i17 = 0, _len6 = cbs.length; _i17 < _len6; ++_i17) {
+      cbs[_i17].call(undefined, component, {}, def, context);
     }
   }
   /*
@@ -6142,8 +6187,10 @@
       renderMode: def.renderMode,
       shadowMode: null,
       context: {
-        hostAttribute: undefined,
-        shadowAttribute: undefined,
+        stylesheetToken: undefined,
+        hasTokenInClass: undefined,
+        hasTokenInAttribute: undefined,
+        hasScopedStyles: undefined,
         styleVNode: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
@@ -6352,19 +6399,19 @@
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i17 = 0, _len7 = vms.length; _i17 < _len7; _i17 += 1) {
-      var vm = vms[_i17];
+    for (var _i18 = 0, _len7 = vms.length; _i18 < _len7; _i18 += 1) {
+      var vm = vms[_i18];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i17 + 1 < _len7) {
+        if (_i18 + 1 < _len7) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i17 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i18 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -6468,8 +6515,8 @@
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i18 = vCustomElementCollection.length - 1; _i18 >= 0; _i18 -= 1) {
-      var elm = vCustomElementCollection[_i18].elm; // There are two cases where the element could be undefined:
+    for (var _i19 = vCustomElementCollection.length - 1; _i19 >= 0; _i19 -= 1) {
+      var elm = vCustomElementCollection[_i19].elm; // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
       //   is not properly initialized, and therefore is should be ignored.
@@ -6503,8 +6550,8 @@
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i19 = 0, _len8 = vnodes.length; _i19 < _len8; _i19 += 1) {
-      var vnode = vnodes[_i19];
+    for (var _i20 = 0, _len8 = vnodes.length; _i20 < _len8; _i20 += 1) {
+      var vnode = vnodes[_i20];
 
       if (!isNull(vnode) && isArray$1(vnode.children) && !isUndefined$1(vnode.elm)) {
         // vnode is a VElement with children
@@ -6528,8 +6575,8 @@
         renderer = vm.renderer;
     var rootNode = getRenderRoot(vm);
 
-    for (var _i20 = 0, _len9 = children.length; _i20 < _len9; _i20++) {
-      var child = children[_i20];
+    for (var _i21 = 0, _len9 = children.length; _i21 < _len9; _i21++) {
+      var child = children[_i21];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
         renderer.remove(child.elm, rootNode);
@@ -6574,8 +6621,8 @@
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i21 = 0, _len10 = children.length; _i21 < _len10; _i21 += 1) {
-      var vnode = children[_i21];
+    for (var _i22 = 0, _len10 = children.length; _i22 < _len10; _i22 += 1) {
+      var vnode = children[_i22];
 
       if (isNull(vnode)) {
         continue;
@@ -6605,8 +6652,8 @@
         return;
       }
 
-      for (var _i22 = 0, _len11 = oldKeys.length; _i22 < _len11; _i22 += 1) {
-        var key = oldKeys[_i22];
+      for (var _i23 = 0, _len11 = oldKeys.length; _i23 < _len11; _i23 += 1) {
+        var key = oldKeys[_i23];
 
         if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
           markComponentAsDirty(vm);
@@ -6969,8 +7016,8 @@
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i23 = 0, _len12 = wiredConnecting.length; _i23 < _len12; _i23 += 1) {
-      wiredConnecting[_i23]();
+    for (var _i24 = 0, _len12 = wiredConnecting.length; _i24 < _len12; _i24 += 1) {
+      wiredConnecting[_i24]();
     }
   }
 
@@ -6978,8 +7025,8 @@
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i24 = 0, _len13 = wiredDisconnecting.length; _i24 < _len13; _i24 += 1) {
-        wiredDisconnecting[_i24]();
+      for (var _i25 = 0, _len13 = wiredDisconnecting.length; _i25 < _len13; _i25 += 1) {
+        wiredDisconnecting[_i25]();
       }
     }, noop);
   }
@@ -7054,7 +7101,7 @@
 
     return reactiveMembrane.getReadOnlyProxy(obj);
   }
-  /* version: 2.4.0 */
+  /* version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7069,8 +7116,8 @@
   if (process.env.NODE_ENV === 'development') {
     // @ts-ignore
     window.__lwcResetGlobalStylesheets = function () {
-      for (var _i25 = 0, _Object$keys = Object.keys(globalStylesheets); _i25 < _Object$keys.length; _i25++) {
-        var key = _Object$keys[_i25];
+      for (var _i26 = 0, _Object$keys = Object.keys(globalStylesheets); _i26 < _Object$keys.length; _i26++) {
+        var key = _Object$keys[_i26];
         delete globalStylesheets[key];
       }
     };
@@ -7607,7 +7654,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.4.0 */
+  /* version: 2.5.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;