lwc 2.24.0 → 2.25.1

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

@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * 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.
@@ -383,7 +383,7 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
         patch$1(propName);
     }
 }
-/** version: 2.24.0 */
+/** version: 2.25.1 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -409,6 +409,7 @@ const features = {
     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) });
@@ -462,7 +463,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.24.0 */
+/** version: 2.25.1 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3459,167 +3460,270 @@ function getComponentDef(Ctor) {
  * 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;
 }
 
 /*
@@ -3704,6 +3808,9 @@ function isVBaseElement(vnode) {
 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.
@@ -6989,6 +7096,7 @@ function validateClassAttr(vnode, elm, renderer) {
     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.
@@ -6997,10 +7105,17 @@ function validateClassAttr(vnode, elm, renderer) {
     // 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;
@@ -7242,7 +7357,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.24.0 */
+/* version: 2.25.1 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7446,7 +7561,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.24.0 */
+    /** version: 2.25.1 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8065,6 +8180,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.24.0 */
+/* version: 2.25.1 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };