lwc 2.11.0 → 2.12.0

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

@@ -298,9 +298,9 @@ const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
  * 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.
@@ -453,7 +453,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.11.0 */
+/** version: 2.12.0 */
 
 /* proxy-compat-disable */
 
@@ -5156,11 +5156,15 @@ const signedTemplateMap = new Map();
  * 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;
@@ -5249,236 +5253,6 @@ function invokeServiceHook(vm, cbs) {
     }
 }
 
-/*
- * 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.
@@ -5524,32 +5298,12 @@ function connectRootElement(elm) {
   /* 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.
 
@@ -5854,7 +5608,6 @@ function runRenderedCallback(vm) {
     , vm);
   }
 }
-
 let rehydrateQueue = [];
 
 function flushRehydrationQueue() {
@@ -6511,6 +6264,298 @@ function readonly(obj) {
     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.
@@ -6523,7 +6568,7 @@ function setHooks(hooks) {
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
 }
-/* version: 2.11.0 */
+/* version: 2.12.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6868,7 +6913,7 @@ function resetShadowRootAndLightDom(element, Ctor) {
     }
 }
 function createVMWithProps(element, Ctor, props) {
-    createVM(element, Ctor, {
+    const vm = createVM(element, Ctor, {
         mode: 'open',
         owner: null,
         tagName: element.tagName.toLowerCase(),
@@ -6876,6 +6921,7 @@ function createVMWithProps(element, Ctor, props) {
     for (const [key, value] of Object.entries(props)) {
         element[key] = value;
     }
+    return vm;
 }
 function hydrateComponent(element, Ctor, props = {}) {
     if (!(element instanceof Element)) {
@@ -6896,8 +6942,8 @@ function hydrateComponent(element, Ctor, props = {}) {
         // 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);
     }
@@ -7162,6 +7208,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.11.0 */
+/* version: 2.12.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };