lwc 2.4.0 → 2.5.0

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

@@ -252,6 +252,7 @@
   const KEY__SHADOW_RESOLVER = '$shadowResolver$';
   const KEY__SHADOW_TOKEN = '$shadowToken$';
   const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
+  const KEY__SCOPED_CSS = '$scoped$';
   /**
    * Map composed of properties to attributes not following the HTML property to attribute mapping
    * convention.
@@ -300,7 +301,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -471,7 +472,7 @@
 
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.4.0 */
+  /** version: 2.5.0 */
 
   /* proxy-compat-disable */
 
@@ -3367,6 +3368,19 @@
 
   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) {
@@ -3417,6 +3431,7 @@
     const {
       owner
     } = vnode;
+    setScopeTokenClassIfNecessary(elm, owner);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -3427,7 +3442,7 @@
         }
       } = vnode;
       const {
-        shadowAttribute
+        stylesheetToken
       } = owner.context;
 
       if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -3439,7 +3454,7 @@
       // into each element from the template, so they can be styled accordingly.
 
 
-      setElementShadowToken(elm, shadowAttribute);
+      setElementShadowToken(elm, stylesheetToken);
     }
   }
 
@@ -3510,16 +3525,17 @@
       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);
@@ -4179,6 +4195,10 @@
    * 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',
@@ -4188,53 +4208,94 @@
     }, [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 (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(newTokens)) {
-      renderer.setAttribute(elm, newTokens.hostAttribute, '');
+    if (!isUndefined$1(newToken)) {
+      if (hasScopedStyles) {
+        renderer.getClassList(elm).add(makeHostToken(newToken));
+        newHasTokenInClass = true;
+      }
+
+      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 {
+        // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+
 
-        ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
+        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.
+
+        const scopeToken = isScopedCss || vm.shadowMode === 1
+        /* Synthetic */
+        && vm.renderMode === 1
+        /* Shadow */
+        ? stylesheetToken : undefined;
+        ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
       }
     }
 
@@ -4244,34 +4305,12 @@
   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;
@@ -4454,8 +4493,7 @@
         context,
         cmpSlots,
         cmpTemplate,
-        tro,
-        shadowMode
+        tro
       } = vm;
       tro.observe(() => {
         // Reset the cache memoizer for template when needed.
@@ -4478,15 +4516,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.
 
           const stylesheetsContent = getStylesheetsContent(vm, html);
           context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
@@ -4519,6 +4554,22 @@
 
     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.
@@ -4887,8 +4938,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,
@@ -5778,7 +5831,7 @@
 
     return reactiveMembrane.getReadOnlyProxy(obj);
   }
-  /* version: 2.4.0 */
+  /* version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6314,7 +6367,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.4.0 */
+  /* version: 2.5.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;