lwc 2.24.0 → 2.25.1

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

@@ -302,9 +302,9 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "2.24.0";
+  const LWC_VERSION = "2.25.1";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.24.0 */
+  /** version: 2.25.1 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -386,7 +386,7 @@ var LWC = (function (exports) {
           patch$1(propName);
       }
   }
-  /** version: 2.24.0 */
+  /** version: 2.25.1 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -412,6 +412,7 @@ var LWC = (function (exports) {
       ENABLE_REACTIVE_SETTER: null,
       ENABLE_WIRE_SYNC_EMIT: null,
       ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
+      DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
   };
   if (!_globalThis.lwcRuntimeFlags) {
       Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -465,7 +466,7 @@ var LWC = (function (exports) {
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.24.0 */
+  /** version: 2.25.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -3462,167 +3463,270 @@ var LWC = (function (exports) {
    * 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`;
+    return `${token}-host`;
   }
+
   function createInlineStyleVNode(content) {
-      return api.h('style', {
-          key: 'style',
-          attrs: {
-              type: 'text/css',
-          },
-      }, [api.t(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;
+    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));
+    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 {
+        if (process.env.NODE_ENV !== 'production') {
+          // Check for compiler version mismatch in dev mode only
+          checkVersionMismatch(stylesheet, 'stylesheet'); // 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);
+        }
+
+        const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+
+        if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS) {
+          if (!isScopedCss && vm.renderMode === 0
+          /* RenderMode.Light */
+          ) {
+            logError('Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).');
+            continue;
           }
-          else {
-              if (process.env.NODE_ENV !== 'production') {
-                  // Check for compiler version mismatch in dev mode only
-                  checkVersionMismatch(stylesheet, 'stylesheet');
-                  // 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);
-              }
-              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));
+        } // 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;
+    }
+
+    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
+    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;
+    let owner = vm;
+
+    while (!isNull(owner)) {
+      if (owner.renderMode === 1
+      /* RenderMode.Shadow */
+      ) {
+        return owner;
       }
-      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;
+    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;
+  /**
+   * This function returns the host style token for a custom element if it
+   * exists. Otherwise it returns null.
+   */
+
+  function getStylesheetTokenHost(vnode) {
+    const {
+      template: {
+        stylesheetToken
       }
-      return owner;
+    } = getComponentInternalDef(vnode.ctor);
+    return !isUndefined$1(stylesheetToken) ? makeHostToken(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: { insertStylesheet }, } = vm;
-      if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-          for (let i = 0; i < stylesheets.length; i++) {
-              insertStylesheet(stylesheets[i]);
-          }
-      }
-      else if (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);
+    const {
+      renderMode,
+      shadowMode,
+      renderer: {
+        insertStylesheet
       }
-      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);
-          }
+    } = vm;
+
+    if (renderMode === 1
+    /* RenderMode.Shadow */
+    && shadowMode === 1
+    /* ShadowMode.Synthetic */
+    ) {
+      for (let i = 0; i < stylesheets.length; i++) {
+        insertStylesheet(stylesheets[i]);
+      }
+    } else if (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;
+    }
+
+    return null;
   }
 
   /*
@@ -3707,6 +3811,9 @@ var LWC = (function (exports) {
   function isSameVnode(vnode1, vnode2) {
       return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
   }
+  function isVCustomElement(vnode) {
+      return vnode.type === 3 /* VNodeType.CustomElement */;
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6992,6 +7099,7 @@ var LWC = (function (exports) {
       let { className, classMap } = data;
       const { getProperty, getClassList } = renderer;
       const scopedToken = getScopeTokenClass(owner);
+      const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
       // 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.
@@ -7000,10 +7108,17 @@ var LWC = (function (exports) {
       // are rendered during SSR. This needs to be accounted for when validating.
       if (scopedToken) {
           if (!isUndefined$1(className)) {
-              className = `${scopedToken} ${className}`;
+              className = isNull(stylesheetTokenHost)
+                  ? `${scopedToken} ${className}`
+                  : `${scopedToken} ${className} ${stylesheetTokenHost}`;
           }
           else if (!isUndefined$1(classMap)) {
-              classMap = Object.assign(Object.assign({}, classMap), { [scopedToken]: true });
+              classMap = Object.assign(Object.assign(Object.assign({}, classMap), { [scopedToken]: true }), (isNull(stylesheetTokenHost) ? {} : { [stylesheetTokenHost]: true }));
+          }
+          else {
+              className = isNull(stylesheetTokenHost)
+                  ? `${scopedToken}`
+                  : `${scopedToken} ${stylesheetTokenHost}`;
           }
       }
       let nodesAreCompatible = true;
@@ -7245,7 +7360,7 @@ var LWC = (function (exports) {
       }
       return ctor;
   }
-  /* version: 2.24.0 */
+  /* version: 2.25.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7449,7 +7564,7 @@ var LWC = (function (exports) {
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.24.0 */
+      /** version: 2.25.1 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8068,7 +8183,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.24.0 */
+  /* version: 2.25.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;