lwc 2.11.0 → 2.12.0

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

@@ -304,9 +304,9 @@
    * 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.11.0";
+  const LWC_VERSION = "2.12.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.11.0 */
+  /** version: 2.12.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -459,7 +459,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.11.0 */
+  /** version: 2.12.0 */
 
   /* proxy-compat-disable */
 
@@ -5162,11 +5162,15 @@
    * INTERNAL: This function can only be invoked by compiled code. The compiler
    * will prevent this function from being imported by userland code.
    */
-  function registerComponent(Ctor, { tmpl }) {
-      if (process.env.NODE_ENV !== 'production') {
-          checkVersionMismatch(Ctor, 'component');
+  function registerComponent(
+  // We typically expect a LightningElementConstructor, but technically you can call this with anything
+  Ctor, { tmpl }) {
+      if (isFunction$1(Ctor)) {
+          if (process.env.NODE_ENV !== 'production') {
+              checkVersionMismatch(Ctor, 'component');
+          }
+          signedTemplateMap.set(Ctor, tmpl);
       }
-      signedTemplateMap.set(Ctor, tmpl);
       // chaining this method as a way to wrap existing assignment of component constructor easily,
       // without too much transformation
       return Ctor;
@@ -5255,236 +5259,6 @@
       }
   }
 
-  /*
-   * Copyright (c) 2022, 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 hydrate(vnode, node) {
-      switch (vnode.type) {
-          case 0 /* Text */:
-              hydrateText(vnode, node);
-              break;
-          case 1 /* Comment */:
-              hydrateComment(vnode, node);
-              break;
-          case 2 /* Element */:
-              hydrateElement(vnode, node);
-              break;
-          case 3 /* CustomElement */:
-              hydrateCustomElement(vnode, node);
-              break;
-      }
-  }
-  function hydrateText(vnode, node) {
-      var _a;
-      if (process.env.NODE_ENV !== 'production') {
-          validateNodeType(vnode, node, 3 /* TEXT */);
-          const nodeValue = getProperty$1(node, 'nodeValue');
-          if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
-              logWarn('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.
-      setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-      vnode.elm = node;
-  }
-  function hydrateComment(vnode, node) {
-      var _a;
-      if (process.env.NODE_ENV !== 'production') {
-          validateNodeType(vnode, node, 8 /* COMMENT */);
-          if (getProperty$1(node, 'nodeValue') !== vnode.text) {
-              logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
-          }
-      }
-      // always set the text value to the one from the vnode.
-      setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-      vnode.elm = node;
-  }
-  function hydrateElement(vnode, node) {
-      if (process.env.NODE_ENV !== 'production') {
-          validateNodeType(vnode, node, 1 /* ELEMENT */);
-          validateElement(vnode, node);
-      }
-      const elm = node;
-      vnode.elm = elm;
-      const { context } = vnode.data;
-      const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual" /* Manual */);
-      if (isDomManual) {
-          // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
-          // remove the innerHTML from props so it reuses the existing dom elements.
-          const { props } = vnode.data;
-          if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-              if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
-                  // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
-                  vnode.data = Object.assign(Object.assign({}, vnode.data), { props: cloneAndOmitKey(props, 'innerHTML') });
-              }
-              else {
-                  logWarn(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
-              }
-          }
-      }
-      patchElementPropsAndAttrs(vnode);
-      if (!isDomManual) {
-          hydrateChildren(getChildNodes$1(vnode.elm), vnode.children, vnode.owner);
-      }
-  }
-  function hydrateCustomElement(vnode, node) {
-      if (process.env.NODE_ENV !== 'production') {
-          validateNodeType(vnode, node, 1 /* ELEMENT */);
-          validateElement(vnode, node);
-      }
-      const elm = node;
-      const { sel, mode, ctor, owner } = vnode;
-      const vm = createVM(elm, ctor, {
-          mode,
-          owner,
-          tagName: sel,
-      });
-      vnode.elm = elm;
-      vnode.vm = vm;
-      allocateChildren(vnode, vm);
-      patchElementPropsAndAttrs(vnode);
-      // Insert hook section:
-      if (process.env.NODE_ENV !== 'production') {
-          assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
-      }
-      runConnectedCallback(vm);
-      if (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
-          hydrateChildren(getChildNodes$1(vnode.elm), vnode.children, vm);
-      }
-      hydrateVM(vm);
-  }
-  function hydrateChildren(elmChildren, children, vm) {
-      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 nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
-              throwHydrationError();
-          }
-      }
-      let childNodeIndex = 0;
-      for (let i = 0; i < children.length; i++) {
-          const childVnode = children[i];
-          if (!isNull(childVnode)) {
-              const childNode = elmChildren[childNodeIndex];
-              hydrate(childVnode, childNode);
-              childNodeIndex++;
-          }
-      }
-  }
-  function patchElementPropsAndAttrs(vnode) {
-      applyEventListeners(vnode);
-      patchProps(null, vnode);
-  }
-  function throwHydrationError() {
-      assert.fail('Server rendered elements do not match client side generated elements');
-  }
-  function validateNodeType(vnode, node, nodeType) {
-      if (getProperty$1(node, 'nodeType') !== nodeType) {
-          logError('Hydration mismatch: incorrect node type received', vnode.owner);
-          assert.fail('Hydration mismatch: incorrect node type received.');
-      }
-  }
-  function validateElement(vnode, elm) {
-      if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
-          logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty$1(elm, 'tagName').toLowerCase()}".`, vnode.owner);
-          throwHydrationError();
-      }
-      const hasIncompatibleAttrs = validateAttrs(vnode, elm);
-      const hasIncompatibleClass = validateClassAttr(vnode, elm);
-      const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
-      const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
-      if (!isVNodeAndElementCompatible) {
-          throwHydrationError();
-      }
-  }
-  function validateAttrs(vnode, elm) {
-      const { data: { attrs = {} }, } = 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 = getAttribute$1(elm, attrName);
-          if (String(attrValue) !== elmAttrValue) {
-              logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
-              nodesAreCompatible = false;
-          }
-      }
-      return nodesAreCompatible;
-  }
-  function validateClassAttr(vnode, elm) {
-      const { data: { className, classMap }, } = vnode;
-      let nodesAreCompatible = true;
-      let vnodeClassName;
-      if (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
-          // className is used when class is bound to an expr.
-          nodesAreCompatible = false;
-          vnodeClassName = className;
-      }
-      else if (!isUndefined$1(classMap)) {
-          // classMap is used when class is set to static value.
-          const classList = getClassList$1(elm);
-          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;
-              }
-          }
-          vnodeClassName = computedClassName.trim();
-          if (classList.length > keys(classMap).length) {
-              nodesAreCompatible = false;
-          }
-      }
-      if (!nodesAreCompatible) {
-          logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty$1(elm, 'className')}"`, vnode.owner);
-      }
-      return nodesAreCompatible;
-  }
-  function validateStyleAttr(vnode, elm) {
-      const { data: { style, styleDecls }, } = vnode;
-      const elmStyle = getAttribute$1(elm, 'style') || '';
-      let vnodeStyle;
-      let nodesAreCompatible = true;
-      if (!isUndefined$1(style) && style !== elmStyle) {
-          nodesAreCompatible = false;
-          vnodeStyle = style;
-      }
-      else if (!isUndefined$1(styleDecls)) {
-          const parsedVnodeStyle = parseStyleText(elmStyle);
-          const expectedStyle = [];
-          // styleMap is used when style is set to static value.
-          for (let i = 0, n = styleDecls.length; i < n; i++) {
-              const [prop, value, important] = styleDecls[i];
-              expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
-              const parsedPropValue = parsedVnodeStyle[prop];
-              if (isUndefined$1(parsedPropValue)) {
-                  nodesAreCompatible = false;
-              }
-              else if (!parsedPropValue.startsWith(value)) {
-                  nodesAreCompatible = false;
-              }
-              else if (important && !parsedPropValue.endsWith('!important')) {
-                  nodesAreCompatible = false;
-              }
-          }
-          if (keys(parsedVnodeStyle).length > styleDecls.length) {
-              nodesAreCompatible = false;
-          }
-          vnodeStyle = ArrayJoin.call(expectedStyle, ';');
-      }
-      if (!nodesAreCompatible) {
-          // style is used when class is bound to an expr.
-          logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
-      }
-      return nodesAreCompatible;
-  }
-
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5530,32 +5304,12 @@
     /* GlobalHydrate */
     , vm);
   }
-  function hydrateRootElement(elm) {
-    const vm = getAssociatedVM(elm);
-    runConnectedCallback(vm);
-    hydrateVM(vm);
-  }
   function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
     resetComponentStateWhenRemoved(vm);
   }
   function appendVM(vm) {
     rehydrate(vm);
-  }
-  function hydrateVM(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 */
-      ? getChildNodes$1(vm.elm) : getChildNodes$1(vm.elm.shadowRoot);
-      hydrateChildren(vmChildren, children, vm);
-      runRenderedCallback(vm);
-    }
   } // just in case the component comes back, with this we guarantee re-rendering it
   // while preventing any attempt to rehydration until after reinsertion.
 
@@ -5860,7 +5614,6 @@
       , vm);
     }
   }
-
   let rehydrateQueue = [];
 
   function flushRehydrationQueue() {
@@ -6517,6 +6270,298 @@
       return reactiveMembrane.getReadOnlyProxy(obj);
   }
 
+  /*
+   * Copyright (c) 2022, 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
+   */
+  // flag indicating if the hydration recovered from the DOM mismatch
+  let hasMismatch = false;
+  function hydrateRoot(vm) {
+      hasMismatch = false;
+      runConnectedCallback(vm);
+      hydrateVM(vm);
+      if (hasMismatch) {
+          logError('Hydration completed with errors.', vm);
+      }
+  }
+  function hydrateVM(vm) {
+      const children = renderComponent(vm);
+      vm.children = children;
+      const parentNode = vm.renderRoot;
+      hydrateChildren(getFirstChild$1(parentNode), children, parentNode, vm);
+      runRenderedCallback(vm);
+  }
+  function hydrateNode(node, vnode) {
+      let hydratedNode;
+      switch (vnode.type) {
+          case 0 /* Text */:
+              hydratedNode = hydrateText(node, vnode);
+              break;
+          case 1 /* Comment */:
+              hydratedNode = hydrateComment(node, vnode);
+              break;
+          case 2 /* Element */:
+              hydratedNode = hydrateElement(node, vnode);
+              break;
+          case 3 /* CustomElement */:
+              hydratedNode = hydrateCustomElement(node, vnode);
+              break;
+      }
+      return nextSibling$1(hydratedNode);
+  }
+  function hydrateText(node, vnode) {
+      var _a;
+      if (!hasCorrectNodeType(vnode, node, 3 /* TEXT */)) {
+          return handleMismatch(node, vnode);
+      }
+      if (process.env.NODE_ENV !== 'production') {
+          const nodeValue = getProperty$1(node, 'nodeValue');
+          if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
+              logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
+          }
+      }
+      setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+      vnode.elm = node;
+      return node;
+  }
+  function hydrateComment(node, vnode) {
+      var _a;
+      if (!hasCorrectNodeType(vnode, node, 8 /* COMMENT */)) {
+          return handleMismatch(node, vnode);
+      }
+      if (process.env.NODE_ENV !== 'production') {
+          const nodeValue = getProperty$1(node, 'nodeValue');
+          if (nodeValue !== vnode.text) {
+              logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
+          }
+      }
+      setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+      vnode.elm = node;
+      return node;
+  }
+  function hydrateElement(elm, vnode) {
+      if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+          !isMatchingElement(vnode, elm)) {
+          return handleMismatch(elm, vnode);
+      }
+      vnode.elm = elm;
+      const { context } = vnode.data;
+      const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual" /* Manual */);
+      if (isDomManual) {
+          // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+          // remove the innerHTML from props so it reuses the existing dom elements.
+          const { props } = vnode.data;
+          if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
+              if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
+                  // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+                  vnode.data = Object.assign(Object.assign({}, vnode.data), { props: cloneAndOmitKey(props, 'innerHTML') });
+              }
+              else {
+                  if (process.env.NODE_ENV !== 'production') {
+                      logWarn(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
+                  }
+              }
+          }
+      }
+      patchElementPropsAndAttrs(vnode);
+      if (!isDomManual) {
+          hydrateChildren(getFirstChild$1(elm), vnode.children, elm, vnode.owner);
+      }
+      return elm;
+  }
+  function hydrateCustomElement(elm, vnode) {
+      if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+          !isMatchingElement(vnode, elm)) {
+          return handleMismatch(elm, vnode);
+      }
+      const { sel, mode, ctor, owner } = vnode;
+      const vm = createVM(elm, ctor, {
+          mode,
+          owner,
+          tagName: sel,
+      });
+      vnode.elm = elm;
+      vnode.vm = vm;
+      allocateChildren(vnode, vm);
+      patchElementPropsAndAttrs(vnode);
+      // Insert hook section:
+      if (process.env.NODE_ENV !== 'production') {
+          assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
+      }
+      runConnectedCallback(vm);
+      if (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
+          hydrateChildren(getFirstChild$1(elm), vnode.children, elm, vm);
+      }
+      hydrateVM(vm);
+      return elm;
+  }
+  function hydrateChildren(node, children, parentNode, owner) {
+      let hasWarned = false;
+      let nextNode = node;
+      let anchor = null;
+      for (let i = 0; i < children.length; i++) {
+          const childVnode = children[i];
+          if (!isNull(childVnode)) {
+              if (nextNode) {
+                  nextNode = hydrateNode(nextNode, childVnode);
+                  anchor = childVnode.elm;
+              }
+              else {
+                  hasMismatch = true;
+                  if (process.env.NODE_ENV !== 'production') {
+                      if (!hasWarned) {
+                          hasWarned = true;
+                          logError(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
+                      }
+                  }
+                  mount(childVnode, parentNode, anchor);
+                  anchor = childVnode.elm;
+              }
+          }
+      }
+      if (nextNode) {
+          hasMismatch = true;
+          if (process.env.NODE_ENV !== 'production') {
+              if (!hasWarned) {
+                  logError(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
+              }
+          }
+          do {
+              const current = nextNode;
+              nextNode = nextSibling$1(nextNode);
+              removeNode(current, parentNode);
+          } while (nextNode);
+      }
+  }
+  function handleMismatch(node, vnode, msg) {
+      hasMismatch = true;
+      if (!isUndefined$1(msg)) {
+          if (process.env.NODE_ENV !== 'production') {
+              logError(msg, vnode.owner);
+          }
+      }
+      const parentNode = getProperty$1(node, 'parentNode');
+      mount(vnode, parentNode, node);
+      removeNode(node, parentNode);
+      return vnode.elm;
+  }
+  function patchElementPropsAndAttrs(vnode) {
+      applyEventListeners(vnode);
+      patchProps(null, vnode);
+  }
+  function hasCorrectNodeType(vnode, node, nodeType) {
+      if (getProperty$1(node, 'nodeType') !== nodeType) {
+          if (process.env.NODE_ENV !== 'production') {
+              logError('Hydration mismatch: incorrect node type received', vnode.owner);
+          }
+          return false;
+      }
+      return true;
+  }
+  function isMatchingElement(vnode, elm) {
+      if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
+          if (process.env.NODE_ENV !== 'production') {
+              logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty$1(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+          }
+          return false;
+      }
+      const hasIncompatibleAttrs = validateAttrs(vnode, elm);
+      const hasIncompatibleClass = validateClassAttr(vnode, elm);
+      const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+      return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+  }
+  function validateAttrs(vnode, elm) {
+      const { data: { attrs = {} }, } = 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 = getAttribute$1(elm, attrName);
+          if (String(attrValue) !== elmAttrValue) {
+              if (process.env.NODE_ENV !== 'production') {
+                  logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
+              }
+              nodesAreCompatible = false;
+          }
+      }
+      return nodesAreCompatible;
+  }
+  function validateClassAttr(vnode, elm) {
+      const { data: { className, classMap }, } = vnode;
+      let nodesAreCompatible = true;
+      let vnodeClassName;
+      if (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
+          // className is used when class is bound to an expr.
+          nodesAreCompatible = false;
+          vnodeClassName = className;
+      }
+      else if (!isUndefined$1(classMap)) {
+          // classMap is used when class is set to static value.
+          const classList = getClassList$1(elm);
+          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;
+              }
+          }
+          vnodeClassName = computedClassName.trim();
+          if (classList.length > keys(classMap).length) {
+              nodesAreCompatible = false;
+          }
+      }
+      if (!nodesAreCompatible) {
+          if (process.env.NODE_ENV !== 'production') {
+              logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty$1(elm, 'className')}"`, vnode.owner);
+          }
+      }
+      return nodesAreCompatible;
+  }
+  function validateStyleAttr(vnode, elm) {
+      const { data: { style, styleDecls }, } = vnode;
+      const elmStyle = getAttribute$1(elm, 'style') || '';
+      let vnodeStyle;
+      let nodesAreCompatible = true;
+      if (!isUndefined$1(style) && style !== elmStyle) {
+          nodesAreCompatible = false;
+          vnodeStyle = style;
+      }
+      else if (!isUndefined$1(styleDecls)) {
+          const parsedVnodeStyle = parseStyleText(elmStyle);
+          const expectedStyle = [];
+          // styleMap is used when style is set to static value.
+          for (let i = 0, n = styleDecls.length; i < n; i++) {
+              const [prop, value, important] = styleDecls[i];
+              expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+              const parsedPropValue = parsedVnodeStyle[prop];
+              if (isUndefined$1(parsedPropValue)) {
+                  nodesAreCompatible = false;
+              }
+              else if (!parsedPropValue.startsWith(value)) {
+                  nodesAreCompatible = false;
+              }
+              else if (important && !parsedPropValue.endsWith('!important')) {
+                  nodesAreCompatible = false;
+              }
+          }
+          if (keys(parsedVnodeStyle).length > styleDecls.length) {
+              nodesAreCompatible = false;
+          }
+          vnodeStyle = ArrayJoin.call(expectedStyle, ';');
+      }
+      if (!nodesAreCompatible) {
+          if (process.env.NODE_ENV !== 'production') {
+              logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+          }
+      }
+      return nodesAreCompatible;
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6529,7 +6574,7 @@
       hooksAreSet = true;
       setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.11.0 */
+  /* version: 2.12.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6874,7 +6919,7 @@
       }
   }
   function createVMWithProps(element, Ctor, props) {
-      createVM(element, Ctor, {
+      const vm = createVM(element, Ctor, {
           mode: 'open',
           owner: null,
           tagName: element.tagName.toLowerCase(),
@@ -6882,6 +6927,7 @@
       for (const [key, value] of Object.entries(props)) {
           element[key] = value;
       }
+      return vm;
   }
   function hydrateComponent(element, Ctor, props = {}) {
       if (!(element instanceof Element)) {
@@ -6902,8 +6948,8 @@
           // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
           // and uses the same algo to create the stylesheets as in SSR.
           setIsHydrating(true);
-          createVMWithProps(element, Ctor, props);
-          hydrateRootElement(element);
+          const vm = createVMWithProps(element, Ctor, props);
+          hydrateRoot(vm);
           // set it back since now we finished hydration.
           setIsHydrating(false);
       }
@@ -7168,7 +7214,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.11.0 */
+  /* version: 2.12.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;