@lwc/engine-core 2.3.7 → 2.5.2-canary1

package/dist/engine-core.js

@@ -1,5 +1,5 @@
 /* proxy-compat-disable */
-import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, assign, assert, keys, StringCharCodeAt, isString, StringSlice, freeze, defineProperties, forEach, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, getPropertyDescriptor, isObject, AriaPropNameToAttrNameMap, defineProperty, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, noop, isArray as isArray$1, isNumber, StringReplace, KEY__SHADOW_RESOLVER, ArrayUnshift, isFrozen } from '@lwc/shared';
+import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, assign, assert, keys, StringCharCodeAt, isString, StringSlice, freeze, defineProperties, forEach, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, getPropertyDescriptor, isObject, AriaPropNameToAttrNameMap, defineProperty, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, ArrayFilter, noop, isArray as isArray$1, isNumber, StringReplace, KEY__SHADOW_RESOLVER, KEY__SCOPED_CSS, ArrayUnshift, isFrozen } from '@lwc/shared';
 import { runtimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -2309,12 +2309,6 @@ const LightningElement = function () {
   associateVM(component, vm);
   associateVM(elm, vm);
 
-  if (!runtimeFlags.ENABLE_LIGHT_DOM_COMPONENTS) {
-    assert.isTrue(def.renderMode !== 0
-    /* Light */
-    , `${def.name || 'Anonymous class'} is an invalid LWC component. Light DOM components are not available in this environment.`);
-  }
-
   if (vm.renderMode === 1
   /* Shadow */
   ) {
@@ -2946,18 +2940,33 @@ function createObservedFieldPropertyDescriptor(key) {
 
 function getClassDescriptorType(descriptor) {
   if (isFunction$1(descriptor.value)) {
-    return 'method';
+    return "method"
+    /* Method */
+    ;
   } else if (isFunction$1(descriptor.set) || isFunction$1(descriptor.get)) {
-    return 'accessor';
+    return "accessor"
+    /* Accessor */
+    ;
   } else {
-    return 'field';
+    return "field"
+    /* Field */
+    ;
   }
 }
 
 function validateObservedField(Ctor, fieldName, descriptor) {
   if (!isUndefined$1(descriptor)) {
     const type = getClassDescriptorType(descriptor);
-    assert.fail(`Invalid observed ${fieldName} field. Found a duplicate ${type} with the same name.`);
+    const message = `Invalid observed ${fieldName} field. Found a duplicate ${type} with the same name.`; // [W-9927596] Ideally we always throw an error when detecting duplicate observed field.
+    // This branch is only here for backward compatibility reasons.
+
+    if (type === "accessor"
+    /* Accessor */
+    ) {
+      logError(message);
+    } else {
+      assert.fail(message);
+    }
   }
 }
 
@@ -2984,7 +2993,16 @@ function validateMethodDecoratedWithWire(Ctor, methodName, descriptor) {
 function validateFieldDecoratedWithApi(Ctor, fieldName, descriptor) {
   if (!isUndefined$1(descriptor)) {
     const type = getClassDescriptorType(descriptor);
-    assert.fail(`Invalid @api ${fieldName} field. Found a duplicate ${type} with the same name.`);
+    const message = `Invalid @api ${fieldName} field. Found a duplicate ${type} with the same name.`; // [W-9927596] Ideally we always throw an error when detecting duplicate public properties.
+    // This branch is only here for backward compatibility reasons.
+
+    if (type === "accessor"
+    /* Accessor */
+    ) {
+      logError(message);
+    } else {
+      assert.fail(message);
+    }
   }
 }
 
@@ -3047,9 +3065,16 @@ function registerDecorators(Ctor, meta) {
         // field declaration
         if (process.env.NODE_ENV !== 'production') {
           validateFieldDecoratedWithApi(Ctor, fieldName, descriptor);
-        }
+        } // [W-9927596] If a component has both a public property and a private setter/getter
+        // with the same name, the property is defined as a public accessor. This branch is
+        // only here for backward compatibility reasons.
+
 
-        descriptor = createPublicPropertyDescriptor(fieldName);
+        if (!isUndefined$1(descriptor) && !isUndefined$1(descriptor.get)) {
+          descriptor = createPublicAccessorDescriptor(fieldName, descriptor);
+        } else {
+          descriptor = createPublicPropertyDescriptor(fieldName);
+        }
       }
 
       apiFields[fieldName] = descriptor;
@@ -3129,9 +3154,16 @@ function registerDecorators(Ctor, meta) {
 
       if (process.env.NODE_ENV !== 'production') {
         validateObservedField(Ctor, fieldName, descriptor);
-      }
+      } // [W-9927596] Only mark a field as observed whenever it isn't a duplicated public nor
+      // tracked property. This is only here for backward compatibility purposes.
+
+
+      const isDuplicatePublicProp = !isUndefined$1(publicProps) && fieldName in publicProps;
+      const isDuplicateTrackedProp = !isUndefined$1(track) && fieldName in track;
 
-      observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+      if (!isDuplicatePublicProp && !isDuplicateTrackedProp) {
+        observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+      }
     }
   }
 
@@ -3963,8 +3995,20 @@ function observeElementChildNodes(elm) {
 
 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) {
   const {
     elm,
@@ -4028,10 +4072,21 @@ function createElmHook(vnode) {
   modComputedClassName.create(vnode);
   modComputedStyle.create(vnode);
 }
+function hydrateElmHook(vnode) {
+  modEvents.create(vnode); // Attrs are already on the element.
+  // modAttrs.create(vnode);
+
+  modProps.create(vnode); // Already set.
+  // modStaticClassName.create(vnode);
+  // modStaticStyle.create(vnode);
+  // modComputedClassName.create(vnode);
+  // modComputedStyle.create(vnode);
+}
 function fallbackElmHook(elm, vnode) {
   const {
     owner
   } = vnode;
+  setScopeTokenClassIfNecessary(elm, owner);
 
   if (owner.shadowMode === 1
   /* Synthetic */
@@ -4042,7 +4097,7 @@ function fallbackElmHook(elm, vnode) {
       }
     } = vnode;
     const {
-      shadowAttribute
+      stylesheetToken
     } = owner.context;
 
     if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -4054,7 +4109,7 @@ function fallbackElmHook(elm, vnode) {
     // into each element from the template, so they can be styled accordingly.
 
 
-    setElementShadowToken(elm, shadowAttribute);
+    setElementShadowToken(elm, stylesheetToken);
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4139,16 +4194,17 @@ function createViewModelHook(elm, vnode) {
     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);
@@ -4190,6 +4246,172 @@ function createChildrenHook(vnode) {
     }
   }
 }
+
+function isElementNode(node) {
+  // @todo: should the hydrate be part of engine-dom? can we move hydrate out of the hooks?
+  // eslint-disable-next-line lwc-internal/no-global-node
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
+  const {
+    data: {
+      attrs = {}
+    },
+    owner: {
+      renderer
+    }
+  } = vnode;
+  let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
+  // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
+
+  for (const [attrName, attrValue] of Object.entries(attrs)) {
+    const elmAttrValue = renderer.getAttribute(elm, attrName);
+
+    if (attrValue !== elmAttrValue) {
+      logError(`Error hydrating element: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
+      nodesAreCompatible = false;
+    }
+  }
+
+  return nodesAreCompatible;
+}
+
+function vnodesAndElementHaveCompatibleClass(vnode, elm) {
+  const {
+    data: {
+      className,
+      classMap
+    },
+    owner: {
+      renderer
+    }
+  } = vnode;
+  let nodesAreCompatible = true;
+
+  if (!isUndefined$1(className) && className !== elm.className) {
+    // @todo: not sure if the above comparison is correct, maybe we should normalize to classlist
+    // className is used when class is bound to an expr.
+    logError(`Mismatch hydrating element: attribute "class" has different values, expected "${className}" but found "${elm.className}"`, vnode.owner);
+    nodesAreCompatible = false;
+  } else if (!isUndefined$1(classMap)) {
+    // classMap is used when class is set to static value.
+    // @todo: there might be a simpler method to do this.
+    const classList = renderer.getClassList(elm);
+    let hasClassMismatch = false;
+    let computedClassName = ''; // all classes from the vnode should be in the element.classList
+
+    for (const name in classMap) {
+      computedClassName += ' ' + name;
+
+      if (!classList.contains(name)) {
+        nodesAreCompatible = false;
+        hasClassMismatch = true;
+      }
+    } // all classes from element.classList should be in the vnode classMap
+
+
+    classList.forEach(name => {
+      if (!classMap[name]) {
+        nodesAreCompatible = false;
+        hasClassMismatch = true;
+      }
+    });
+
+    if (hasClassMismatch) {
+      logError(`Mismatch hydrating element: attribute "class" has different values, expected "${computedClassName.trim()}" but found "${elm.className}"`, vnode.owner);
+    }
+  }
+
+  return nodesAreCompatible;
+}
+
+function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
+  const {
+    data: {
+      style,
+      styleDecls
+    },
+    owner: {
+      renderer
+    }
+  } = vnode;
+  const elmStyle = renderer.getAttribute(elm, 'style');
+  let nodesAreCompatible = true; // @todo: question: would it be the same or is there a chance that the browser tweak the result of elm.setAttribute('style', ...)?
+  //        ex: such "str" exist that after elm.setAttribute('style', str), elm.getAttribute('style') !== str.
+
+  if (!isUndefined$1(style) && style !== elmStyle) {
+    // style is used when class is bound to an expr.
+    logError(`Mismatch hydrating element: attribute "style" has different values, expected "${style}" but found "${elmStyle}".`, vnode.owner);
+    nodesAreCompatible = false;
+  } else if (!isUndefined$1(styleDecls)) {
+    // styleMap is used when class is set to static value.
+    for (let i = 0; i < styleDecls.length; i++) {
+      const [prop, value, important] = styleDecls[i];
+      const elmPropValue = elm.style.getPropertyValue(prop);
+      const elmPropPriority = elm.style.getPropertyPriority(prop);
+
+      if (value !== elmPropValue || important !== (elmPropPriority === 'important')) {
+        nodesAreCompatible = false;
+      }
+    } // questions: is there a way to check that only those props in styleMap are set in the element?
+    //            how to generate the style?
+
+
+    logError('Error hydrating element: attribute "style" has different values.', vnode.owner);
+  }
+
+  return nodesAreCompatible;
+}
+
+function throwHydrationError() {
+  // @todo: maybe create a type for these type of hydration errors
+  assert.fail('Server rendered elements do not match client side generated elements');
+}
+
+function hydrateChildrenHook(elmChildren, children, vm) {
+  var _a;
+
+  if (process.env.NODE_ENV !== 'production') {
+    const filteredVNodes = ArrayFilter.call(children, vnode => !!vnode);
+
+    if (elmChildren.length !== filteredVNodes.length) {
+      logError(`Hydration mismatch: incorrect number of rendered elements, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
+      throwHydrationError();
+    }
+  }
+
+  let elmCurrentChildIdx = 0;
+
+  for (let j = 0, n = children.length; j < n; j++) {
+    const ch = children[j];
+
+    if (ch != null) {
+      const childNode = elmChildren[elmCurrentChildIdx];
+
+      if (process.env.NODE_ENV !== 'production') {
+        // VComments and VTexts validation is handled in their hooks
+        if (isElementNode(childNode)) {
+          if (((_a = ch.sel) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== childNode.tagName.toLowerCase()) {
+            logError(`Hydration mismatch: expecting element with tag "${ch.sel}" but found "${childNode.tagName}".`, vm);
+            throwHydrationError();
+          } // Note: props are not yet set
+
+
+          const isVNodeAndElementCompatible = vnodesAndElementHaveCompatibleAttrs(ch, childNode) && vnodesAndElementHaveCompatibleClass(ch, childNode) && vnodesAndElementHaveCompatibleStyle(ch, childNode);
+
+          if (!isVNodeAndElementCompatible) {
+            logError(`Hydration mismatch: incompatible attributes for element with tag "${childNode.tagName}".`, vm);
+            throwHydrationError();
+          }
+        }
+      }
+
+      ch.hook.hydrate(ch, childNode);
+      elmCurrentChildIdx++;
+    }
+  }
+}
 function updateCustomElmHook(oldVnode, vnode) {
   // Attrs need to be applied to element before props
   // IE11 will wipe out value on radio inputs if value
@@ -4286,7 +4508,27 @@ const TextHook = {
   update: updateNodeHook,
   insert: insertNodeHook,
   move: insertNodeHook,
-  remove: removeNodeHook
+  remove: removeNodeHook,
+  hydrate: (vNode, node) => {
+    var _a; // @todo tests.
+
+
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line lwc-internal/no-global-node
+      if (node.nodeType !== Node.TEXT_NODE) {
+        logError('Hydration mismatch: incorrect node type received', vNode.owner);
+        assert.fail('Hydration mismatch: incorrect node type received.');
+      }
+
+      if (node.nodeValue !== vNode.text) {
+        logError('Hydration mismatch: text values do not match, will recover from the difference', vNode.owner);
+      }
+    } // always set the text value to the one from the vnode.
+
+
+    node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
+    vNode.elm = node;
+  }
 };
 const CommentHook = {
   create: vnode => {
@@ -4304,7 +4546,23 @@ const CommentHook = {
   update: updateNodeHook,
   insert: insertNodeHook,
   move: insertNodeHook,
-  remove: removeNodeHook
+  remove: removeNodeHook,
+  hydrate: (vNode, node) => {
+    var _a; // @todo tests.
+
+
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line lwc-internal/no-global-node
+      if (node.nodeType !== Node.COMMENT_NODE) {
+        logError('Hydration mismatch: incorrect node type received', vNode.owner);
+        assert.fail('Hydration mismatch: incorrect node type received.');
+      }
+    } // always set the text value to the one from the vnode.
+
+
+    node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
+    vNode.elm = node;
+  }
 }; // insert is called after update, which is used somewhere else (via a module)
 // to mark the vm as inserted, that means we cannot use update as the main channel
 // to rehydrate when dirty, because sometimes the element is not inserted just yet,
@@ -4344,6 +4602,12 @@ const ElementHook = {
   remove: (vnode, parentNode) => {
     removeNodeHook(vnode, parentNode);
     removeElmHook(vnode);
+  },
+  hydrate: (vnode, node) => {
+    vnode.elm = node;
+    hydrateElmHook(vnode); // hydrate children hook
+
+    hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
   }
 };
 const CustomElementHook = {
@@ -4435,6 +4699,52 @@ const CustomElementHook = {
       // will take care of disconnecting any child VM attached to its shadow as well.
       removeVM(vm);
     }
+  },
+  hydrate: (vnode, elm) => {
+    // the element is created, but the vm is not
+    const {
+      sel,
+      mode,
+      ctor,
+      owner
+    } = vnode;
+    const def = getComponentInternalDef(ctor);
+    createVM(elm, def, {
+      mode,
+      owner,
+      tagName: sel,
+      renderer: owner.renderer
+    });
+    vnode.elm = elm;
+    const vm = getAssociatedVMIfPresent(elm);
+
+    if (vm) {
+      allocateChildrenHook(vnode, vm);
+    }
+
+    hydrateElmHook(vnode); // Insert hook section:
+
+    if (vm) {
+      if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(vm.state === 0
+        /* created */
+        , `${vm} cannot be recycled.`);
+      }
+
+      runConnectedCallback(vm);
+    }
+
+    if (!(vm && vm.renderMode === 0
+    /* Light */
+    )) {
+      // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+      // Note: for Light DOM, this is handled while hydrating the VM
+      hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
+    }
+
+    if (vm) {
+      hydrateVM(vm);
+    }
   }
 };
 
@@ -4923,6 +5233,10 @@ var api = /*#__PURE__*/Object.freeze({
  * 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',
@@ -4932,59 +5246,100 @@ function createInlineStyleVNode(content) {
   }, [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 (!isUndefined$1(oldHostAttribute)) {
-    renderer.removeAttribute(elm, oldHostAttribute);
+  if (oldHasTokenInClass) {
+    renderer.getClassList(elm).remove(makeHostToken(oldToken));
+  }
+
+  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) {
   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 {
       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));
+      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));
     }
   }
 
@@ -4994,34 +5349,12 @@ function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, n
 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;
@@ -5062,7 +5395,7 @@ function createStylesheet(vm, stylesheets) {
     for (let i = 0; i < stylesheets.length; i++) {
       renderer.insertGlobalStylesheet(stylesheets[i]);
     }
-  } else if (renderer.ssr) {
+  } else if (renderer.ssr || renderer.isHydrating) {
     // native shadow or light DOM, SSR
     const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
     return createInlineStyleVNode(combinedStylesheetContent);
@@ -5248,9 +5581,9 @@ function validateLightDomTemplate(template, vm) {
   if (vm.renderMode === 0
   /* Light */
   ) {
-    assert.isTrue(template.renderMode === 'light', `Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive on the root template tag.`);
+    assert.isTrue(template.renderMode === 'light', `Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(vm)}.`);
   } else {
-    assert.isTrue(isUndefined$1(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive or set it to 'lwc:render-mode="shadow"`);
+    assert.isTrue(isUndefined$1(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
   }
 }
 
@@ -5279,8 +5612,7 @@ function evaluateTemplate(vm, html) {
       context,
       cmpSlots,
       cmpTemplate,
-      tro,
-      shadowMode
+      tro
     } = vm;
     tro.observe(() => {
       // Reset the cache memoizer for template when needed.
@@ -5305,15 +5637,12 @@ function evaluateTemplate(vm, html) {
 
         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);
@@ -5355,6 +5684,21 @@ function evaluateTemplate(vm, html) {
 
   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.
@@ -5648,12 +5992,28 @@ function connectRootElement(elm) {
   /* GlobalHydrate */
   , vm);
 }
+function hydrateRootElement(elm) {
+  const vm = getAssociatedVM(elm); // Usually means moving the element from one place to another, which is observable via
+  // life-cycle hooks.
+
+  if (vm.state === 1
+  /* connected */
+  ) {
+    disconnectRootElement(elm);
+  }
+
+  runConnectedCallback(vm);
+  hydrateVM(vm); // should we hydrate the root children? light dom case.
+}
 function disconnectRootElement(elm) {
   const vm = getAssociatedVM(elm);
   resetComponentStateWhenRemoved(vm);
 }
 function appendVM(vm) {
   rehydrate(vm);
+}
+function hydrateVM(vm) {
+  hydrate(vm);
 } // just in case the component comes back, with this we guarantee re-rendering it
 // while preventing any attempt to rehydration until after reinsertion.
 
@@ -5744,8 +6104,10 @@ function createVM(elm, def, options) {
     renderMode: def.renderMode,
     shadowMode: null,
     context: {
-      hostAttribute: undefined,
-      shadowAttribute: undefined,
+      stylesheetToken: undefined,
+      hasTokenInClass: undefined,
+      hasTokenInAttribute: undefined,
+      hasScopedStyles: undefined,
       styleVNode: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
@@ -5876,6 +6238,22 @@ function rehydrate(vm) {
   }
 }
 
+function hydrate(vm) {
+  if (isTrue(vm.isDirty)) {
+    // manually diffing/patching here.
+    // This routine is:
+    // patchShadowRoot(vm, children);
+    //  -> addVnodes.
+    const children = renderComponent(vm);
+    vm.children = children;
+    const vmChildren = vm.renderMode === 0
+    /* Light */
+    ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
+    hydrateChildrenHook(vmChildren, children, vm);
+    runRenderedCallback(vm);
+  }
+}
+
 function patchShadowRoot(vm, newCh) {
   const {
     children: oldCh
@@ -6679,5 +7057,5 @@ function readonly(obj) {
   return reactiveMembrane.getReadOnlyProxy(obj);
 }
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentInternalDef, getUpgradableConstructor, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.3.7 */
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentInternalDef, getUpgradableConstructor, hydrateRootElement, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+/* version: 2.5.2-canary1 */