lwc 2.20.0 → 2.20.3

package/dist/engine-dom/iife/es2017/engine-dom_debug.js

@@ -291,7 +291,7 @@ var LWC = (function (exports) {
       CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
       return attributeName;
   }
-  /** version: 2.20.0 */
+  /** version: 2.20.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2290,6 +2290,167 @@ var LWC = (function (exports) {
       };
   }
 
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * 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 api.h('style', {
+          key: 'style',
+          attrs: {
+              type: 'text/css',
+          },
+      }, [api.t(content)]);
+  }
+  function updateStylesheetToken(vm, template) {
+      const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
+      const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
+      const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
+      const { hasScopedStyles } = context;
+      let newToken;
+      let newHasTokenInClass;
+      let newHasTokenInAttribute;
+      // Reset the styling token applied to the host element.
+      const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
+      if (!isUndefined$1(oldToken)) {
+          if (oldHasTokenInClass) {
+              getClassList(elm).remove(makeHostToken(oldToken));
+          }
+          if (oldHasTokenInAttribute) {
+              removeAttribute(elm, makeHostToken(oldToken));
+          }
+      }
+      // Apply the new template styling token to the host element, if the new template has any
+      // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
+      if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+          newToken = newStylesheetToken;
+      }
+      // Set the new styling token on the host element
+      if (!isUndefined$1(newToken)) {
+          if (hasScopedStyles) {
+              getClassList(elm).add(makeHostToken(newToken));
+              newHasTokenInClass = true;
+          }
+          if (isSyntheticShadow) {
+              setAttribute(elm, makeHostToken(newToken), '');
+              newHasTokenInAttribute = true;
+          }
+      }
+      // Update the styling tokens present on the context object.
+      context.stylesheetToken = newToken;
+      context.hasTokenInClass = newHasTokenInClass;
+      context.hasTokenInAttribute = newHasTokenInAttribute;
+  }
+  function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
+      const content = [];
+      let root;
+      for (let i = 0; i < stylesheets.length; i++) {
+          let stylesheet = stylesheets[i];
+          if (isArray$1(stylesheet)) {
+              ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+          }
+          else {
+              const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+              // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+              const scopeToken = isScopedCss ||
+                  (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
+                  ? stylesheetToken
+                  : undefined;
+              // 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 useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
+                  ? !isScopedCss
+                  : vm.shadowMode === 0 /* ShadowMode.Native */;
+              // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+              // we use an attribute selector on the host to simulate :dir().
+              let useNativeDirPseudoclass;
+              if (vm.renderMode === 1 /* RenderMode.Shadow */) {
+                  useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
+              }
+              else {
+                  // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+                  // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+                  if (isUndefined$1(root)) {
+                      // Only calculate the root once as necessary
+                      root = getNearestShadowComponent(vm);
+                  }
+                  useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
+              }
+              ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+          }
+      }
+      return content;
+  }
+  function getStylesheetsContent(vm, template) {
+      const { stylesheets, stylesheetToken } = template;
+      let content = [];
+      if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
+          content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+      }
+      return content;
+  }
+  // It might be worth caching this to avoid doing the lookup repeatedly, but
+  // perf testing has not shown it to be a huge improvement yet:
+  // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
+  function getNearestShadowComponent(vm) {
+      let owner = vm;
+      while (!isNull(owner)) {
+          if (owner.renderMode === 1 /* RenderMode.Shadow */) {
+              return owner;
+          }
+          owner = owner.owner;
+      }
+      return owner;
+  }
+  /**
+   * If the component that is currently being rendered uses scoped styles,
+   * this returns the unique token for that scoped stylesheet. Otherwise
+   * it returns null.
+   */
+  function getScopeTokenClass(owner) {
+      const { cmpTemplate, context } = owner;
+      return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+  }
+  function getNearestNativeShadowComponent(vm) {
+      const owner = getNearestShadowComponent(vm);
+      if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
+          // Synthetic-within-native is impossible. So if the nearest shadow component is
+          // synthetic, we know we won't find a native component if we go any further.
+          return null;
+      }
+      return owner;
+  }
+  function createStylesheet(vm, stylesheets) {
+      const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
+      if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
+          for (let i = 0; i < stylesheets.length; i++) {
+              insertStylesheet(stylesheets[i]);
+          }
+      }
+      else if (ssr || vm.hydrated) {
+          // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
+          //       This works in the client, because the stylesheets are created, and cached in the VM
+          //       the first time the VM renders.
+          // native shadow or light DOM, SSR
+          return ArrayMap.call(stylesheets, createInlineStyleVNode);
+      }
+      else {
+          // native shadow or light DOM, DOM renderer
+          const root = getNearestNativeShadowComponent(vm);
+          // null root means a global style
+          const target = isNull(root) ? undefined : root.shadowRoot;
+          for (let i = 0; i < stylesheets.length; i++) {
+              insertStylesheet(stylesheets[i], target);
+          }
+      }
+      return null;
+  }
+
   /*
    * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
@@ -2782,10 +2943,9 @@ var LWC = (function (exports) {
   }
   // Set the scope token class for *.scoped.css styles
   function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-      const { cmpTemplate, context } = owner;
-      const { getClassList } = renderer;
-      const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
-      if (!isUndefined$1(token) && context.hasScopedStyles) {
+      const token = getScopeTokenClass(owner);
+      if (!isNull(token)) {
+          const { getClassList } = renderer;
           // TODO [#2762]: this dot notation with add is probably problematic
           // probably we should have a renderer api for just the add operation
           getClassList(elm).add(token);
@@ -3405,158 +3565,6 @@ var LWC = (function (exports) {
       fid,
       shc,
   });
-
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * 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 api.h('style', {
-          key: 'style',
-          attrs: {
-              type: 'text/css',
-          },
-      }, [api.t(content)]);
-  }
-  function updateStylesheetToken(vm, template) {
-      const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-      const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
-      const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
-      const { hasScopedStyles } = context;
-      let newToken;
-      let newHasTokenInClass;
-      let newHasTokenInAttribute;
-      // Reset the styling token applied to the host element.
-      const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
-      if (!isUndefined$1(oldToken)) {
-          if (oldHasTokenInClass) {
-              getClassList(elm).remove(makeHostToken(oldToken));
-          }
-          if (oldHasTokenInAttribute) {
-              removeAttribute(elm, makeHostToken(oldToken));
-          }
-      }
-      // Apply the new template styling token to the host element, if the new template has any
-      // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-      if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
-          newToken = newStylesheetToken;
-      }
-      // Set the new styling token on the host element
-      if (!isUndefined$1(newToken)) {
-          if (hasScopedStyles) {
-              getClassList(elm).add(makeHostToken(newToken));
-              newHasTokenInClass = true;
-          }
-          if (isSyntheticShadow) {
-              setAttribute(elm, makeHostToken(newToken), '');
-              newHasTokenInAttribute = true;
-          }
-      }
-      // Update the styling tokens present on the context object.
-      context.stylesheetToken = newToken;
-      context.hasTokenInClass = newHasTokenInClass;
-      context.hasTokenInAttribute = newHasTokenInAttribute;
-  }
-  function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
-      const content = [];
-      let root;
-      for (let i = 0; i < stylesheets.length; i++) {
-          let stylesheet = stylesheets[i];
-          if (isArray$1(stylesheet)) {
-              ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
-          }
-          else {
-              const isScopedCss = stylesheet[KEY__SCOPED_CSS];
-              // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-              const scopeToken = isScopedCss ||
-                  (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
-                  ? stylesheetToken
-                  : undefined;
-              // 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 useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
-                  ? !isScopedCss
-                  : vm.shadowMode === 0 /* ShadowMode.Native */;
-              // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
-              // we use an attribute selector on the host to simulate :dir().
-              let useNativeDirPseudoclass;
-              if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-                  useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
-              }
-              else {
-                  // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
-                  // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-                  if (isUndefined$1(root)) {
-                      // Only calculate the root once as necessary
-                      root = getNearestShadowComponent(vm);
-                  }
-                  useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-              }
-              ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
-          }
-      }
-      return content;
-  }
-  function getStylesheetsContent(vm, template) {
-      const { stylesheets, stylesheetToken } = template;
-      let content = [];
-      if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-          content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-      }
-      return content;
-  }
-  // It might be worth caching this to avoid doing the lookup repeatedly, but
-  // perf testing has not shown it to be a huge improvement yet:
-  // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
-  function getNearestShadowComponent(vm) {
-      let owner = vm;
-      while (!isNull(owner)) {
-          if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-              return owner;
-          }
-          owner = owner.owner;
-      }
-      return owner;
-  }
-  function getNearestNativeShadowComponent(vm) {
-      const owner = getNearestShadowComponent(vm);
-      if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-          // Synthetic-within-native is impossible. So if the nearest shadow component is
-          // synthetic, we know we won't find a native component if we go any further.
-          return null;
-      }
-      return owner;
-  }
-  function createStylesheet(vm, stylesheets) {
-      const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
-      if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-          for (let i = 0; i < stylesheets.length; i++) {
-              insertStylesheet(stylesheets[i]);
-          }
-      }
-      else if (ssr || vm.hydrated) {
-          // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
-          //       This works in the client, because the stylesheets are created, and cached in the VM
-          //       the first time the VM renders.
-          // native shadow or light DOM, SSR
-          return ArrayMap.call(stylesheets, createInlineStyleVNode);
-      }
-      else {
-          // native shadow or light DOM, DOM renderer
-          const root = getNearestNativeShadowComponent(vm);
-          // null root means a global style
-          const target = isNull(root) ? undefined : root.shadowRoot;
-          for (let i = 0; i < stylesheets.length; i++) {
-              insertStylesheet(stylesheets[i], target);
-          }
-      }
-      return null;
-  }
   /** Indicates if operations should be logged by the profiler. */
   let isProfilerEnabled = false;
   /** The currently assigned profiler dispatcher. */
@@ -5082,8 +5090,24 @@ var LWC = (function (exports) {
       return nodesAreCompatible;
   }
   function validateClassAttr(vnode, elm, renderer) {
-      const { data: { className, classMap }, } = vnode;
+      const { data, owner } = vnode;
+      let { className, classMap } = data;
       const { getProperty, getClassList } = renderer;
+      const scopedToken = getScopeTokenClass(owner);
+      // Classnames for scoped CSS are added directly to the DOM during rendering,
+      // or to the VDOM on the server in the case of SSR. As such, these classnames
+      // are never present in VDOM nodes in the browser.
+      //
+      // Consequently, hydration mismatches will occur if scoped CSS token classnames
+      // are rendered during SSR. This needs to be accounted for when validating.
+      if (scopedToken) {
+          if (!isUndefined$1(className)) {
+              className = `${scopedToken} ${className}`;
+          }
+          else if (!isUndefined$1(classMap)) {
+              classMap = Object.assign(Object.assign({}, classMap), { [scopedToken]: true });
+          }
+      }
       let nodesAreCompatible = true;
       if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
           // className is used when class is bound to an expr.
@@ -5210,7 +5234,7 @@ var LWC = (function (exports) {
       }
       return ctor;
   }
-  /* version: 2.20.0 */
+  /* version: 2.20.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5234,9 +5258,6 @@ var LWC = (function (exports) {
   // Detect IE, via https://stackoverflow.com/a/9851769
   const isIE11 = !isUndefined$1(document.documentMode);
   const stylesheetCache = new Map();
-  function isDocument(target) {
-      return !isUndefined$1(target.head);
-  }
   function createFreshStyleElement(content) {
       const elm = document.createElement('style');
       elm.type = 'text/css';
@@ -5244,10 +5265,10 @@ var LWC = (function (exports) {
       return elm;
   }
   function createStyleElement(content, cacheData) {
-      const { stylesheet, used } = cacheData;
+      const { element, usedElement } = cacheData;
       // If the <style> was already used, then we should clone it. We cannot insert
       // the same <style> in two places in the DOM.
-      if (used) {
+      if (usedElement) {
           // For a mysterious reason, IE11 doesn't like the way we clone <style> nodes
           // and will render the incorrect styles if we do things that way. It's just
           // a perf optimization, so we can skip it for IE11.
@@ -5256,11 +5277,11 @@ var LWC = (function (exports) {
           }
           // This `<style>` may be repeated multiple times in the DOM, so cache it. It's a bit
           // faster to call `cloneNode()` on an existing node than to recreate it every time.
-          return stylesheet.cloneNode(true);
+          return element.cloneNode(true);
       }
       // We don't clone every time, because that would be a perf tax on the first time
-      cacheData.used = true;
-      return stylesheet;
+      cacheData.usedElement = true;
+      return element;
   }
   function createConstructableStylesheet(content) {
       const stylesheet = new CSSStyleSheet();
@@ -5281,47 +5302,42 @@ var LWC = (function (exports) {
   }
   function insertStyleElement(content, target, cacheData) {
       const elm = createStyleElement(content, cacheData);
-      const targetAnchorPoint = isDocument(target) ? target.head : target;
-      targetAnchorPoint.appendChild(elm);
-  }
-  function doInsertStylesheet(content, target, cacheData) {
-      // Constructable stylesheets are only supported in certain browsers:
-      // https://caniuse.com/mdn-api_document_adoptedstylesheets
-      // The reason we use it is for perf: https://github.com/salesforce/lwc/pull/2460
-      if (supportsConstructableStylesheets) {
-          insertConstructableStylesheet(content, target, cacheData);
-      }
-      else {
-          // Fall back to <style> element
-          insertStyleElement(content, target, cacheData);
-      }
+      target.appendChild(elm);
   }
-  function getCacheData(content) {
+  function getCacheData(content, useConstructableStylesheet) {
       let cacheData = stylesheetCache.get(content);
       if (isUndefined$1(cacheData)) {
           cacheData = {
-              stylesheet: supportsConstructableStylesheets
-                  ? createConstructableStylesheet(content)
-                  : createFreshStyleElement(content),
+              stylesheet: undefined,
+              element: undefined,
               roots: undefined,
               global: false,
-              used: false,
+              usedElement: false,
           };
           stylesheetCache.set(content, cacheData);
       }
+      // Create <style> elements or CSSStyleSheets on-demand, as needed
+      if (useConstructableStylesheet && isUndefined$1(cacheData.stylesheet)) {
+          cacheData.stylesheet = createConstructableStylesheet(content);
+      }
+      else if (!useConstructableStylesheet && isUndefined$1(cacheData.element)) {
+          cacheData.element = createFreshStyleElement(content);
+      }
       return cacheData;
   }
   function insertGlobalStylesheet(content) {
-      const cacheData = getCacheData(content);
+      // Force a <style> element for global stylesheets. See comment below.
+      const cacheData = getCacheData(content, false);
       if (cacheData.global) {
           // already inserted
           return;
       }
       cacheData.global = true; // mark inserted
-      doInsertStylesheet(content, document, cacheData);
+      // TODO [#2922]: use document.adoptedStyleSheets in supported browsers. Currently we can't, due to backwards compat.
+      insertStyleElement(content, document.head, cacheData);
   }
   function insertLocalStylesheet(content, target) {
-      const cacheData = getCacheData(content);
+      const cacheData = getCacheData(content, supportsConstructableStylesheets);
       let { roots } = cacheData;
       if (isUndefined$1(roots)) {
           roots = cacheData.roots = new WeakSet(); // lazily initialize (not needed for global styles)
@@ -5331,7 +5347,16 @@ var LWC = (function (exports) {
           return;
       }
       roots.add(target); // mark inserted
-      doInsertStylesheet(content, target, cacheData);
+      // Constructable stylesheets are only supported in certain browsers:
+      // https://caniuse.com/mdn-api_document_adoptedstylesheets
+      // The reason we use it is for perf: https://github.com/salesforce/lwc/pull/2460
+      if (supportsConstructableStylesheets) {
+          insertConstructableStylesheet(content, target, cacheData);
+      }
+      else {
+          // Fall back to <style> element
+          insertStyleElement(content, target, cacheData);
+      }
   }
   function insertStylesheet(content, target) {
       if (isUndefined$1(target)) {
@@ -5446,7 +5471,15 @@ var LWC = (function (exports) {
       return node.nextSibling;
   }
   function attachShadow(element, options) {
-      if (hydrating) {
+      // `hydrating` will be true in two cases:
+      //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
+      //   2. when a webapp author places <c-app> in their static HTML and mounts their
+      //      root component with customeElement.define('c-app', Ctor)
+      //
+      // The second case can be treated as a failed hydration with nominal impact
+      // to performance. However, because <c-app> won't have a <template shadowroot>
+      // declarative child, `element.shadowRoot` is `null`.
+      if (hydrating && element.shadowRoot) {
           return element.shadowRoot;
       }
       return element.attachShadow(options);
@@ -5866,7 +5899,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.20.0 */
+  /* version: 2.20.3 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;