lwc 2.36.0 → 2.37.1

package/dist/engine-server/commonjs/es2017/engine-server.js

@@ -442,41 +442,9 @@ function htmlEscape(str, attrMode = false) {
  * 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.36.0";
+const LWC_VERSION = "2.37.1";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.36.0 */
-
-/*
- * Copyright (c) 2020, 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
- */
-/**
- * The following constructor might be used in either the constructor or the connectedCallback. In
- * order to ensure that the component evaluates, we attach those mock constructors to the global
- * object.
- * Also note that Event is defined in Node 16+, but CustomEvent is not, so they have to be
- * polyfilled separately.
- */
-if (typeof Event !== 'function') {
-    class Event {
-    }
-    defineProperty(_globalThis, 'Event', {
-        value: Event,
-        configurable: true,
-        writable: true,
-    });
-}
-if (typeof CustomEvent !== 'function') {
-    class CustomEvent extends Event {
-    }
-    defineProperty(_globalThis, 'CustomEvent', {
-        value: CustomEvent,
-        configurable: true,
-        writable: true,
-    });
-}
+/** version: 2.37.1 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -496,15 +464,15 @@ const features = {
     ENABLE_WIRE_SYNC_EMIT: null,
     ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
     ENABLE_FROZEN_TEMPLATE: null,
     DISABLE_ARIA_REFLECTION_POLYFILL: null,
-    ENABLE_PROGRAMMATIC_STYLESHEETS: null,
 };
+// eslint-disable-next-line no-restricted-properties
 if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
 }
-const lwcRuntimeFlags = _globalThis.lwcRuntimeFlags;
+// eslint-disable-next-line no-restricted-properties
+const flags = _globalThis.lwcRuntimeFlags;
 /**
  * Set the value at runtime of a given feature flag. This method only be invoked once per feature
  * flag. It is meant to be used during the app initialization.
@@ -532,17 +500,17 @@ function setFeatureFlag(name, value) {
     // This may seem redundant, but `process.env.NODE_ENV === 'test-karma-lwc'` is replaced by Karma tests
     if (process.env.NODE_ENV === 'test-karma-lwc' || process.env.NODE_ENV !== 'production') {
         // Allow the same flag to be set more than once outside of production to enable testing
-        lwcRuntimeFlags[name] = value;
+        flags[name] = value;
     }
     else {
         // Disallow the same flag to be set more than once in production
-        const runtimeValue = lwcRuntimeFlags[name];
+        const runtimeValue = flags[name];
         if (!isUndefined$1(runtimeValue)) {
             // eslint-disable-next-line no-console
             console.error(`Failed to set the value "${value}" for the runtime feature flag "${name}". "${name}" has already been set with the value "${runtimeValue}".`);
             return;
         }
-        defineProperty(lwcRuntimeFlags, name, { value });
+        defineProperty(flags, name, { value });
     }
 }
 /**
@@ -555,7 +523,39 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.36.0 */
+/** version: 2.37.1 */
+
+/*
+ * Copyright (c) 2020, 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
+ */
+/**
+ * The following constructor might be used in either the constructor or the connectedCallback. In
+ * order to ensure that the component evaluates, we attach those mock constructors to the global
+ * object.
+ * Also note that Event is defined in Node 16+, but CustomEvent is not, so they have to be
+ * polyfilled separately.
+ */
+if (typeof Event !== 'function') {
+    class Event {
+    }
+    defineProperty(_globalThis, 'Event', {
+        value: Event,
+        configurable: true,
+        writable: true,
+    });
+}
+if (typeof CustomEvent !== 'function') {
+    class CustomEvent extends Event {
+    }
+    defineProperty(_globalThis, 'CustomEvent', {
+        value: CustomEvent,
+        configurable: true,
+        writable: true,
+    });
+}
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -619,32 +619,10 @@ function applyAriaReflection(prototype = Element.prototype) {
         }
     }
 }
-/** version: 2.36.0 */
+/** version: 2.37.1 */
 
 /* proxy-compat-disable */
 
-/*
- * Copyright (c) 2018, 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
- */
-// Only used in LWC's Karma tests
-if (process.env.NODE_ENV === 'test-karma-lwc') {
-  window.addEventListener('test-dummy-flag', () => {
-    let hasFlag = false;
-    if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
-      hasFlag = true;
-    }
-    window.dispatchEvent(new CustomEvent('has-dummy-flag', {
-      detail: {
-        package: '@lwc/engine-core',
-        hasFlag
-      }
-    }));
-  });
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1883,50 +1861,45 @@ function getReactiveProxy(value) {
  * for the Base Lightning Element, it also include the reactivity bit, so the standard property is reactive.
  */
 function createBridgeToElementDescriptor(propName, descriptor) {
-  const {
-    get,
-    set,
-    enumerable,
-    configurable
-  } = descriptor;
-  if (!isFunction$1(get)) {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
-    }
-    throw new TypeError();
-  }
-  if (!isFunction$1(set)) {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
+    const { get, set, enumerable, configurable } = descriptor;
+    if (!isFunction$1(get)) {
+        if (process.env.NODE_ENV !== 'production') {
+            assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
+        }
+        throw new TypeError();
     }
-    throw new TypeError();
-  }
-  return {
-    enumerable,
-    configurable,
-    get() {
-      const vm = getAssociatedVM(this);
-      if (isBeingConstructed(vm)) {
+    if (!isFunction$1(set)) {
         if (process.env.NODE_ENV !== 'production') {
-          logError(`The value of property \`${propName}\` can't be read from the constructor because the owner component hasn't set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
+            assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
         }
-        return;
-      }
-      return get.call(vm.elm);
-    },
-    set(newValue) {
-      const vm = getAssociatedVM(this);
-      if (process.env.NODE_ENV !== 'production') {
-        const vmBeingRendered = getVMBeingRendered();
-        assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
-        assert.invariant(!isUpdatingTemplate, `When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
-        assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
-        assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
-      }
-      updateComponentValue(vm, propName, newValue);
-      return set.call(vm.elm, newValue);
+        throw new TypeError();
     }
-  };
+    return {
+        enumerable,
+        configurable,
+        get() {
+            const vm = getAssociatedVM(this);
+            if (isBeingConstructed(vm)) {
+                if (process.env.NODE_ENV !== 'production') {
+                    logError(`The value of property \`${propName}\` can't be read from the constructor because the owner component hasn't set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
+                }
+                return;
+            }
+            return get.call(vm.elm);
+        },
+        set(newValue) {
+            const vm = getAssociatedVM(this);
+            if (process.env.NODE_ENV !== 'production') {
+                const vmBeingRendered = getVMBeingRendered();
+                assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
+                assert.invariant(!isUpdatingTemplate, `When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
+                assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+                assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
+            }
+            updateComponentValue(vm, propName, newValue);
+            return set.call(vm.elm, newValue);
+        },
+    };
 }
 const refsCache = new WeakMap();
 /**
@@ -1935,436 +1908,347 @@ const refsCache = new WeakMap();
  **/
 // @ts-ignore
 const LightningElement = function () {
-  // This should be as performant as possible, while any initialization should be done lazily
-  if (isNull(vmBeingConstructed)) {
-    // Thrown when doing something like `new LightningElement()` or
-    // `class Foo extends LightningElement {}; new Foo()`
-    throw new TypeError('Illegal constructor');
-  }
-  const vm = vmBeingConstructed;
-  const {
-    def,
-    elm
-  } = vm;
-  const {
-    bridge
-  } = def;
-  if (process.env.NODE_ENV !== 'production') {
-    const {
-      assertInstanceOfHTMLElement
-    } = vm.renderer;
-    assertInstanceOfHTMLElement(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
-  }
-  const component = this;
-  setPrototypeOf(elm, bridge.prototype);
-  vm.component = this;
-  // Locker hooks assignment. When the LWC engine run with Locker, Locker intercepts all the new
-  // component creation and passes hooks to instrument all the component interactions with the
-  // engine. We are intentionally hiding this argument from the formal API of LightningElement
-  // because we don't want folks to know about it just yet.
-  if (arguments.length === 1) {
-    const {
-      callHook,
-      setHook,
-      getHook
-    } = arguments[0];
-    vm.callHook = callHook;
-    vm.setHook = setHook;
-    vm.getHook = getHook;
-  }
-  // Linking elm, shadow root and component with the VM.
-  associateVM(component, vm);
-  associateVM(elm, vm);
-  if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-    vm.renderRoot = doAttachShadow(vm);
-  } else {
-    vm.renderRoot = elm;
-  }
-  // Adding extra guard rails in DEV mode.
-  if (process.env.NODE_ENV !== 'production') {
-    patchCustomElementWithRestrictions(elm);
-    patchComponentWithRestrictions(component);
-  }
-  return this;
-};
-function doAttachShadow(vm) {
-  const {
-    elm,
-    mode,
-    shadowMode,
-    def: {
-      ctor
-    },
-    renderer: {
-      attachShadow
-    }
-  } = vm;
-  const shadowRoot = attachShadow(elm, {
-    [KEY__SYNTHETIC_MODE]: shadowMode === 1 /* ShadowMode.Synthetic */,
-    delegatesFocus: Boolean(ctor.delegatesFocus),
-    mode
-  });
-  vm.shadowRoot = shadowRoot;
-  associateVM(shadowRoot, vm);
-  if (process.env.NODE_ENV !== 'production') {
-    patchShadowRootWithRestrictions(shadowRoot);
-  }
-  return shadowRoot;
-}
-function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
-  if (isBeingConstructed(vm)) {
-    logError(`this.${methodOrPropName} should not be called during the construction of the custom element for ${getComponentTag(vm)} because the element is not yet in the DOM or has no children yet.`);
-  }
-}
-// @ts-ignore
-LightningElement.prototype = {
-  constructor: LightningElement,
-  dispatchEvent(event) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        dispatchEvent
-      }
-    } = vm;
-    return dispatchEvent(elm, event);
-  },
-  addEventListener(type, listener, options) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        addEventListener
-      }
-    } = vm;
-    if (process.env.NODE_ENV !== 'production') {
-      const vmBeingRendered = getVMBeingRendered();
-      assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-      assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-      assert.invariant(isFunction$1(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
-    }
-    const wrappedListener = getWrappedComponentsListener(vm, listener);
-    addEventListener(elm, type, wrappedListener, options);
-  },
-  removeEventListener(type, listener, options) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        removeEventListener
-      }
-    } = vm;
-    const wrappedListener = getWrappedComponentsListener(vm, listener);
-    removeEventListener(elm, type, wrappedListener, options);
-  },
-  hasAttribute(name) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        getAttribute
-      }
-    } = vm;
-    return !isNull(getAttribute(elm, name));
-  },
-  hasAttributeNS(namespace, name) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        getAttribute
-      }
-    } = vm;
-    return !isNull(getAttribute(elm, name, namespace));
-  },
-  removeAttribute(name) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        removeAttribute
-      }
-    } = vm;
-    unlockAttribute(elm, name);
-    removeAttribute(elm, name);
-    lockAttribute();
-  },
-  removeAttributeNS(namespace, name) {
-    const {
-      elm,
-      renderer: {
-        removeAttribute
-      }
-    } = getAssociatedVM(this);
-    unlockAttribute(elm, name);
-    removeAttribute(elm, name, namespace);
-    lockAttribute();
-  },
-  getAttribute(name) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm
-    } = vm;
-    const {
-      getAttribute
-    } = vm.renderer;
-    return getAttribute(elm, name);
-  },
-  getAttributeNS(namespace, name) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm
-    } = vm;
-    const {
-      getAttribute
-    } = vm.renderer;
-    return getAttribute(elm, name, namespace);
-  },
-  setAttribute(name, value) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        setAttribute
-      }
-    } = vm;
-    if (process.env.NODE_ENV !== 'production') {
-      assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
-    }
-    unlockAttribute(elm, name);
-    setAttribute(elm, name, value);
-    lockAttribute();
-  },
-  setAttributeNS(namespace, name, value) {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        setAttribute
-      }
-    } = vm;
-    if (process.env.NODE_ENV !== 'production') {
-      assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
-    }
-    unlockAttribute(elm, name);
-    setAttribute(elm, name, value, namespace);
-    lockAttribute();
-  },
-  getBoundingClientRect() {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        getBoundingClientRect
-      }
-    } = vm;
+    // This should be as performant as possible, while any initialization should be done lazily
+    if (isNull(vmBeingConstructed)) {
+        // Thrown when doing something like `new LightningElement()` or
+        // `class Foo extends LightningElement {}; new Foo()`
+        throw new TypeError('Illegal constructor');
+    }
+    const vm = vmBeingConstructed;
+    const { def, elm } = vm;
+    const { bridge } = def;
     if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
-    }
-    return getBoundingClientRect(elm);
-  },
-  get isConnected() {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        isConnected
-      }
-    } = vm;
-    return isConnected(elm);
-  },
-  get classList() {
-    const vm = getAssociatedVM(this);
-    const {
-      elm,
-      renderer: {
-        getClassList
-      }
-    } = vm;
-    if (process.env.NODE_ENV !== 'production') {
-      // TODO [#1290]: this still fails in dev but works in production, eventually, we should
-      // just throw in all modes
-      assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
-    }
-    return getClassList(elm);
-  },
-  get template() {
-    const vm = getAssociatedVM(this);
-    if (process.env.NODE_ENV !== 'production') {
-      if (vm.renderMode === 0 /* RenderMode.Light */) {
-        logError('`this.template` returns null for light DOM components. Since there is no shadow, the rendered content can be accessed via `this` itself. e.g. instead of `this.template.querySelector`, use `this.querySelector`.');
-      }
-    }
-    return vm.shadowRoot;
-  },
-  get refs() {
-    const vm = getAssociatedVM(this);
-    if (isUpdatingTemplate) {
-      if (process.env.NODE_ENV !== 'production') {
-        logError(`this.refs should not be called while ${getComponentTag(vm)} is rendering. Use this.refs only when the DOM is stable, e.g. in renderedCallback().`);
-      }
-      // If the template is in the process of being updated, then we don't want to go through the normal
-      // process of returning the refs and caching them, because the state of the refs is unstable.
-      // This can happen if e.g. a template contains `<div class={foo}></div>` and `foo` is computed
-      // based on `this.refs.bar`.
-      return;
+        const { assertInstanceOfHTMLElement } = vm.renderer;
+        assertInstanceOfHTMLElement(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
+    }
+    const component = this;
+    setPrototypeOf(elm, bridge.prototype);
+    vm.component = this;
+    // Locker hooks assignment. When the LWC engine run with Locker, Locker intercepts all the new
+    // component creation and passes hooks to instrument all the component interactions with the
+    // engine. We are intentionally hiding this argument from the formal API of LightningElement
+    // because we don't want folks to know about it just yet.
+    if (arguments.length === 1) {
+        const { callHook, setHook, getHook } = arguments[0];
+        vm.callHook = callHook;
+        vm.setHook = setHook;
+        vm.getHook = getHook;
     }
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'refs');
-    }
-    const {
-      refVNodes,
-      cmpTemplate
-    } = vm;
-    // If the `cmpTemplate` is null, that means that the template has not been rendered yet. Most likely this occurs
-    // if `this.refs` is called during the `connectedCallback` phase. The DOM elements have not been rendered yet,
-    // so log a warning. Note we also check `isBeingConstructed()` to avoid a double warning (due to
-    // `warnIfInvokedDuringConstruction` above).
-    if (process.env.NODE_ENV !== 'production' && isNull(cmpTemplate) && !isBeingConstructed(vm)) {
-      logError(`this.refs is undefined for ${getComponentTag(vm)}. This is either because the attached template has no "lwc:ref" directive, or this.refs was ` + `invoked before renderedCallback(). Use this.refs only when the referenced HTML elements have ` + `been rendered to the DOM, such as within renderedCallback() or disconnectedCallback().`);
-    }
-    // For backwards compatibility with component written before template refs
-    // were introduced, we return undefined if the template has no refs defined
-    // anywhere. This fixes components that may want to add an expando called `refs`
-    // and are checking if it exists with `if (this.refs)`  before adding it.
-    // Note we use a null refVNodes to indicate that the template has no refs defined.
-    if (isNull(refVNodes)) {
-      return;
-    }
-    // The refNodes can be cached based on the refVNodes, since the refVNodes
-    // are recreated from scratch every time the template is rendered.
-    // This happens with `vm.refVNodes = null` in `template.ts` in `@lwc/engine-core`.
-    let refs = refsCache.get(refVNodes);
-    if (isUndefined$1(refs)) {
-      refs = create(null);
-      for (const key of keys(refVNodes)) {
-        refs[key] = refVNodes[key].elm;
-      }
-      freeze(refs);
-      refsCache.set(refVNodes, refs);
-    }
-    return refs;
-  },
-  // For backwards compat, we allow component authors to set `refs` as an expando
-  set refs(value) {
-    defineProperty(this, 'refs', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value
-    });
-  },
-  get shadowRoot() {
-    // From within the component instance, the shadowRoot is always reported as "closed".
-    // Authors should rely on this.template instead.
-    return null;
-  },
-  get children() {
-    const vm = getAssociatedVM(this);
-    const renderer = vm.renderer;
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'children');
+    // Linking elm, shadow root and component with the VM.
+    associateVM(component, vm);
+    associateVM(elm, vm);
+    if (vm.renderMode === 1 /* RenderMode.Shadow */) {
+        vm.renderRoot = doAttachShadow(vm);
     }
-    return renderer.getChildren(vm.elm);
-  },
-  get childNodes() {
-    const vm = getAssociatedVM(this);
-    const renderer = vm.renderer;
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'childNodes');
+    else {
+        vm.renderRoot = elm;
     }
-    return renderer.getChildNodes(vm.elm);
-  },
-  get firstChild() {
-    const vm = getAssociatedVM(this);
-    const renderer = vm.renderer;
+    // Adding extra guard rails in DEV mode.
     if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'firstChild');
+        patchCustomElementWithRestrictions(elm);
+        patchComponentWithRestrictions(component);
     }
-    return renderer.getFirstChild(vm.elm);
-  },
-  get firstElementChild() {
-    const vm = getAssociatedVM(this);
-    const renderer = vm.renderer;
+    return this;
+};
+function doAttachShadow(vm) {
+    const { elm, mode, shadowMode, def: { ctor }, renderer: { attachShadow }, } = vm;
+    const shadowRoot = attachShadow(elm, {
+        [KEY__SYNTHETIC_MODE]: shadowMode === 1 /* ShadowMode.Synthetic */,
+        delegatesFocus: Boolean(ctor.delegatesFocus),
+        mode,
+    });
+    vm.shadowRoot = shadowRoot;
+    associateVM(shadowRoot, vm);
     if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'firstElementChild');
+        patchShadowRootWithRestrictions(shadowRoot);
     }
-    return renderer.getFirstElementChild(vm.elm);
-  },
-  get lastChild() {
-    const vm = getAssociatedVM(this);
-    const renderer = vm.renderer;
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'lastChild');
+    return shadowRoot;
+}
+function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
+    if (isBeingConstructed(vm)) {
+        logError(`this.${methodOrPropName} should not be called during the construction of the custom element for ${getComponentTag(vm)} because the element is not yet in the DOM or has no children yet.`);
     }
-    return renderer.getLastChild(vm.elm);
-  },
-  get lastElementChild() {
-    const vm = getAssociatedVM(this);
-    const renderer = vm.renderer;
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfInvokedDuringConstruction(vm, 'lastElementChild');
-    }
-    return renderer.getLastElementChild(vm.elm);
-  },
-  render() {
-    const vm = getAssociatedVM(this);
-    return vm.def.template;
-  },
-  toString() {
-    const vm = getAssociatedVM(this);
-    return `[object ${vm.def.name}]`;
-  }
+}
+// @ts-ignore
+LightningElement.prototype = {
+    constructor: LightningElement,
+    dispatchEvent(event) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { dispatchEvent }, } = vm;
+        return dispatchEvent(elm, event);
+    },
+    addEventListener(type, listener, options) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { addEventListener }, } = vm;
+        if (process.env.NODE_ENV !== 'production') {
+            const vmBeingRendered = getVMBeingRendered();
+            assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+            assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+            assert.invariant(isFunction$1(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
+        }
+        const wrappedListener = getWrappedComponentsListener(vm, listener);
+        addEventListener(elm, type, wrappedListener, options);
+    },
+    removeEventListener(type, listener, options) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { removeEventListener }, } = vm;
+        const wrappedListener = getWrappedComponentsListener(vm, listener);
+        removeEventListener(elm, type, wrappedListener, options);
+    },
+    hasAttribute(name) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
+        return !isNull(getAttribute(elm, name));
+    },
+    hasAttributeNS(namespace, name) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
+        return !isNull(getAttribute(elm, name, namespace));
+    },
+    removeAttribute(name) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { removeAttribute }, } = vm;
+        unlockAttribute(elm, name);
+        removeAttribute(elm, name);
+        lockAttribute();
+    },
+    removeAttributeNS(namespace, name) {
+        const { elm, renderer: { removeAttribute }, } = getAssociatedVM(this);
+        unlockAttribute(elm, name);
+        removeAttribute(elm, name, namespace);
+        lockAttribute();
+    },
+    getAttribute(name) {
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
+        return getAttribute(elm, name);
+    },
+    getAttributeNS(namespace, name) {
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
+        return getAttribute(elm, name, namespace);
+    },
+    setAttribute(name, value) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { setAttribute }, } = vm;
+        if (process.env.NODE_ENV !== 'production') {
+            assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        }
+        unlockAttribute(elm, name);
+        setAttribute(elm, name, value);
+        lockAttribute();
+    },
+    setAttributeNS(namespace, name, value) {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { setAttribute }, } = vm;
+        if (process.env.NODE_ENV !== 'production') {
+            assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        }
+        unlockAttribute(elm, name);
+        setAttribute(elm, name, value, namespace);
+        lockAttribute();
+    },
+    getBoundingClientRect() {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getBoundingClientRect }, } = vm;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
+        }
+        return getBoundingClientRect(elm);
+    },
+    get isConnected() {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { isConnected }, } = vm;
+        return isConnected(elm);
+    },
+    get classList() {
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getClassList }, } = vm;
+        if (process.env.NODE_ENV !== 'production') {
+            // TODO [#1290]: this still fails in dev but works in production, eventually, we should
+            // just throw in all modes
+            assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
+        }
+        return getClassList(elm);
+    },
+    get template() {
+        const vm = getAssociatedVM(this);
+        if (process.env.NODE_ENV !== 'production') {
+            if (vm.renderMode === 0 /* RenderMode.Light */) {
+                logError('`this.template` returns null for light DOM components. Since there is no shadow, the rendered content can be accessed via `this` itself. e.g. instead of `this.template.querySelector`, use `this.querySelector`.');
+            }
+        }
+        return vm.shadowRoot;
+    },
+    get refs() {
+        const vm = getAssociatedVM(this);
+        if (isUpdatingTemplate) {
+            if (process.env.NODE_ENV !== 'production') {
+                logError(`this.refs should not be called while ${getComponentTag(vm)} is rendering. Use this.refs only when the DOM is stable, e.g. in renderedCallback().`);
+            }
+            // If the template is in the process of being updated, then we don't want to go through the normal
+            // process of returning the refs and caching them, because the state of the refs is unstable.
+            // This can happen if e.g. a template contains `<div class={foo}></div>` and `foo` is computed
+            // based on `this.refs.bar`.
+            return;
+        }
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'refs');
+        }
+        const { refVNodes, cmpTemplate } = vm;
+        // If the `cmpTemplate` is null, that means that the template has not been rendered yet. Most likely this occurs
+        // if `this.refs` is called during the `connectedCallback` phase. The DOM elements have not been rendered yet,
+        // so log a warning. Note we also check `isBeingConstructed()` to avoid a double warning (due to
+        // `warnIfInvokedDuringConstruction` above).
+        if (process.env.NODE_ENV !== 'production' &&
+            isNull(cmpTemplate) &&
+            !isBeingConstructed(vm)) {
+            logError(`this.refs is undefined for ${getComponentTag(vm)}. This is either because the attached template has no "lwc:ref" directive, or this.refs was ` +
+                `invoked before renderedCallback(). Use this.refs only when the referenced HTML elements have ` +
+                `been rendered to the DOM, such as within renderedCallback() or disconnectedCallback().`);
+        }
+        // For backwards compatibility with component written before template refs
+        // were introduced, we return undefined if the template has no refs defined
+        // anywhere. This fixes components that may want to add an expando called `refs`
+        // and are checking if it exists with `if (this.refs)`  before adding it.
+        // Note we use a null refVNodes to indicate that the template has no refs defined.
+        if (isNull(refVNodes)) {
+            return;
+        }
+        // The refNodes can be cached based on the refVNodes, since the refVNodes
+        // are recreated from scratch every time the template is rendered.
+        // This happens with `vm.refVNodes = null` in `template.ts` in `@lwc/engine-core`.
+        let refs = refsCache.get(refVNodes);
+        if (isUndefined$1(refs)) {
+            refs = create(null);
+            for (const key of keys(refVNodes)) {
+                refs[key] = refVNodes[key].elm;
+            }
+            freeze(refs);
+            refsCache.set(refVNodes, refs);
+        }
+        return refs;
+    },
+    // For backwards compat, we allow component authors to set `refs` as an expando
+    set refs(value) {
+        defineProperty(this, 'refs', {
+            configurable: true,
+            enumerable: true,
+            writable: true,
+            value,
+        });
+    },
+    get shadowRoot() {
+        // From within the component instance, the shadowRoot is always reported as "closed".
+        // Authors should rely on this.template instead.
+        return null;
+    },
+    get children() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'children');
+        }
+        return renderer.getChildren(vm.elm);
+    },
+    get childNodes() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'childNodes');
+        }
+        return renderer.getChildNodes(vm.elm);
+    },
+    get firstChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstChild');
+        }
+        return renderer.getFirstChild(vm.elm);
+    },
+    get firstElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstElementChild');
+        }
+        return renderer.getFirstElementChild(vm.elm);
+    },
+    get lastChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastChild');
+        }
+        return renderer.getLastChild(vm.elm);
+    },
+    get lastElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastElementChild');
+        }
+        return renderer.getLastElementChild(vm.elm);
+    },
+    render() {
+        const vm = getAssociatedVM(this);
+        return vm.def.template;
+    },
+    toString() {
+        const vm = getAssociatedVM(this);
+        return `[object ${vm.def.name}]`;
+    },
 };
 const queryAndChildGetterDescriptors = create(null);
-const queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll'];
+const queryMethods = [
+    'getElementsByClassName',
+    'getElementsByTagName',
+    'querySelector',
+    'querySelectorAll',
+];
 // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
 for (const queryMethod of queryMethods) {
-  queryAndChildGetterDescriptors[queryMethod] = {
-    value(arg) {
-      const vm = getAssociatedVM(this);
-      const {
-        elm,
-        renderer
-      } = vm;
-      if (process.env.NODE_ENV !== 'production') {
-        warnIfInvokedDuringConstruction(vm, `${queryMethod}()`);
-      }
-      return renderer[queryMethod](elm, arg);
-    },
-    configurable: true,
-    enumerable: true,
-    writable: true
-  };
+    queryAndChildGetterDescriptors[queryMethod] = {
+        value(arg) {
+            const vm = getAssociatedVM(this);
+            const { elm, renderer } = vm;
+            if (process.env.NODE_ENV !== 'production') {
+                warnIfInvokedDuringConstruction(vm, `${queryMethod}()`);
+            }
+            return renderer[queryMethod](elm, arg);
+        },
+        configurable: true,
+        enumerable: true,
+        writable: true,
+    };
 }
 defineProperties(LightningElement.prototype, queryAndChildGetterDescriptors);
 const lightningBasedDescriptors = create(null);
 for (const propName in HTMLElementOriginalDescriptors) {
-  lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
+    lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
 }
 defineProperties(LightningElement.prototype, lightningBasedDescriptors);
 function applyAriaReflectionToLightningElement() {
-  // If ARIA reflection is not applied globally to Element.prototype, or if we are running server-side,
-  // apply it to LightningElement.prototype.
-  // This allows `this.aria*` property accessors to work from inside a component, and to reflect `aria-*` attrs.
-  applyAriaReflection(LightningElement.prototype);
-}
-// The reason for this odd if/else branching is limitations in @lwc/features:
-// https://github.com/salesforce/lwc/blob/master/packages/%40lwc/features/README.md#only-works-with-if-statements
-if (lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-  applyAriaReflectionToLightningElement();
-} else {
-  applyAriaReflectionToLightningElement();
+    // If ARIA reflection is not applied globally to Element.prototype, or if we are running server-side,
+    // apply it to LightningElement.prototype.
+    // This allows `this.aria*` property accessors to work from inside a component, and to reflect `aria-*` attrs.
+    applyAriaReflection(LightningElement.prototype);
+}
+{
+    applyAriaReflectionToLightningElement();
 }
 defineProperty(LightningElement, 'CustomElementConstructor', {
-  get() {
-    // If required, a runtime-specific implementation must be defined.
-    throw new ReferenceError('The current runtime does not support CustomElementConstructor.');
-  },
-  configurable: true
+    get() {
+        // If required, a runtime-specific implementation must be defined.
+        throw new ReferenceError('The current runtime does not support CustomElementConstructor.');
+    },
+    configurable: true,
 });
 if (process.env.NODE_ENV !== 'production') {
-  patchLightningElementPrototypeWithRestrictions(LightningElement.prototype);
+    patchLightningElementPrototypeWithRestrictions(LightningElement.prototype);
 }
 
 function createObservedFieldPropertyDescriptor(key) {
@@ -2393,268 +2277,234 @@ const DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
 const WIRE_DEBUG_ENTRY = '@wire';
 const WireMetaMap = new Map();
 class WireContextRegistrationEvent extends CustomEvent {
-  constructor(adapterToken, {
-    setNewContext,
-    setDisconnectedCallback
-  }) {
-    super(adapterToken, {
-      bubbles: true,
-      composed: true
-    });
-    defineProperties(this, {
-      setNewContext: {
-        value: setNewContext
-      },
-      setDisconnectedCallback: {
-        value: setDisconnectedCallback
-      }
-    });
-  }
+    constructor(adapterToken, { setNewContext, setDisconnectedCallback }) {
+        super(adapterToken, {
+            bubbles: true,
+            composed: true,
+        });
+        defineProperties(this, {
+            setNewContext: {
+                value: setNewContext,
+            },
+            setDisconnectedCallback: {
+                value: setDisconnectedCallback,
+            },
+        });
+    }
 }
 function createFieldDataCallback(vm, name) {
-  return value => {
-    updateComponentValue(vm, name, value);
-  };
+    return (value) => {
+        updateComponentValue(vm, name, value);
+    };
 }
 function createMethodDataCallback(vm, method) {
-  return value => {
-    // dispatching new value into the wired method
-    runWithBoundaryProtection(vm, vm.owner, noop, () => {
-      // job
-      method.call(vm.component, value);
-    }, noop);
-  };
+    return (value) => {
+        // dispatching new value into the wired method
+        runWithBoundaryProtection(vm, vm.owner, noop, () => {
+            // job
+            method.call(vm.component, value);
+        }, noop);
+    };
 }
 function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
-  // creating the reactive observer for reactive params when needed
-  const ro = createReactiveObserver();
-  const computeConfigAndUpdate = () => {
-    let config;
-    ro.observe(() => config = configCallback(component));
-    // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
-    // TODO: dev-mode validation of config based on the adapter.configSchema
-    // @ts-ignore it is assigned in the observe() callback
-    callbackWhenConfigIsReady(config);
-  };
-  return {
-    computeConfigAndUpdate,
-    ro
-  };
+    // creating the reactive observer for reactive params when needed
+    const ro = createReactiveObserver();
+    const computeConfigAndUpdate = () => {
+        let config;
+        ro.observe(() => (config = configCallback(component)));
+        // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
+        // TODO: dev-mode validation of config based on the adapter.configSchema
+        // @ts-ignore it is assigned in the observe() callback
+        callbackWhenConfigIsReady(config);
+    };
+    return {
+        computeConfigAndUpdate,
+        ro,
+    };
 }
 function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
-  const {
-    adapter
-  } = wireDef;
-  const adapterContextToken = getAdapterToken(adapter);
-  if (isUndefined$1(adapterContextToken)) {
-    return; // no provider found, nothing to be done
-  }
-
-  const {
-    elm,
-    context: {
-      wiredConnecting,
-      wiredDisconnecting
-    },
-    renderer: {
-      dispatchEvent
-    }
-  } = vm;
-  // waiting for the component to be connected to formally request the context via the token
-  ArrayPush$1.call(wiredConnecting, () => {
-    // This event is responsible for connecting the host element with another
-    // element in the composed path that is providing contextual data. The provider
-    // must be listening for a special dom event with the name corresponding to the value of
-    // `adapterContextToken`, which will remain secret and internal to this file only to
-    // guarantee that the linkage can be forged.
-    const contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
-      setNewContext(newContext) {
-        // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
-        // TODO: dev-mode validation of config based on the adapter.contextSchema
-        callbackWhenContextIsReady(newContext);
-      },
-      setDisconnectedCallback(disconnectCallback) {
-        // adds this callback into the disconnect bucket so it gets disconnected from parent
-        // the the element hosting the wire is disconnected
-        ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
-      }
+    const { adapter } = wireDef;
+    const adapterContextToken = getAdapterToken(adapter);
+    if (isUndefined$1(adapterContextToken)) {
+        return; // no provider found, nothing to be done
+    }
+    const { elm, context: { wiredConnecting, wiredDisconnecting }, renderer: { dispatchEvent }, } = vm;
+    // waiting for the component to be connected to formally request the context via the token
+    ArrayPush$1.call(wiredConnecting, () => {
+        // This event is responsible for connecting the host element with another
+        // element in the composed path that is providing contextual data. The provider
+        // must be listening for a special dom event with the name corresponding to the value of
+        // `adapterContextToken`, which will remain secret and internal to this file only to
+        // guarantee that the linkage can be forged.
+        const contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
+            setNewContext(newContext) {
+                // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
+                // TODO: dev-mode validation of config based on the adapter.contextSchema
+                callbackWhenContextIsReady(newContext);
+            },
+            setDisconnectedCallback(disconnectCallback) {
+                // adds this callback into the disconnect bucket so it gets disconnected from parent
+                // the the element hosting the wire is disconnected
+                ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
+            },
+        });
+        dispatchEvent(elm, contextRegistrationEvent);
     });
-    dispatchEvent(elm, contextRegistrationEvent);
-  });
 }
 function createConnector(vm, name, wireDef) {
-  const {
-    method,
-    adapter,
-    configCallback,
-    dynamic
-  } = wireDef;
-  let debugInfo;
-  if (process.env.NODE_ENV !== 'production') {
-    const wiredPropOrMethod = isUndefined$1(method) ? name : method.name;
-    debugInfo = create(null);
-    debugInfo.wasDataProvisionedForConfig = false;
-    vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
-  }
-  const fieldOrMethodCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
-  const dataCallback = value => {
+    const { method, adapter, configCallback, dynamic } = wireDef;
+    let debugInfo;
     if (process.env.NODE_ENV !== 'production') {
-      debugInfo.data = value;
-      // Note: most of the time, the data provided is for the current config, but there may be
-      // some conditions in which it does not, ex:
-      // race conditions in a poor network while the adapter does not cancel a previous request.
-      debugInfo.wasDataProvisionedForConfig = true;
-    }
-    fieldOrMethodCallback(value);
-  };
-  let context;
-  let connector;
-  // Workaround to pass the component element associated to this wire adapter instance.
-  defineProperty(dataCallback, DeprecatedWiredElementHost, {
-    value: vm.elm
-  });
-  defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
-    value: dynamic
-  });
-  runWithBoundaryProtection(vm, vm, noop, () => {
-    // job
-    connector = new adapter(dataCallback);
-  }, noop);
-  const updateConnectorConfig = config => {
-    // every time the config is recomputed due to tracking,
-    // this callback will be invoked with the new computed config
-    runWithBoundaryProtection(vm, vm, noop, () => {
-      // job
-      if (process.env.NODE_ENV !== 'production') {
-        debugInfo.config = config;
-        debugInfo.context = context;
+        const wiredPropOrMethod = isUndefined$1(method) ? name : method.name;
+        debugInfo = create(null);
         debugInfo.wasDataProvisionedForConfig = false;
-      }
-      connector.update(config, context);
-    }, noop);
-  };
-  // Computes the current wire config and calls the update method on the wire adapter.
-  // If it has params, we will need to observe changes in the next tick.
-  const {
-    computeConfigAndUpdate,
-    ro
-  } = createConfigWatcher(vm.component, configCallback, updateConnectorConfig);
-  // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
-  if (!isUndefined$1(adapter.contextSchema)) {
-    createContextWatcher(vm, wireDef, newContext => {
-      // every time the context is pushed into this component,
-      // this callback will be invoked with the new computed context
-      if (context !== newContext) {
-        context = newContext;
-        // Note: when new context arrives, the config will be recomputed and pushed along side the new
-        // context, this is to preserve the identity characteristics, config should not have identity
-        // (ever), while context can have identity
-        if (vm.state === 1 /* VMState.connected */) {
-          computeConfigAndUpdate();
-        }
-      }
+        vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
+    }
+    const fieldOrMethodCallback = isUndefined$1(method)
+        ? createFieldDataCallback(vm, name)
+        : createMethodDataCallback(vm, method);
+    const dataCallback = (value) => {
+        if (process.env.NODE_ENV !== 'production') {
+            debugInfo.data = value;
+            // Note: most of the time, the data provided is for the current config, but there may be
+            // some conditions in which it does not, ex:
+            // race conditions in a poor network while the adapter does not cancel a previous request.
+            debugInfo.wasDataProvisionedForConfig = true;
+        }
+        fieldOrMethodCallback(value);
+    };
+    let context;
+    let connector;
+    // Workaround to pass the component element associated to this wire adapter instance.
+    defineProperty(dataCallback, DeprecatedWiredElementHost, {
+        value: vm.elm,
+    });
+    defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
+        value: dynamic,
     });
-  }
-  return {
-    // @ts-ignore the boundary protection executes sync, connector is always defined
-    connector,
-    computeConfigAndUpdate,
-    resetConfigWatcher: () => ro.reset()
-  };
+    runWithBoundaryProtection(vm, vm, noop, () => {
+        // job
+        connector = new adapter(dataCallback);
+    }, noop);
+    const updateConnectorConfig = (config) => {
+        // every time the config is recomputed due to tracking,
+        // this callback will be invoked with the new computed config
+        runWithBoundaryProtection(vm, vm, noop, () => {
+            // job
+            if (process.env.NODE_ENV !== 'production') {
+                debugInfo.config = config;
+                debugInfo.context = context;
+                debugInfo.wasDataProvisionedForConfig = false;
+            }
+            connector.update(config, context);
+        }, noop);
+    };
+    // Computes the current wire config and calls the update method on the wire adapter.
+    // If it has params, we will need to observe changes in the next tick.
+    const { computeConfigAndUpdate, ro } = createConfigWatcher(vm.component, configCallback, updateConnectorConfig);
+    // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
+    if (!isUndefined$1(adapter.contextSchema)) {
+        createContextWatcher(vm, wireDef, (newContext) => {
+            // every time the context is pushed into this component,
+            // this callback will be invoked with the new computed context
+            if (context !== newContext) {
+                context = newContext;
+                // Note: when new context arrives, the config will be recomputed and pushed along side the new
+                // context, this is to preserve the identity characteristics, config should not have identity
+                // (ever), while context can have identity
+                if (vm.state === 1 /* VMState.connected */) {
+                    computeConfigAndUpdate();
+                }
+            }
+        });
+    }
+    return {
+        // @ts-ignore the boundary protection executes sync, connector is always defined
+        connector,
+        computeConfigAndUpdate,
+        resetConfigWatcher: () => ro.reset(),
+    };
 }
 const AdapterToTokenMap = new Map();
 function getAdapterToken(adapter) {
-  return AdapterToTokenMap.get(adapter);
+    return AdapterToTokenMap.get(adapter);
 }
 function setAdapterToken(adapter, token) {
-  AdapterToTokenMap.set(adapter, token);
+    AdapterToTokenMap.set(adapter, token);
 }
 function storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic) {
-  // support for callable adapters
-  if (adapter.adapter) {
-    adapter = adapter.adapter;
-  }
-  const method = descriptor.value;
-  const def = {
-    adapter,
-    method,
-    configCallback,
-    dynamic
-  };
-  WireMetaMap.set(descriptor, def);
+    // support for callable adapters
+    if (adapter.adapter) {
+        adapter = adapter.adapter;
+    }
+    const method = descriptor.value;
+    const def = {
+        adapter,
+        method,
+        configCallback,
+        dynamic,
+    };
+    WireMetaMap.set(descriptor, def);
 }
 function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
-  // support for callable adapters
-  if (adapter.adapter) {
-    adapter = adapter.adapter;
-  }
-  const def = {
-    adapter,
-    configCallback,
-    dynamic
-  };
-  WireMetaMap.set(descriptor, def);
+    // support for callable adapters
+    if (adapter.adapter) {
+        adapter = adapter.adapter;
+    }
+    const def = {
+        adapter,
+        configCallback,
+        dynamic,
+    };
+    WireMetaMap.set(descriptor, def);
 }
 function installWireAdapters(vm) {
-  const {
-    context,
-    def: {
-      wire
-    }
-  } = vm;
-  if (process.env.NODE_ENV !== 'production') {
-    vm.debugInfo[WIRE_DEBUG_ENTRY] = create(null);
-  }
-  const wiredConnecting = context.wiredConnecting = [];
-  const wiredDisconnecting = context.wiredDisconnecting = [];
-  for (const fieldNameOrMethod in wire) {
-    const descriptor = wire[fieldNameOrMethod];
-    const wireDef = WireMetaMap.get(descriptor);
+    const { context, def: { wire }, } = vm;
     if (process.env.NODE_ENV !== 'production') {
-      assert.invariant(wireDef, `Internal Error: invalid wire definition found.`);
+        vm.debugInfo[WIRE_DEBUG_ENTRY] = create(null);
     }
-    if (!isUndefined$1(wireDef)) {
-      const {
-        connector,
-        computeConfigAndUpdate,
-        resetConfigWatcher
-      } = createConnector(vm, fieldNameOrMethod, wireDef);
-      const hasDynamicParams = wireDef.dynamic.length > 0;
-      ArrayPush$1.call(wiredConnecting, () => {
-        connector.connect();
-        if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
-          if (hasDynamicParams) {
-            Promise.resolve().then(computeConfigAndUpdate);
-            return;
-          }
+    const wiredConnecting = (context.wiredConnecting = []);
+    const wiredDisconnecting = (context.wiredDisconnecting = []);
+    for (const fieldNameOrMethod in wire) {
+        const descriptor = wire[fieldNameOrMethod];
+        const wireDef = WireMetaMap.get(descriptor);
+        if (process.env.NODE_ENV !== 'production') {
+            assert.invariant(wireDef, `Internal Error: invalid wire definition found.`);
+        }
+        if (!isUndefined$1(wireDef)) {
+            const { connector, computeConfigAndUpdate, resetConfigWatcher } = createConnector(vm, fieldNameOrMethod, wireDef);
+            const hasDynamicParams = wireDef.dynamic.length > 0;
+            ArrayPush$1.call(wiredConnecting, () => {
+                connector.connect();
+                if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+                    if (hasDynamicParams) {
+                        Promise.resolve().then(computeConfigAndUpdate);
+                        return;
+                    }
+                }
+                computeConfigAndUpdate();
+            });
+            ArrayPush$1.call(wiredDisconnecting, () => {
+                connector.disconnect();
+                resetConfigWatcher();
+            });
         }
-        computeConfigAndUpdate();
-      });
-      ArrayPush$1.call(wiredDisconnecting, () => {
-        connector.disconnect();
-        resetConfigWatcher();
-      });
     }
-  }
 }
 function connectWireAdapters(vm) {
-  const {
-    wiredConnecting
-  } = vm.context;
-  for (let i = 0, len = wiredConnecting.length; i < len; i += 1) {
-    wiredConnecting[i]();
-  }
+    const { wiredConnecting } = vm.context;
+    for (let i = 0, len = wiredConnecting.length; i < len; i += 1) {
+        wiredConnecting[i]();
+    }
 }
 function disconnectWireAdapters(vm) {
-  const {
-    wiredDisconnecting
-  } = vm.context;
-  runWithBoundaryProtection(vm, vm, noop, () => {
-    // job
-    for (let i = 0, len = wiredDisconnecting.length; i < len; i += 1) {
-      wiredDisconnecting[i]();
-    }
-  }, noop);
+    const { wiredDisconnecting } = vm.context;
+    runWithBoundaryProtection(vm, vm, noop, () => {
+        // job
+        for (let i = 0, len = wiredDisconnecting.length; i < len; i += 1) {
+            wiredDisconnecting[i]();
+        }
+    }, noop);
 }
 
 /*
@@ -3094,145 +2944,136 @@ function sanitizeAttribute(tagName, namespaceUri, attrName, attrValue) {
 const cachedGetterByKey = create(null);
 const cachedSetterByKey = create(null);
 function createGetter(key) {
-  let fn = cachedGetterByKey[key];
-  if (isUndefined$1(fn)) {
-    fn = cachedGetterByKey[key] = function () {
-      const vm = getAssociatedVM(this);
-      const {
-        getHook
-      } = vm;
-      return getHook(vm.component, key);
-    };
-  }
-  return fn;
+    let fn = cachedGetterByKey[key];
+    if (isUndefined$1(fn)) {
+        fn = cachedGetterByKey[key] = function () {
+            const vm = getAssociatedVM(this);
+            const { getHook } = vm;
+            return getHook(vm.component, key);
+        };
+    }
+    return fn;
 }
 function createSetter(key) {
-  let fn = cachedSetterByKey[key];
-  if (isUndefined$1(fn)) {
-    fn = cachedSetterByKey[key] = function (newValue) {
-      const vm = getAssociatedVM(this);
-      const {
-        setHook
-      } = vm;
-      newValue = getReadOnlyProxy(newValue);
-      setHook(vm.component, key, newValue);
-    };
-  }
-  return fn;
+    let fn = cachedSetterByKey[key];
+    if (isUndefined$1(fn)) {
+        fn = cachedSetterByKey[key] = function (newValue) {
+            const vm = getAssociatedVM(this);
+            const { setHook } = vm;
+            newValue = getReadOnlyProxy(newValue);
+            setHook(vm.component, key, newValue);
+        };
+    }
+    return fn;
 }
 function createMethodCaller(methodName) {
-  return function () {
-    const vm = getAssociatedVM(this);
-    const {
-      callHook,
-      component
-    } = vm;
-    const fn = component[methodName];
-    return callHook(vm.component, fn, ArraySlice.call(arguments));
-  };
+    return function () {
+        const vm = getAssociatedVM(this);
+        const { callHook, component } = vm;
+        const fn = component[methodName];
+        return callHook(vm.component, fn, ArraySlice.call(arguments));
+    };
 }
 function createAttributeChangedCallback(attributeToPropMap, superAttributeChangedCallback) {
-  return function attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue === newValue) {
-      // Ignore same values.
-      return;
-    }
-    const propName = attributeToPropMap[attrName];
-    if (isUndefined$1(propName)) {
-      if (!isUndefined$1(superAttributeChangedCallback)) {
-        // delegate unknown attributes to the super.
-        // Typescript does not like it when you treat the `arguments` object as an array
-        // @ts-ignore type-mismatch
-        superAttributeChangedCallback.apply(this, arguments);
-      }
-      return;
-    }
-    if (!isAttributeLocked(this, attrName)) {
-      // Ignore changes triggered by the engine itself during:
-      // * diffing when public props are attempting to reflect to the DOM
-      // * component via `this.setAttribute()`, should never update the prop
-      // Both cases, the setAttribute call is always wrapped by the unlocking of the
-      // attribute to be changed
-      return;
-    }
-    // Reflect attribute change to the corresponding property when changed from outside.
-    this[propName] = newValue;
-  };
+    return function attributeChangedCallback(attrName, oldValue, newValue) {
+        if (oldValue === newValue) {
+            // Ignore same values.
+            return;
+        }
+        const propName = attributeToPropMap[attrName];
+        if (isUndefined$1(propName)) {
+            if (!isUndefined$1(superAttributeChangedCallback)) {
+                // delegate unknown attributes to the super.
+                // Typescript does not like it when you treat the `arguments` object as an array
+                // @ts-ignore type-mismatch
+                superAttributeChangedCallback.apply(this, arguments);
+            }
+            return;
+        }
+        if (!isAttributeLocked(this, attrName)) {
+            // Ignore changes triggered by the engine itself during:
+            // * diffing when public props are attempting to reflect to the DOM
+            // * component via `this.setAttribute()`, should never update the prop
+            // Both cases, the setAttribute call is always wrapped by the unlocking of the
+            // attribute to be changed
+            return;
+        }
+        // Reflect attribute change to the corresponding property when changed from outside.
+        this[propName] = newValue;
+    };
 }
 function HTMLBridgeElementFactory(SuperClass, props, methods) {
-  let HTMLBridgeElement;
-  /**
-   * Modern browsers will have all Native Constructors as regular Classes
-   * and must be instantiated with the new keyword. In older browsers,
-   * specifically IE11, those are objects with a prototype property defined,
-   * since they are not supposed to be extended or instantiated with the
-   * new keyword. This forking logic supports both cases, specifically because
-   * wc.ts relies on the construction path of the bridges to create new
-   * fully qualifying web components.
-   */
-  if (isFunction$1(SuperClass)) {
-    HTMLBridgeElement = class extends SuperClass {};
-  } else {
-    HTMLBridgeElement = function () {
-      // Bridge classes are not supposed to be instantiated directly in
-      // browsers that do not support web components.
-      throw new TypeError('Illegal constructor');
+    let HTMLBridgeElement;
+    /**
+     * Modern browsers will have all Native Constructors as regular Classes
+     * and must be instantiated with the new keyword. In older browsers,
+     * specifically IE11, those are objects with a prototype property defined,
+     * since they are not supposed to be extended or instantiated with the
+     * new keyword. This forking logic supports both cases, specifically because
+     * wc.ts relies on the construction path of the bridges to create new
+     * fully qualifying web components.
+     */
+    if (isFunction$1(SuperClass)) {
+        HTMLBridgeElement = class extends SuperClass {
+        };
+    }
+    else {
+        HTMLBridgeElement = function () {
+            // Bridge classes are not supposed to be instantiated directly in
+            // browsers that do not support web components.
+            throw new TypeError('Illegal constructor');
+        };
+        // prototype inheritance dance
+        setPrototypeOf(HTMLBridgeElement, SuperClass);
+        setPrototypeOf(HTMLBridgeElement.prototype, SuperClass.prototype);
+        defineProperty(HTMLBridgeElement.prototype, 'constructor', {
+            writable: true,
+            configurable: true,
+            value: HTMLBridgeElement,
+        });
+    }
+    // generating the hash table for attributes to avoid duplicate fields and facilitate validation
+    // and false positives in case of inheritance.
+    const attributeToPropMap = create(null);
+    const { attributeChangedCallback: superAttributeChangedCallback } = SuperClass.prototype;
+    const { observedAttributes: superObservedAttributes = [] } = SuperClass;
+    const descriptors = create(null);
+    // expose getters and setters for each public props on the new Element Bridge
+    for (let i = 0, len = props.length; i < len; i += 1) {
+        const propName = props[i];
+        attributeToPropMap[htmlPropertyToAttribute(propName)] = propName;
+        descriptors[propName] = {
+            get: createGetter(propName),
+            set: createSetter(propName),
+            enumerable: true,
+            configurable: true,
+        };
+    }
+    // expose public methods as props on the new Element Bridge
+    for (let i = 0, len = methods.length; i < len; i += 1) {
+        const methodName = methods[i];
+        descriptors[methodName] = {
+            value: createMethodCaller(methodName),
+            writable: true,
+            configurable: true,
+        };
+    }
+    // creating a new attributeChangedCallback per bridge because they are bound to the corresponding
+    // map of attributes to props. We do this after all other props and methods to avoid the possibility
+    // of getting overrule by a class declaration in user-land, and we make it non-writable, non-configurable
+    // to preserve this definition.
+    descriptors.attributeChangedCallback = {
+        value: createAttributeChangedCallback(attributeToPropMap, superAttributeChangedCallback),
     };
-    // prototype inheritance dance
-    setPrototypeOf(HTMLBridgeElement, SuperClass);
-    setPrototypeOf(HTMLBridgeElement.prototype, SuperClass.prototype);
-    defineProperty(HTMLBridgeElement.prototype, 'constructor', {
-      writable: true,
-      configurable: true,
-      value: HTMLBridgeElement
+    // Specify attributes for which we want to reflect changes back to their corresponding
+    // properties via attributeChangedCallback.
+    defineProperty(HTMLBridgeElement, 'observedAttributes', {
+        get() {
+            return [...superObservedAttributes, ...keys(attributeToPropMap)];
+        },
     });
-  }
-  // generating the hash table for attributes to avoid duplicate fields and facilitate validation
-  // and false positives in case of inheritance.
-  const attributeToPropMap = create(null);
-  const {
-    attributeChangedCallback: superAttributeChangedCallback
-  } = SuperClass.prototype;
-  const {
-    observedAttributes: superObservedAttributes = []
-  } = SuperClass;
-  const descriptors = create(null);
-  // expose getters and setters for each public props on the new Element Bridge
-  for (let i = 0, len = props.length; i < len; i += 1) {
-    const propName = props[i];
-    attributeToPropMap[htmlPropertyToAttribute(propName)] = propName;
-    descriptors[propName] = {
-      get: createGetter(propName),
-      set: createSetter(propName),
-      enumerable: true,
-      configurable: true
-    };
-  }
-  // expose public methods as props on the new Element Bridge
-  for (let i = 0, len = methods.length; i < len; i += 1) {
-    const methodName = methods[i];
-    descriptors[methodName] = {
-      value: createMethodCaller(methodName),
-      writable: true,
-      configurable: true
-    };
-  }
-  // creating a new attributeChangedCallback per bridge because they are bound to the corresponding
-  // map of attributes to props. We do this after all other props and methods to avoid the possibility
-  // of getting overrule by a class declaration in user-land, and we make it non-writable, non-configurable
-  // to preserve this definition.
-  descriptors.attributeChangedCallback = {
-    value: createAttributeChangedCallback(attributeToPropMap, superAttributeChangedCallback)
-  };
-  // Specify attributes for which we want to reflect changes back to their corresponding
-  // properties via attributeChangedCallback.
-  defineProperty(HTMLBridgeElement, 'observedAttributes', {
-    get() {
-      return [...superObservedAttributes, ...keys(attributeToPropMap)];
-    }
-  });
-  defineProperties(HTMLBridgeElement.prototype, descriptors);
-  return HTMLBridgeElement;
+    defineProperties(HTMLBridgeElement.prototype, descriptors);
+    return HTMLBridgeElement;
 }
 const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
 freeze(BaseBridgeElement);
@@ -3552,157 +3393,137 @@ function getComponentDef(Ctor) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function makeHostToken(token) {
-  return `${token}-host`;
+    return `${token}-host`;
 }
 function createInlineStyleVNode(content) {
-  return api.h('style', {
-    key: 'style',
-    attrs: {
-      type: 'text/css'
-    }
-  }, [api.t(content)]);
+    return api.h('style', {
+        key: 'style',
+        attrs: {
+            type: 'text/css',
+        },
+    }, [api.t(content)]);
 }
 function updateStylesheetToken(vm, template) {
-  const {
-    elm,
-    context,
-    renderMode,
-    shadowMode,
-    renderer: {
-      getClassList,
-      removeAttribute,
-      setAttribute
-    }
-  } = vm;
-  const {
-    stylesheets: newStylesheets,
-    stylesheetToken: newStylesheetToken
-  } = template;
-  const {
-    stylesheets: newVmStylesheets
-  } = vm;
-  const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
-  const {
-    hasScopedStyles
-  } = context;
-  let newToken;
-  let newHasTokenInClass;
-  let newHasTokenInAttribute;
-  // Reset the styling token applied to the host element.
-  const {
-    stylesheetToken: oldToken,
-    hasTokenInClass: oldHasTokenInClass,
-    hasTokenInAttribute: oldHasTokenInAttribute
-  } = context;
-  if (!isUndefined$1(oldToken)) {
-    if (oldHasTokenInClass) {
-      getClassList(elm).remove(makeHostToken(oldToken));
-    }
-    if (oldHasTokenInAttribute) {
-      removeAttribute(elm, makeHostToken(oldToken));
-    }
-  }
-  // Apply the new template styling token to the host element, if the new template has any
-  // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-  const hasNewStylesheets = hasStyles(newStylesheets);
-  const hasNewVmStylesheets = hasStyles(newVmStylesheets);
-  if (hasNewStylesheets || hasNewVmStylesheets) {
-    newToken = newStylesheetToken;
-  }
-  // Set the new styling token on the host element
-  if (!isUndefined$1(newToken)) {
-    if (hasScopedStyles) {
-      getClassList(elm).add(makeHostToken(newToken));
-      newHasTokenInClass = true;
-    }
-    if (isSyntheticShadow) {
-      setAttribute(elm, makeHostToken(newToken), '');
-      newHasTokenInAttribute = true;
-    }
-  }
-  // Update the styling tokens present on the context object.
-  context.stylesheetToken = newToken;
-  context.hasTokenInClass = newHasTokenInClass;
-  context.hasTokenInAttribute = newHasTokenInAttribute;
+    const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
+    const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
+    const { stylesheets: newVmStylesheets } = vm;
+    const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
+    const { hasScopedStyles } = context;
+    let newToken;
+    let newHasTokenInClass;
+    let newHasTokenInAttribute;
+    // Reset the styling token applied to the host element.
+    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
+    if (!isUndefined$1(oldToken)) {
+        if (oldHasTokenInClass) {
+            getClassList(elm).remove(makeHostToken(oldToken));
+        }
+        if (oldHasTokenInAttribute) {
+            removeAttribute(elm, makeHostToken(oldToken));
+        }
+    }
+    // Apply the new template styling token to the host element, if the new template has any
+    // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
+    const hasNewStylesheets = hasStyles(newStylesheets);
+    const hasNewVmStylesheets = hasStyles(newVmStylesheets);
+    if (hasNewStylesheets || hasNewVmStylesheets) {
+        newToken = newStylesheetToken;
+    }
+    // Set the new styling token on the host element
+    if (!isUndefined$1(newToken)) {
+        if (hasScopedStyles) {
+            getClassList(elm).add(makeHostToken(newToken));
+            newHasTokenInClass = true;
+        }
+        if (isSyntheticShadow) {
+            setAttribute(elm, makeHostToken(newToken), '');
+            newHasTokenInAttribute = true;
+        }
+    }
+    // Update the styling tokens present on the context object.
+    context.stylesheetToken = newToken;
+    context.hasTokenInClass = newHasTokenInClass;
+    context.hasTokenInAttribute = newHasTokenInAttribute;
 }
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
-  const content = [];
-  let root;
-  for (let i = 0; i < stylesheets.length; i++) {
-    let stylesheet = stylesheets[i];
-    if (isArray$1(stylesheet)) {
-      ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
-    } else {
-      if (process.env.NODE_ENV !== 'production') {
-        // Check for compiler version mismatch in dev mode only
-        checkVersionMismatch(stylesheet, 'stylesheet');
-        // in dev-mode, we support hot swapping of stylesheet, which means that
-        // the component instance might be attempting to use an old version of
-        // the stylesheet, while internally, we have a replacement for it.
-        stylesheet = getStyleOrSwappedStyle(stylesheet);
-      }
-      const isScopedCss = stylesheet[KEY__SCOPED_CSS];
-      if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS) {
-        if (!isScopedCss && vm.renderMode === 0 /* RenderMode.Light */) {
-          logError('Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).');
-          continue;
-        }
-      }
-      // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-      const scopeToken = isScopedCss || vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */ ? stylesheetToken : undefined;
-      // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
-      // native shadow DOM. Synthetic shadow DOM never uses `:host`.
-      const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */ ? !isScopedCss : vm.shadowMode === 0 /* ShadowMode.Native */;
-      // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
-      // we use an attribute selector on the host to simulate :dir().
-      let useNativeDirPseudoclass;
-      if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-        useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
-      } else {
-        // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
-        // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-        if (isUndefined$1(root)) {
-          // Only calculate the root once as necessary
-          root = getNearestShadowComponent(vm);
-        }
-        useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-      }
-
-      ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+    const content = [];
+    let root;
+    for (let i = 0; i < stylesheets.length; i++) {
+        let stylesheet = stylesheets[i];
+        if (isArray$1(stylesheet)) {
+            ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+        }
+        else {
+            if (process.env.NODE_ENV !== 'production') {
+                // Check for compiler version mismatch in dev mode only
+                checkVersionMismatch(stylesheet, 'stylesheet');
+                // in dev-mode, we support hot swapping of stylesheet, which means that
+                // the component instance might be attempting to use an old version of
+                // the stylesheet, while internally, we have a replacement for it.
+                stylesheet = getStyleOrSwappedStyle(stylesheet);
+            }
+            const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+            if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS &&
+                !isScopedCss &&
+                vm.renderMode === 0 /* RenderMode.Light */) {
+                logError('Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).');
+                continue;
+            }
+            // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+            const scopeToken = isScopedCss ||
+                (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
+                ? stylesheetToken
+                : undefined;
+            // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+            // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+            const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
+                ? !isScopedCss
+                : vm.shadowMode === 0 /* ShadowMode.Native */;
+            // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+            // we use an attribute selector on the host to simulate :dir().
+            let useNativeDirPseudoclass;
+            if (vm.renderMode === 1 /* RenderMode.Shadow */) {
+                useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
+            }
+            else {
+                // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+                // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+                if (isUndefined$1(root)) {
+                    // Only calculate the root once as necessary
+                    root = getNearestShadowComponent(vm);
+                }
+                useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
+            }
+            ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+        }
     }
-  }
-  return content;
+    return content;
 }
 function getStylesheetsContent(vm, template) {
-  const {
-    stylesheets,
-    stylesheetToken
-  } = template;
-  const {
-    stylesheets: vmStylesheets
-  } = vm;
-  let content = [];
-  if (hasStyles(stylesheets)) {
-    content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-  }
-  // VM (component) stylesheets apply after template stylesheets
-  if (hasStyles(vmStylesheets)) {
-    ArrayPush$1.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
-  }
-  return content;
+    const { stylesheets, stylesheetToken } = template;
+    const { stylesheets: vmStylesheets } = vm;
+    let content = [];
+    if (hasStyles(stylesheets)) {
+        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+    }
+    // VM (component) stylesheets apply after template stylesheets
+    if (hasStyles(vmStylesheets)) {
+        ArrayPush$1.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+    }
+    return content;
 }
 // It might be worth caching this to avoid doing the lookup repeatedly, but
 // perf testing has not shown it to be a huge improvement yet:
 // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 function getNearestShadowComponent(vm) {
-  let owner = vm;
-  while (!isNull(owner)) {
-    if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-      return owner;
+    let owner = vm;
+    while (!isNull(owner)) {
+        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
+            return owner;
+        }
+        owner = owner.owner;
     }
-    owner = owner.owner;
-  }
-  return owner;
+    return owner;
 }
 /**
  * If the component that is currently being rendered uses scoped styles,
@@ -3710,32 +3531,24 @@ function getNearestShadowComponent(vm) {
  * it returns null.
  */
 function getScopeTokenClass(owner) {
-  const {
-    cmpTemplate,
-    context
-  } = owner;
-  return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
+    const { cmpTemplate, context } = owner;
+    return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
 }
 function createStylesheet(vm, stylesheets) {
-  const {
-    renderMode,
-    shadowMode,
-    renderer: {
-      insertStylesheet
-    }
-  } = vm;
-  if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-    for (let i = 0; i < stylesheets.length; i++) {
-      insertStylesheet(stylesheets[i]);
+    const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
+    if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
+        for (let i = 0; i < stylesheets.length; i++) {
+            insertStylesheet(stylesheets[i]);
+        }
+    }
+    else {
+        // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
+        //       This works in the client, because the stylesheets are created, and cached in the VM
+        //       the first time the VM renders.
+        // native shadow or light DOM, SSR
+        return ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
-  } else {
-    // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
-    //       This works in the client, because the stylesheets are created, and cached in the VM
-    //       the first time the VM renders.
-    // native shadow or light DOM, SSR
-    return ArrayMap.call(stylesheets, createInlineStyleVNode);
-  }
-  return null;
+    return null;
 }
 
 /*
@@ -4043,496 +3856,433 @@ function applyStaticStyleAttribute(vnode, renderer) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function patchChildren(c1, c2, parent, renderer) {
-  if (hasDynamicChildren(c2)) {
-    updateDynamicChildren(c1, c2, parent, renderer);
-  } else {
-    updateStaticChildren(c1, c2, parent, renderer);
-  }
+    if (hasDynamicChildren(c2)) {
+        updateDynamicChildren(c1, c2, parent, renderer);
+    }
+    else {
+        updateStaticChildren(c1, c2, parent, renderer);
+    }
 }
 function patch(n1, n2, parent, renderer) {
-  var _a, _b;
-  if (n1 === n2) {
-    return;
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    if (!isSameVnode(n1, n2)) {
-      throw new Error('Expected these VNodes to be the same: ' + JSON.stringify({
-        sel: n1.sel,
-        key: n1.key
-      }) + ', ' + JSON.stringify({
-        sel: n2.sel,
-        key: n2.key
-      }));
-    }
-  }
-  switch (n2.type) {
-    case 0 /* VNodeType.Text */:
-      // VText has no special capability, fallback to the owner's renderer
-      patchText(n1, n2, renderer);
-      break;
-    case 1 /* VNodeType.Comment */:
-      // VComment has no special capability, fallback to the owner's renderer
-      patchComment(n1, n2, renderer);
-      break;
-    case 4 /* VNodeType.Static */:
-      n2.elm = n1.elm;
-      break;
-    case 5 /* VNodeType.Fragment */:
-      patchFragment(n1, n2, parent, renderer);
-      break;
-    case 2 /* VNodeType.Element */:
-      patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-      break;
-    case 3 /* VNodeType.CustomElement */:
-      patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-      break;
-  }
+    var _a, _b;
+    if (n1 === n2) {
+        return;
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        if (!isSameVnode(n1, n2)) {
+            throw new Error('Expected these VNodes to be the same: ' +
+                JSON.stringify({ sel: n1.sel, key: n1.key }) +
+                ', ' +
+                JSON.stringify({ sel: n2.sel, key: n2.key }));
+        }
+    }
+    switch (n2.type) {
+        case 0 /* VNodeType.Text */:
+            // VText has no special capability, fallback to the owner's renderer
+            patchText(n1, n2, renderer);
+            break;
+        case 1 /* VNodeType.Comment */:
+            // VComment has no special capability, fallback to the owner's renderer
+            patchComment(n1, n2, renderer);
+            break;
+        case 4 /* VNodeType.Static */:
+            n2.elm = n1.elm;
+            break;
+        case 5 /* VNodeType.Fragment */:
+            patchFragment(n1, n2, parent, renderer);
+            break;
+        case 2 /* VNodeType.Element */:
+            patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+            break;
+        case 3 /* VNodeType.CustomElement */:
+            patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+            break;
+    }
 }
 function mount(node, parent, renderer, anchor) {
-  var _a, _b;
-  switch (node.type) {
-    case 0 /* VNodeType.Text */:
-      // VText has no special capability, fallback to the owner's renderer
-      mountText(node, parent, anchor, renderer);
-      break;
-    case 1 /* VNodeType.Comment */:
-      // VComment has no special capability, fallback to the owner's renderer
-      mountComment(node, parent, anchor, renderer);
-      break;
-    case 4 /* VNodeType.Static */:
-      // VStatic cannot have a custom renderer associated to them, using owner's renderer
-      mountStatic(node, parent, anchor, renderer);
-      break;
-    case 5 /* VNodeType.Fragment */:
-      mountFragment(node, parent, anchor, renderer);
-      break;
-    case 2 /* VNodeType.Element */:
-      // If the vnode data has a renderer override use it, else fallback to owner's renderer
-      mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-      break;
-    case 3 /* VNodeType.CustomElement */:
-      // If the vnode data has a renderer override use it, else fallback to owner's renderer
-      mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-      break;
-  }
+    var _a, _b;
+    switch (node.type) {
+        case 0 /* VNodeType.Text */:
+            // VText has no special capability, fallback to the owner's renderer
+            mountText(node, parent, anchor, renderer);
+            break;
+        case 1 /* VNodeType.Comment */:
+            // VComment has no special capability, fallback to the owner's renderer
+            mountComment(node, parent, anchor, renderer);
+            break;
+        case 4 /* VNodeType.Static */:
+            // VStatic cannot have a custom renderer associated to them, using owner's renderer
+            mountStatic(node, parent, anchor, renderer);
+            break;
+        case 5 /* VNodeType.Fragment */:
+            mountFragment(node, parent, anchor, renderer);
+            break;
+        case 2 /* VNodeType.Element */:
+            // If the vnode data has a renderer override use it, else fallback to owner's renderer
+            mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+            break;
+        case 3 /* VNodeType.CustomElement */:
+            // If the vnode data has a renderer override use it, else fallback to owner's renderer
+            mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+            break;
+    }
 }
 function patchText(n1, n2, renderer) {
-  n2.elm = n1.elm;
-  if (n2.text !== n1.text) {
-    updateTextContent(n2, renderer);
-  }
+    n2.elm = n1.elm;
+    if (n2.text !== n1.text) {
+        updateTextContent(n2, renderer);
+    }
 }
 function mountText(vnode, parent, anchor, renderer) {
-  const {
-    owner
-  } = vnode;
-  const {
-    createText
-  } = renderer;
-  const textNode = vnode.elm = createText(vnode.text);
-  linkNodeToShadow(textNode, owner, renderer);
-  insertNode(textNode, parent, anchor, renderer);
+    const { owner } = vnode;
+    const { createText } = renderer;
+    const textNode = (vnode.elm = createText(vnode.text));
+    linkNodeToShadow(textNode, owner, renderer);
+    insertNode(textNode, parent, anchor, renderer);
 }
 function patchComment(n1, n2, renderer) {
-  n2.elm = n1.elm;
-  // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
-  // it is the case today.
-  if (n2.text !== n1.text) {
-    updateTextContent(n2, renderer);
-  }
+    n2.elm = n1.elm;
+    // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
+    // it is the case today.
+    if (n2.text !== n1.text) {
+        updateTextContent(n2, renderer);
+    }
 }
 function mountComment(vnode, parent, anchor, renderer) {
-  const {
-    owner
-  } = vnode;
-  const {
-    createComment
-  } = renderer;
-  const commentNode = vnode.elm = createComment(vnode.text);
-  linkNodeToShadow(commentNode, owner, renderer);
-  insertNode(commentNode, parent, anchor, renderer);
+    const { owner } = vnode;
+    const { createComment } = renderer;
+    const commentNode = (vnode.elm = createComment(vnode.text));
+    linkNodeToShadow(commentNode, owner, renderer);
+    insertNode(commentNode, parent, anchor, renderer);
 }
 function mountFragment(vnode, parent, anchor, renderer) {
-  const {
-    children
-  } = vnode;
-  mountVNodes(children, parent, renderer, anchor);
-  // children of a fragment will always have at least the two delimiters.
-  vnode.elm = children[children.length - 1].elm;
+    const { children } = vnode;
+    mountVNodes(children, parent, renderer, anchor);
+    // children of a fragment will always have at least the two delimiters.
+    vnode.elm = children[children.length - 1].elm;
 }
 function patchFragment(n1, n2, parent, renderer) {
-  const {
-    children,
-    stable
-  } = n2;
-  if (stable) {
-    updateStaticChildren(n1.children, children, parent, renderer);
-  } else {
-    updateDynamicChildren(n1.children, children, parent, renderer);
-  }
-  // Note: not reusing n1.elm, because during patching, it may be patched with another text node.
-  n2.elm = children[children.length - 1].elm;
+    const { children, stable } = n2;
+    if (stable) {
+        updateStaticChildren(n1.children, children, parent, renderer);
+    }
+    else {
+        updateDynamicChildren(n1.children, children, parent, renderer);
+    }
+    // Note: not reusing n1.elm, because during patching, it may be patched with another text node.
+    n2.elm = children[children.length - 1].elm;
 }
 function mountElement(vnode, parent, anchor, renderer) {
-  const {
-    sel,
-    owner,
-    data: {
-      svg
-    }
-  } = vnode;
-  const {
-    createElement
-  } = renderer;
-  const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-  const elm = vnode.elm = createElement(sel, namespace);
-  linkNodeToShadow(elm, owner, renderer);
-  applyStyleScoping(elm, owner, renderer);
-  applyDomManual(elm, vnode);
-  applyElementRestrictions(elm, vnode);
-  patchElementPropsAndAttrs$1(null, vnode, renderer);
-  insertNode(elm, parent, anchor, renderer);
-  mountVNodes(vnode.children, elm, renderer, null);
+    const { sel, owner, data: { svg }, } = vnode;
+    const { createElement } = renderer;
+    const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
+    const elm = (vnode.elm = createElement(sel, namespace));
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
+    applyDomManual(elm, vnode);
+    applyElementRestrictions(elm, vnode);
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
+    mountVNodes(vnode.children, elm, renderer, null);
 }
 function patchElement(n1, n2, renderer) {
-  const elm = n2.elm = n1.elm;
-  patchElementPropsAndAttrs$1(n1, n2, renderer);
-  patchChildren(n1.children, n2.children, elm, renderer);
+    const elm = (n2.elm = n1.elm);
+    patchElementPropsAndAttrs$1(n1, n2, renderer);
+    patchChildren(n1.children, n2.children, elm, renderer);
 }
 function mountStatic(vnode, parent, anchor, renderer) {
-  const {
-    owner
-  } = vnode;
-  const {
-    cloneNode,
-    isSyntheticShadowDefined
-  } = renderer;
-  const elm = vnode.elm = cloneNode(vnode.fragment, true);
-  linkNodeToShadow(elm, owner, renderer);
-  applyElementRestrictions(elm, vnode);
-  // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
-  const {
-    renderMode,
-    shadowMode
-  } = owner;
-  if (isSyntheticShadowDefined) {
-    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-      elm[KEY__SHADOW_STATIC] = true;
+    const { owner } = vnode;
+    const { cloneNode, isSyntheticShadowDefined } = renderer;
+    const elm = (vnode.elm = cloneNode(vnode.fragment, true));
+    linkNodeToShadow(elm, owner, renderer);
+    applyElementRestrictions(elm, vnode);
+    // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+    const { renderMode, shadowMode } = owner;
+    if (isSyntheticShadowDefined) {
+        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
+            elm[KEY__SHADOW_STATIC] = true;
+        }
     }
-  }
-  insertNode(elm, parent, anchor, renderer);
+    insertNode(elm, parent, anchor, renderer);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
-  const {
-    sel,
-    owner
-  } = vnode;
-  const {
-    createCustomElement
-  } = renderer;
-  /**
-   * Note: if the upgradable constructor does not expect, or throw when we new it
-   * with a callback as the first argument, we could implement a more advanced
-   * mechanism that only passes that argument if the constructor is known to be
-   * an upgradable custom element.
-   */
-  let vm;
-  const upgradeCallback = elm => {
-    // the custom element from the registry is expecting an upgrade callback
-    vm = createViewModelHook(elm, vnode, renderer);
-  };
-  let connectedCallback;
-  let disconnectedCallback;
-  if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
-    connectedCallback = elm => {
-      connectRootElement(elm);
-    };
-    disconnectedCallback = elm => {
-      disconnectRootElement(elm);
+    const { sel, owner } = vnode;
+    const { createCustomElement } = renderer;
+    /**
+     * Note: if the upgradable constructor does not expect, or throw when we new it
+     * with a callback as the first argument, we could implement a more advanced
+     * mechanism that only passes that argument if the constructor is known to be
+     * an upgradable custom element.
+     */
+    let vm;
+    const upgradeCallback = (elm) => {
+        // the custom element from the registry is expecting an upgrade callback
+        vm = createViewModelHook(elm, vnode, renderer);
     };
-  }
-  // Should never get a tag with upper case letter at this point; the compiler
-  // should produce only tags with lowercase letters. However, the Java
-  // compiler may generate tagnames with uppercase letters so - for backwards
-  // compatibility, we lower case the tagname here.
-  const normalizedTagname = sel.toLowerCase();
-  const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
-  vnode.elm = elm;
-  vnode.vm = vm;
-  linkNodeToShadow(elm, owner, renderer);
-  applyStyleScoping(elm, owner, renderer);
-  if (vm) {
-    allocateChildren(vnode, vm);
-  }
-  patchElementPropsAndAttrs$1(null, vnode, renderer);
-  insertNode(elm, parent, anchor, renderer);
-  if (vm) {
-    {
-      // On the server, we don't have native custom element lifecycle callbacks, so we must
-      // manually invoke the connectedCallback for a child component.
-      runConnectedCallback(vm);
+    let connectedCallback;
+    let disconnectedCallback;
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        connectedCallback = (elm) => {
+            connectRootElement(elm);
+        };
+        disconnectedCallback = (elm) => {
+            disconnectRootElement(elm);
+        };
+    }
+    // Should never get a tag with upper case letter at this point; the compiler
+    // should produce only tags with lowercase letters. However, the Java
+    // compiler may generate tagnames with uppercase letters so - for backwards
+    // compatibility, we lower case the tagname here.
+    const normalizedTagname = sel.toLowerCase();
+    const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
+    vnode.elm = elm;
+    vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
+    if (vm) {
+        allocateChildren(vnode, vm);
+    }
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
+    if (vm) {
+        {
+            // On the server, we don't have native custom element lifecycle callbacks, so we must
+            // manually invoke the connectedCallback for a child component.
+            runConnectedCallback(vm);
+        }
+    }
+    mountVNodes(vnode.children, elm, renderer, null);
+    if (vm) {
+        appendVM(vm);
     }
-  }
-  mountVNodes(vnode.children, elm, renderer, null);
-  if (vm) {
-    appendVM(vm);
-  }
 }
 function patchCustomElement(n1, n2, parent, renderer) {
-  if (n1.ctor !== n2.ctor) {
-    // If the constructor, unmount the current component and mount a new one using the new
-    // constructor.
-    const anchor = renderer.nextSibling(n1.elm);
-    unmount(n1, parent, renderer, true);
-    mountCustomElement(n2, parent, anchor, renderer);
-  } else {
-    // Otherwise patch the existing component with new props/attrs/etc.
-    const elm = n2.elm = n1.elm;
-    const vm = n2.vm = n1.vm;
-    patchElementPropsAndAttrs$1(n1, n2, renderer);
-    if (!isUndefined$1(vm)) {
-      // in fallback mode, the allocation will always set children to
-      // empty and delegate the real allocation to the slot elements
-      allocateChildren(n2, vm);
-      // Solves an edge case with slotted VFragments in native shadow mode.
-      //
-      // During allocation, in native shadow, slotted VFragment nodes are flattened and their text delimiters are removed
-      // to avoid interfering with native slot behavior. When this happens, if any of the fragments
-      // were not stable, the children must go through the dynamic diffing algo.
-      //
-      // If the new children (n2.children) contain no VFragments, but the previous children (n1.children) were dynamic,
-      // the new nodes must be marked dynamic so that all nodes are properly updated. The only indicator that the new
-      // nodes need to be dynamic comes from the previous children, so we check that to determine whether we need to
-      // mark the new children dynamic.
-      //
-      // Example:
-      // n1.children: [div, VFragment('', div, null, ''), div] => [div, div, null, div]; // marked dynamic
-      // n2.children: [div, null, div] => [div, null, div] // marked ???
-      const {
-        shadowMode,
-        renderMode
-      } = vm;
-      if (shadowMode == 0 /* ShadowMode.Native */ && renderMode !== 0 /* RenderMode.Light */ && hasDynamicChildren(n1.children)) {
-        // No-op if children has already been marked dynamic by 'allocateChildren()'.
-        markAsDynamicChildren(n2.children);
-      }
-    }
-    // in fallback mode, the children will be always empty, so, nothing
-    // will happen, but in native, it does allocate the light dom
-    patchChildren(n1.children, n2.children, elm, renderer);
-    if (!isUndefined$1(vm)) {
-      // this will probably update the shadowRoot, but only if the vm is in a dirty state
-      // this is important to preserve the top to bottom synchronous rendering phase.
-      rerenderVM(vm);
+    if (n1.ctor !== n2.ctor) {
+        // If the constructor, unmount the current component and mount a new one using the new
+        // constructor.
+        const anchor = renderer.nextSibling(n1.elm);
+        unmount(n1, parent, renderer, true);
+        mountCustomElement(n2, parent, anchor, renderer);
+    }
+    else {
+        // Otherwise patch the existing component with new props/attrs/etc.
+        const elm = (n2.elm = n1.elm);
+        const vm = (n2.vm = n1.vm);
+        patchElementPropsAndAttrs$1(n1, n2, renderer);
+        if (!isUndefined$1(vm)) {
+            // in fallback mode, the allocation will always set children to
+            // empty and delegate the real allocation to the slot elements
+            allocateChildren(n2, vm);
+            // Solves an edge case with slotted VFragments in native shadow mode.
+            //
+            // During allocation, in native shadow, slotted VFragment nodes are flattened and their text delimiters are removed
+            // to avoid interfering with native slot behavior. When this happens, if any of the fragments
+            // were not stable, the children must go through the dynamic diffing algo.
+            //
+            // If the new children (n2.children) contain no VFragments, but the previous children (n1.children) were dynamic,
+            // the new nodes must be marked dynamic so that all nodes are properly updated. The only indicator that the new
+            // nodes need to be dynamic comes from the previous children, so we check that to determine whether we need to
+            // mark the new children dynamic.
+            //
+            // Example:
+            // n1.children: [div, VFragment('', div, null, ''), div] => [div, div, null, div]; // marked dynamic
+            // n2.children: [div, null, div] => [div, null, div] // marked ???
+            const { shadowMode, renderMode } = vm;
+            if (shadowMode == 0 /* ShadowMode.Native */ &&
+                renderMode !== 0 /* RenderMode.Light */ &&
+                hasDynamicChildren(n1.children)) {
+                // No-op if children has already been marked dynamic by 'allocateChildren()'.
+                markAsDynamicChildren(n2.children);
+            }
+        }
+        // in fallback mode, the children will be always empty, so, nothing
+        // will happen, but in native, it does allocate the light dom
+        patchChildren(n1.children, n2.children, elm, renderer);
+        if (!isUndefined$1(vm)) {
+            // this will probably update the shadowRoot, but only if the vm is in a dirty state
+            // this is important to preserve the top to bottom synchronous rendering phase.
+            rerenderVM(vm);
+        }
     }
-  }
 }
 function mountVNodes(vnodes, parent, renderer, anchor, start = 0, end = vnodes.length) {
-  for (; start < end; ++start) {
-    const vnode = vnodes[start];
-    if (isVNode(vnode)) {
-      mount(vnode, parent, renderer, anchor);
+    for (; start < end; ++start) {
+        const vnode = vnodes[start];
+        if (isVNode(vnode)) {
+            mount(vnode, parent, renderer, anchor);
+        }
     }
-  }
 }
 function unmount(vnode, parent, renderer, doRemove = false) {
-  const {
-    type,
-    elm,
-    sel
-  } = vnode;
-  // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
-  // subtree root, is the only element worth unmounting from the subtree.
-  if (doRemove) {
-    if (type === 5 /* VNodeType.Fragment */) {
-      unmountVNodes(vnode.children, parent, renderer, doRemove);
-    } else {
-      // The vnode might or might not have a data.renderer associated to it
-      // but the removal used here is from the owner instead.
-      removeNode(elm, parent, renderer);
-    }
-  }
-  switch (type) {
-    case 2 /* VNodeType.Element */:
-      {
-        // Slot content is removed to trigger slotchange event when removing slot.
-        // Only required for synthetic shadow.
-        const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
-        unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
-        break;
-      }
-    case 3 /* VNodeType.CustomElement */:
-      {
-        const {
-          vm
-        } = vnode;
-        // No need to unmount the children here, `removeVM` will take care of removing the
-        // children.
-        if (!isUndefined$1(vm)) {
-          removeVM(vm);
+    const { type, elm, sel } = vnode;
+    // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
+    // subtree root, is the only element worth unmounting from the subtree.
+    if (doRemove) {
+        if (type === 5 /* VNodeType.Fragment */) {
+            unmountVNodes(vnode.children, parent, renderer, doRemove);
         }
-      }
-  }
+        else {
+            // The vnode might or might not have a data.renderer associated to it
+            // but the removal used here is from the owner instead.
+            removeNode(elm, parent, renderer);
+        }
+    }
+    switch (type) {
+        case 2 /* VNodeType.Element */: {
+            // Slot content is removed to trigger slotchange event when removing slot.
+            // Only required for synthetic shadow.
+            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
+            unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
+            break;
+        }
+        case 3 /* VNodeType.CustomElement */: {
+            const { vm } = vnode;
+            // No need to unmount the children here, `removeVM` will take care of removing the
+            // children.
+            if (!isUndefined$1(vm)) {
+                removeVM(vm);
+            }
+        }
+    }
 }
 function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, end = vnodes.length) {
-  for (; start < end; ++start) {
-    const ch = vnodes[start];
-    if (isVNode(ch)) {
-      unmount(ch, parent, renderer, doRemove);
+    for (; start < end; ++start) {
+        const ch = vnodes[start];
+        if (isVNode(ch)) {
+            unmount(ch, parent, renderer, doRemove);
+        }
     }
-  }
 }
 function isVNode(vnode) {
-  return vnode != null;
+    return vnode != null;
 }
 function linkNodeToShadow(elm, owner, renderer) {
-  const {
-    renderRoot,
-    renderMode,
-    shadowMode
-  } = owner;
-  const {
-    isSyntheticShadowDefined
-  } = renderer;
-  // TODO [#1164]: this should eventually be done by the polyfill directly
-  if (isSyntheticShadowDefined) {
-    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-      elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
+    const { renderRoot, renderMode, shadowMode } = owner;
+    const { isSyntheticShadowDefined } = renderer;
+    // TODO [#1164]: this should eventually be done by the polyfill directly
+    if (isSyntheticShadowDefined) {
+        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
+            elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
+        }
     }
-  }
 }
 function updateTextContent(vnode, renderer) {
-  const {
-    elm,
-    text
-  } = vnode;
-  const {
-    setText
-  } = renderer;
-  if (process.env.NODE_ENV !== 'production') {
-    unlockDomMutation();
-  }
-  setText(elm, text);
-  if (process.env.NODE_ENV !== 'production') {
-    lockDomMutation();
-  }
+    const { elm, text } = vnode;
+    const { setText } = renderer;
+    if (process.env.NODE_ENV !== 'production') {
+        unlockDomMutation();
+    }
+    setText(elm, text);
+    if (process.env.NODE_ENV !== 'production') {
+        lockDomMutation();
+    }
 }
 function insertNode(node, parent, anchor, renderer) {
-  if (process.env.NODE_ENV !== 'production') {
-    unlockDomMutation();
-  }
-  renderer.insert(node, parent, anchor);
-  if (process.env.NODE_ENV !== 'production') {
-    lockDomMutation();
-  }
+    if (process.env.NODE_ENV !== 'production') {
+        unlockDomMutation();
+    }
+    renderer.insert(node, parent, anchor);
+    if (process.env.NODE_ENV !== 'production') {
+        lockDomMutation();
+    }
 }
 function removeNode(node, parent, renderer) {
-  if (process.env.NODE_ENV !== 'production') {
-    unlockDomMutation();
-  }
-  renderer.remove(node, parent);
-  if (process.env.NODE_ENV !== 'production') {
-    lockDomMutation();
-  }
+    if (process.env.NODE_ENV !== 'production') {
+        unlockDomMutation();
+    }
+    renderer.remove(node, parent);
+    if (process.env.NODE_ENV !== 'production') {
+        lockDomMutation();
+    }
 }
 function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
-  if (isNull(oldVnode)) {
-    applyEventListeners(vnode, renderer);
-    applyStaticClassAttribute(vnode, renderer);
-    applyStaticStyleAttribute(vnode, renderer);
-  }
-  // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
-  // value is set before type=radio.
-  patchClassAttribute(oldVnode, vnode, renderer);
-  patchStyleAttribute(oldVnode, vnode, renderer);
-  if (vnode.data.external) {
-    patchAttrUnlessProp(oldVnode, vnode, renderer);
-  } else {
-    patchAttributes(oldVnode, vnode, renderer);
-  }
-  patchProps(oldVnode, vnode, renderer);
+    if (isNull(oldVnode)) {
+        applyEventListeners(vnode, renderer);
+        applyStaticClassAttribute(vnode, renderer);
+        applyStaticStyleAttribute(vnode, renderer);
+    }
+    // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
+    // value is set before type=radio.
+    patchClassAttribute(oldVnode, vnode, renderer);
+    patchStyleAttribute(oldVnode, vnode, renderer);
+    if (vnode.data.external) {
+        patchAttrUnlessProp(oldVnode, vnode, renderer);
+    }
+    else {
+        patchAttributes(oldVnode, vnode, renderer);
+    }
+    patchProps(oldVnode, vnode, renderer);
 }
 function applyStyleScoping(elm, owner, renderer) {
-  // Set the class name for `*.scoped.css` style scoping.
-  const scopeToken = getScopeTokenClass(owner);
-  if (!isNull(scopeToken)) {
-    const {
-      getClassList
-    } = renderer;
-    // TODO [#2762]: this dot notation with add is probably problematic
-    // probably we should have a renderer api for just the add operation
-    getClassList(elm).add(scopeToken);
-  }
-  // Set property element for synthetic shadow DOM style scoping.
-  const {
-    stylesheetToken: syntheticToken
-  } = owner.context;
-  if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
-    elm.$shadowToken$ = syntheticToken;
-  }
+    // Set the class name for `*.scoped.css` style scoping.
+    const scopeToken = getScopeTokenClass(owner);
+    if (!isNull(scopeToken)) {
+        const { getClassList } = renderer;
+        // TODO [#2762]: this dot notation with add is probably problematic
+        // probably we should have a renderer api for just the add operation
+        getClassList(elm).add(scopeToken);
+    }
+    // Set property element for synthetic shadow DOM style scoping.
+    const { stylesheetToken: syntheticToken } = owner.context;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
+        elm.$shadowToken$ = syntheticToken;
+    }
 }
 function applyDomManual(elm, vnode) {
-  var _a;
-  const {
-    owner,
-    data: {
-      context
+    var _a;
+    const { owner, data: { context }, } = vnode;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
+        elm.$domManual$ = true;
     }
-  } = vnode;
-  if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
-    elm.$domManual$ = true;
-  }
 }
 function applyElementRestrictions(elm, vnode) {
-  var _a, _b;
-  if (process.env.NODE_ENV !== 'production') {
-    const isSynthetic = vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
-    const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
-    const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
-    patchElementWithRestrictions(elm, {
-      isPortal,
-      isLight,
-      isSynthetic
-    });
-  }
+    var _a, _b;
+    if (process.env.NODE_ENV !== 'production') {
+        const isSynthetic = vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
+        const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
+        const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
+        patchElementWithRestrictions(elm, {
+            isPortal,
+            isLight,
+            isSynthetic,
+        });
+    }
 }
 function allocateChildren(vnode, vm) {
-  // A component with slots will re-render because:
-  // 1- There is a change of the internal state.
-  // 2- There is a change on the external api (ex: slots)
-  //
-  // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
-  // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
-  // in a reused VCustomElement, there won't be any slotted children.
-  // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
-  //
-  // In case #2, we will always get a fresh VCustomElement.
-  const children = vnode.aChildren || vnode.children;
-  const {
-    renderMode,
-    shadowMode
-  } = vm;
-  if (process.env.NODE_ENV !== 'production') {
-    // If any of the children being allocated is a scoped slot fragment, make sure the receiving
-    // component is a light DOM component. This is mainly to validate light dom parent running
-    // in native shadow mode.
-    if (renderMode !== 0 /* RenderMode.Light */ && ArraySome.call(children, child => !isNull(child) && isVScopedSlotFragment(child))) {
-      logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
-    }
-  }
-  // If any of the children being allocated are VFragments, we remove the text delimiters and flatten all immediate
-  // children VFragments to avoid them interfering with default slot behavior.
-  const allocatedChildren = flattenFragmentsInChildren(children);
-  vnode.children = allocatedChildren;
-  vm.aChildren = allocatedChildren;
-  if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-    // slow path
-    allocateInSlot(vm, allocatedChildren, vnode.owner);
-    // save the allocated children in case this vnode is reused.
-    vnode.aChildren = allocatedChildren;
-    // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
-    vnode.children = EmptyArray;
-  }
+    // A component with slots will re-render because:
+    // 1- There is a change of the internal state.
+    // 2- There is a change on the external api (ex: slots)
+    //
+    // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
+    // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
+    // in a reused VCustomElement, there won't be any slotted children.
+    // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
+    //
+    // In case #2, we will always get a fresh VCustomElement.
+    const children = vnode.aChildren || vnode.children;
+    const { renderMode, shadowMode } = vm;
+    if (process.env.NODE_ENV !== 'production') {
+        // If any of the children being allocated is a scoped slot fragment, make sure the receiving
+        // component is a light DOM component. This is mainly to validate light dom parent running
+        // in native shadow mode.
+        if (renderMode !== 0 /* RenderMode.Light */ &&
+            ArraySome.call(children, (child) => !isNull(child) && isVScopedSlotFragment(child))) {
+            logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
+        }
+    }
+    // If any of the children being allocated are VFragments, we remove the text delimiters and flatten all immediate
+    // children VFragments to avoid them interfering with default slot behavior.
+    const allocatedChildren = flattenFragmentsInChildren(children);
+    vnode.children = allocatedChildren;
+    vm.aChildren = allocatedChildren;
+    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
+        // slow path
+        allocateInSlot(vm, allocatedChildren, vnode.owner);
+        // save the allocated children in case this vnode is reused.
+        vnode.aChildren = allocatedChildren;
+        // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
+        vnode.children = EmptyArray;
+    }
 }
 /**
  * Flattens the contents of all VFragments in an array of VNodes, removes the text delimiters on those VFragments, and
@@ -4544,275 +4294,278 @@ function allocateChildren(vnode, vm) {
  * This function is used for slotted VFragments to avoid the text delimiters interfering with slotting functionality.
  */
 function flattenFragmentsInChildren(children) {
-  const flattenedChildren = [];
-  // Initialize our stack with the direct children of the custom component and check whether we have a VFragment.
-  // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
-  const nodeStack = [];
-  let fragmentFound = false;
-  for (let i = children.length - 1; i > -1; i -= 1) {
-    const child = children[i];
-    ArrayPush$1.call(nodeStack, child);
-    fragmentFound = fragmentFound || !!(child && isVFragment(child));
-  }
-  if (!fragmentFound) {
-    return children;
-  }
-  let currentNode;
-  while (!isUndefined$1(currentNode = ArrayPop.call(nodeStack))) {
-    if (!isNull(currentNode) && isVFragment(currentNode)) {
-      const fChildren = currentNode.children;
-      // Ignore the start and end text node delimiters
-      for (let i = fChildren.length - 2; i > 0; i -= 1) {
-        ArrayPush$1.call(nodeStack, fChildren[i]);
-      }
-    } else {
-      ArrayPush$1.call(flattenedChildren, currentNode);
-    }
-  }
-  // We always mark the children as dynamic because nothing generates stable VFragments yet.
-  // If/when stable VFragments are generated by the compiler, this code should be updated to
-  // not mark dynamic if all flattened VFragments were stable.
-  markAsDynamicChildren(flattenedChildren);
-  return flattenedChildren;
+    const flattenedChildren = [];
+    // Initialize our stack with the direct children of the custom component and check whether we have a VFragment.
+    // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
+    const nodeStack = [];
+    let fragmentFound = false;
+    for (let i = children.length - 1; i > -1; i -= 1) {
+        const child = children[i];
+        ArrayPush$1.call(nodeStack, child);
+        fragmentFound = fragmentFound || !!(child && isVFragment(child));
+    }
+    if (!fragmentFound) {
+        return children;
+    }
+    let currentNode;
+    while (!isUndefined$1((currentNode = ArrayPop.call(nodeStack)))) {
+        if (!isNull(currentNode) && isVFragment(currentNode)) {
+            const fChildren = currentNode.children;
+            // Ignore the start and end text node delimiters
+            for (let i = fChildren.length - 2; i > 0; i -= 1) {
+                ArrayPush$1.call(nodeStack, fChildren[i]);
+            }
+        }
+        else {
+            ArrayPush$1.call(flattenedChildren, currentNode);
+        }
+    }
+    // We always mark the children as dynamic because nothing generates stable VFragments yet.
+    // If/when stable VFragments are generated by the compiler, this code should be updated to
+    // not mark dynamic if all flattened VFragments were stable.
+    markAsDynamicChildren(flattenedChildren);
+    return flattenedChildren;
 }
 function createViewModelHook(elm, vnode, renderer) {
-  let vm = getAssociatedVMIfPresent(elm);
-  // There is a possibility that a custom element is registered under tagName, in which case, the
-  // initialization is already carry on, and there is nothing else to do here since this hook is
-  // called right after invoking `document.createElement`.
-  if (!isUndefined$1(vm)) {
+    let vm = getAssociatedVMIfPresent(elm);
+    // There is a possibility that a custom element is registered under tagName, in which case, the
+    // initialization is already carry on, and there is nothing else to do here since this hook is
+    // called right after invoking `document.createElement`.
+    if (!isUndefined$1(vm)) {
+        return vm;
+    }
+    const { sel, mode, ctor, owner } = vnode;
+    vm = createVM(elm, ctor, renderer, {
+        mode,
+        owner,
+        tagName: sel,
+    });
+    if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(isArray$1(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
+    }
     return vm;
-  }
-  const {
-    sel,
-    mode,
-    ctor,
-    owner
-  } = vnode;
-  vm = createVM(elm, ctor, renderer, {
-    mode,
-    owner,
-    tagName: sel
-  });
-  if (process.env.NODE_ENV !== 'production') {
-    assert.isTrue(isArray$1(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
-  }
-  return vm;
 }
 function allocateInSlot(vm, children, owner) {
-  var _a, _b;
-  const {
-    cmpSlots: {
-      slotAssignments: oldSlotsMapping
-    }
-  } = vm;
-  const cmpSlotsMapping = create(null);
-  // Collect all slots into cmpSlotsMapping
-  for (let i = 0, len = children.length; i < len; i += 1) {
-    const vnode = children[i];
-    if (isNull(vnode)) {
-      continue;
-    }
-    let slotName = '';
-    if (isVBaseElement(vnode)) {
-      slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
-    } else if (isVScopedSlotFragment(vnode)) {
-      slotName = vnode.slotName;
-    }
-    // Can't use toString here because Symbol(1).toString() is 'Symbol(1)'
-    // but elm.setAttribute('slot', Symbol(1)) is an error.
-    // the following line also throws same error for symbols
-    // Similar for Object.create(null)
-    const normalizedSlotName = '' + slotName;
-    const vnodes = cmpSlotsMapping[normalizedSlotName] = cmpSlotsMapping[normalizedSlotName] || [];
-    ArrayPush$1.call(vnodes, vnode);
-  }
-  vm.cmpSlots = {
-    owner,
-    slotAssignments: cmpSlotsMapping
-  };
-  if (isFalse(vm.isDirty)) {
-    // We need to determine if the old allocation is really different from the new one
-    // and mark the vm as dirty
-    const oldKeys = keys(oldSlotsMapping);
-    if (oldKeys.length !== keys(cmpSlotsMapping).length) {
-      markComponentAsDirty(vm);
-      return;
-    }
-    for (let i = 0, len = oldKeys.length; i < len; i += 1) {
-      const key = oldKeys[i];
-      if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
-        markComponentAsDirty(vm);
-        return;
-      }
-      const oldVNodes = oldSlotsMapping[key];
-      const vnodes = cmpSlotsMapping[key];
-      for (let j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
-        if (oldVNodes[j] !== vnodes[j]) {
-          markComponentAsDirty(vm);
-          return;
+    var _a, _b;
+    const { cmpSlots: { slotAssignments: oldSlotsMapping }, } = vm;
+    const cmpSlotsMapping = create(null);
+    // Collect all slots into cmpSlotsMapping
+    for (let i = 0, len = children.length; i < len; i += 1) {
+        const vnode = children[i];
+        if (isNull(vnode)) {
+            continue;
+        }
+        let slotName = '';
+        if (isVBaseElement(vnode)) {
+            slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
+        }
+        else if (isVScopedSlotFragment(vnode)) {
+            slotName = vnode.slotName;
+        }
+        // Can't use toString here because Symbol(1).toString() is 'Symbol(1)'
+        // but elm.setAttribute('slot', Symbol(1)) is an error.
+        // the following line also throws same error for symbols
+        // Similar for Object.create(null)
+        const normalizedSlotName = '' + slotName;
+        const vnodes = (cmpSlotsMapping[normalizedSlotName] =
+            cmpSlotsMapping[normalizedSlotName] || []);
+        ArrayPush$1.call(vnodes, vnode);
+    }
+    vm.cmpSlots = { owner, slotAssignments: cmpSlotsMapping };
+    if (isFalse(vm.isDirty)) {
+        // We need to determine if the old allocation is really different from the new one
+        // and mark the vm as dirty
+        const oldKeys = keys(oldSlotsMapping);
+        if (oldKeys.length !== keys(cmpSlotsMapping).length) {
+            markComponentAsDirty(vm);
+            return;
+        }
+        for (let i = 0, len = oldKeys.length; i < len; i += 1) {
+            const key = oldKeys[i];
+            if (isUndefined$1(cmpSlotsMapping[key]) ||
+                oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
+                markComponentAsDirty(vm);
+                return;
+            }
+            const oldVNodes = oldSlotsMapping[key];
+            const vnodes = cmpSlotsMapping[key];
+            for (let j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
+                if (oldVNodes[j] !== vnodes[j]) {
+                    markComponentAsDirty(vm);
+                    return;
+                }
+            }
         }
-      }
     }
-  }
 }
 // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
 const DynamicChildren = new WeakMap();
 // dynamic children means it was either generated by an iteration in a template
 // or part of an unstable fragment, and will require a more complex diffing algo.
 function markAsDynamicChildren(children) {
-  DynamicChildren.set(children, 1);
+    DynamicChildren.set(children, 1);
 }
 function hasDynamicChildren(children) {
-  return DynamicChildren.has(children);
+    return DynamicChildren.has(children);
 }
 function createKeyToOldIdx(children, beginIdx, endIdx) {
-  const map = {};
-  // TODO [#1637]: simplify this by assuming that all vnodes has keys
-  for (let j = beginIdx; j <= endIdx; ++j) {
-    const ch = children[j];
-    if (isVNode(ch)) {
-      const {
-        key
-      } = ch;
-      if (key !== undefined) {
-        map[key] = j;
-      }
-    }
-  }
-  return map;
+    const map = {};
+    // TODO [#1637]: simplify this by assuming that all vnodes has keys
+    for (let j = beginIdx; j <= endIdx; ++j) {
+        const ch = children[j];
+        if (isVNode(ch)) {
+            const { key } = ch;
+            if (key !== undefined) {
+                map[key] = j;
+            }
+        }
+    }
+    return map;
 }
 function updateDynamicChildren(oldCh, newCh, parent, renderer) {
-  let oldStartIdx = 0;
-  let newStartIdx = 0;
-  let oldEndIdx = oldCh.length - 1;
-  let oldStartVnode = oldCh[0];
-  let oldEndVnode = oldCh[oldEndIdx];
-  const newChEnd = newCh.length - 1;
-  let newEndIdx = newChEnd;
-  let newStartVnode = newCh[0];
-  let newEndVnode = newCh[newEndIdx];
-  let oldKeyToIdx;
-  let idxInOld;
-  let elmToMove;
-  let before;
-  let clonedOldCh = false;
-  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-    if (!isVNode(oldStartVnode)) {
-      oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-    } else if (!isVNode(oldEndVnode)) {
-      oldEndVnode = oldCh[--oldEndIdx];
-    } else if (!isVNode(newStartVnode)) {
-      newStartVnode = newCh[++newStartIdx];
-    } else if (!isVNode(newEndVnode)) {
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldStartVnode, newStartVnode)) {
-      patch(oldStartVnode, newStartVnode, parent, renderer);
-      oldStartVnode = oldCh[++oldStartIdx];
-      newStartVnode = newCh[++newStartIdx];
-    } else if (isSameVnode(oldEndVnode, newEndVnode)) {
-      patch(oldEndVnode, newEndVnode, parent, renderer);
-      oldEndVnode = oldCh[--oldEndIdx];
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldStartVnode, newEndVnode)) {
-      // Vnode moved right
-      patch(oldStartVnode, newEndVnode, parent, renderer);
-      insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
-      oldStartVnode = oldCh[++oldStartIdx];
-      newEndVnode = newCh[--newEndIdx];
-    } else if (isSameVnode(oldEndVnode, newStartVnode)) {
-      // Vnode moved left
-      patch(oldEndVnode, newStartVnode, parent, renderer);
-      insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
-      oldEndVnode = oldCh[--oldEndIdx];
-      newStartVnode = newCh[++newStartIdx];
-    } else {
-      if (oldKeyToIdx === undefined) {
-        oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-      }
-      idxInOld = oldKeyToIdx[newStartVnode.key];
-      if (isUndefined$1(idxInOld)) {
-        // New element
-        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        elmToMove = oldCh[idxInOld];
-        if (isVNode(elmToMove)) {
-          if (elmToMove.sel !== newStartVnode.sel) {
-            // New element
-            mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-          } else {
-            patch(elmToMove, newStartVnode, parent, renderer);
-            // Delete the old child, but copy the array since it is read-only.
-            // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
-            // so we only care about the `oldCh` object inside this function.
-            // To avoid cloning over and over again, we check `clonedOldCh`
-            // and only clone once.
-            if (!clonedOldCh) {
-              clonedOldCh = true;
-              oldCh = [...oldCh];
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    const newChEnd = newCh.length - 1;
+    let newEndIdx = newChEnd;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let oldKeyToIdx;
+    let idxInOld;
+    let elmToMove;
+    let before;
+    let clonedOldCh = false;
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+        if (!isVNode(oldStartVnode)) {
+            oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+        }
+        else if (!isVNode(oldEndVnode)) {
+            oldEndVnode = oldCh[--oldEndIdx];
+        }
+        else if (!isVNode(newStartVnode)) {
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (!isVNode(newEndVnode)) {
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+            patch(oldStartVnode, newStartVnode, parent, renderer);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+            patch(oldEndVnode, newEndVnode, parent, renderer);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+            // Vnode moved right
+            patch(oldStartVnode, newEndVnode, parent, renderer);
+            insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+            // Vnode moved left
+            patch(oldEndVnode, newStartVnode, parent, renderer);
+            insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else {
+            if (oldKeyToIdx === undefined) {
+                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
+            }
+            idxInOld = oldKeyToIdx[newStartVnode.key];
+            if (isUndefined$1(idxInOld)) {
+                // New element
+                mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+                newStartVnode = newCh[++newStartIdx];
             }
-            // We've already cloned at least once, so it's no longer read-only
-            oldCh[idxInOld] = undefined;
-            insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
-          }
-        }
-        newStartVnode = newCh[++newStartIdx];
-      }
-    }
-  }
-  if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-    if (oldStartIdx > oldEndIdx) {
-      // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
-      // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-      let i = newEndIdx;
-      let n;
-      do {
-        n = newCh[++i];
-      } while (!isVNode(n) && i < newChEnd);
-      before = isVNode(n) ? n.elm : null;
-      mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
-    } else {
-      unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
-    }
-  }
+            else {
+                elmToMove = oldCh[idxInOld];
+                if (isVNode(elmToMove)) {
+                    if (elmToMove.sel !== newStartVnode.sel) {
+                        // New element
+                        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+                    }
+                    else {
+                        patch(elmToMove, newStartVnode, parent, renderer);
+                        // Delete the old child, but copy the array since it is read-only.
+                        // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+                        // so we only care about the `oldCh` object inside this function.
+                        // To avoid cloning over and over again, we check `clonedOldCh`
+                        // and only clone once.
+                        if (!clonedOldCh) {
+                            clonedOldCh = true;
+                            oldCh = [...oldCh];
+                        }
+                        // We've already cloned at least once, so it's no longer read-only
+                        oldCh[idxInOld] = undefined;
+                        insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
+                    }
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+        }
+    }
+    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+        if (oldStartIdx > oldEndIdx) {
+            // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
+            // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
+            let i = newEndIdx;
+            let n;
+            do {
+                n = newCh[++i];
+            } while (!isVNode(n) && i < newChEnd);
+            before = isVNode(n) ? n.elm : null;
+            mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
+        }
+        else {
+            unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
+        }
+    }
 }
 function updateStaticChildren(c1, c2, parent, renderer) {
-  const c1Length = c1.length;
-  const c2Length = c2.length;
-  if (c1Length === 0) {
-    // the old list is empty, we can directly insert anything new
-    mountVNodes(c2, parent, renderer, null);
-    return;
-  }
-  if (c2Length === 0) {
-    // the old list is nonempty and the new list is empty so we can directly remove all old nodes
-    // this is the case in which the dynamic children of an if-directive should be removed
-    unmountVNodes(c1, parent, renderer, true);
-    return;
-  }
-  // if the old list is not empty, the new list MUST have the same
-  // amount of nodes, that's why we call this static children
-  let anchor = null;
-  for (let i = c2Length - 1; i >= 0; i -= 1) {
-    const n1 = c1[i];
-    const n2 = c2[i];
-    if (n2 !== n1) {
-      if (isVNode(n1)) {
-        if (isVNode(n2)) {
-          // both vnodes are equivalent, and we just need to patch them
-          patch(n1, n2, parent, renderer);
-          anchor = n2.elm;
-        } else {
-          // removing the old vnode since the new one is null
-          unmount(n1, parent, renderer, true);
-        }
-      } else if (isVNode(n2)) {
-        mount(n2, parent, renderer, anchor);
-        anchor = n2.elm;
-      }
-    }
-  }
+    const c1Length = c1.length;
+    const c2Length = c2.length;
+    if (c1Length === 0) {
+        // the old list is empty, we can directly insert anything new
+        mountVNodes(c2, parent, renderer, null);
+        return;
+    }
+    if (c2Length === 0) {
+        // the old list is nonempty and the new list is empty so we can directly remove all old nodes
+        // this is the case in which the dynamic children of an if-directive should be removed
+        unmountVNodes(c1, parent, renderer, true);
+        return;
+    }
+    // if the old list is not empty, the new list MUST have the same
+    // amount of nodes, that's why we call this static children
+    let anchor = null;
+    for (let i = c2Length - 1; i >= 0; i -= 1) {
+        const n1 = c1[i];
+        const n2 = c2[i];
+        if (n2 !== n1) {
+            if (isVNode(n1)) {
+                if (isVNode(n2)) {
+                    // both vnodes are equivalent, and we just need to patch them
+                    patch(n1, n2, parent, renderer);
+                    anchor = n2.elm;
+                }
+                else {
+                    // removing the old vnode since the new one is null
+                    unmount(n1, parent, renderer, true);
+                }
+            }
+            else if (isVNode(n2)) {
+                mount(n2, parent, renderer, anchor);
+                anchor = n2.elm;
+            }
+        }
+    }
 }
 
 /*
@@ -5749,400 +5502,366 @@ let idx = 0;
 /** The internal slot used to associate different objects the engine manipulates with the VM */
 const ViewModelReflection = new WeakMap();
 function callHook(cmp, fn, args = []) {
-  return fn.apply(cmp, args);
+    return fn.apply(cmp, args);
 }
 function setHook(cmp, prop, newValue) {
-  cmp[prop] = newValue;
+    cmp[prop] = newValue;
 }
 function getHook(cmp, prop) {
-  return cmp[prop];
+    return cmp[prop];
 }
 function rerenderVM(vm) {
-  rehydrate(vm);
+    rehydrate(vm);
 }
 function connectRootElement(elm) {
-  const vm = getAssociatedVM(elm);
-  logGlobalOperationStart(7 /* OperationId.GlobalHydrate */, vm);
-  // Usually means moving the element from one place to another, which is observable via
-  // life-cycle hooks.
-  if (vm.state === 1 /* VMState.connected */) {
-    disconnectRootElement(elm);
-  }
-  runConnectedCallback(vm);
-  rehydrate(vm);
-  logGlobalOperationEnd(7 /* OperationId.GlobalHydrate */, vm);
+    const vm = getAssociatedVM(elm);
+    logGlobalOperationStart(7 /* OperationId.GlobalHydrate */, vm);
+    // Usually means moving the element from one place to another, which is observable via
+    // life-cycle hooks.
+    if (vm.state === 1 /* VMState.connected */) {
+        disconnectRootElement(elm);
+    }
+    runConnectedCallback(vm);
+    rehydrate(vm);
+    logGlobalOperationEnd(7 /* OperationId.GlobalHydrate */, vm);
 }
 function disconnectRootElement(elm) {
-  const vm = getAssociatedVM(elm);
-  resetComponentStateWhenRemoved(vm);
+    const vm = getAssociatedVM(elm);
+    resetComponentStateWhenRemoved(vm);
 }
 function appendVM(vm) {
-  rehydrate(vm);
+    rehydrate(vm);
 }
 // just in case the component comes back, with this we guarantee re-rendering it
 // while preventing any attempt to rehydration until after reinsertion.
 function resetComponentStateWhenRemoved(vm) {
-  const {
-    state
-  } = vm;
-  if (state !== 2 /* VMState.disconnected */) {
-    const {
-      tro
-    } = vm;
-    // Making sure that any observing record will not trigger the rehydrated on this vm
-    tro.reset();
-    runDisconnectedCallback(vm);
-    // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
-    runChildNodesDisconnectedCallback(vm);
-    runLightChildNodesDisconnectedCallback(vm);
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    removeActiveVM(vm);
-  }
+    const { state } = vm;
+    if (state !== 2 /* VMState.disconnected */) {
+        const { tro } = vm;
+        // Making sure that any observing record will not trigger the rehydrated on this vm
+        tro.reset();
+        runDisconnectedCallback(vm);
+        // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
+        runChildNodesDisconnectedCallback(vm);
+        runLightChildNodesDisconnectedCallback(vm);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        removeActiveVM(vm);
+    }
 }
 // this method is triggered by the diffing algo only when a vnode from the
 // old vnode.children is removed from the DOM.
 function removeVM(vm) {
-  if (process.env.NODE_ENV !== 'production') {
-    assert.isTrue(vm.state === 1 /* VMState.connected */ || vm.state === 2 /* VMState.disconnected */, `${vm} must have been connected.`);
-  }
-  resetComponentStateWhenRemoved(vm);
+    if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(vm.state === 1 /* VMState.connected */ || vm.state === 2 /* VMState.disconnected */, `${vm} must have been connected.`);
+    }
+    resetComponentStateWhenRemoved(vm);
 }
 function getNearestShadowAncestor(vm) {
-  let ancestor = vm.owner;
-  while (!isNull(ancestor) && ancestor.renderMode === 0 /* RenderMode.Light */) {
-    ancestor = ancestor.owner;
-  }
-  return ancestor;
+    let ancestor = vm.owner;
+    while (!isNull(ancestor) && ancestor.renderMode === 0 /* RenderMode.Light */) {
+        ancestor = ancestor.owner;
+    }
+    return ancestor;
 }
 function createVM(elm, ctor, renderer, options) {
-  const {
-    mode,
-    owner,
-    tagName,
-    hydrated
-  } = options;
-  const def = getComponentInternalDef(ctor);
-  const vm = {
-    elm,
-    def,
-    idx: idx++,
-    state: 0 /* VMState.created */,
-    isScheduled: false,
-    isDirty: true,
-    tagName,
-    mode,
-    owner,
-    refVNodes: null,
-    children: EmptyArray,
-    aChildren: EmptyArray,
-    velements: EmptyArray,
-    cmpProps: create(null),
-    cmpFields: create(null),
-    cmpSlots: {
-      slotAssignments: create(null)
-    },
-    cmpTemplate: null,
-    hydrated: Boolean(hydrated),
-    renderMode: def.renderMode,
-    context: {
-      stylesheetToken: undefined,
-      hasTokenInClass: undefined,
-      hasTokenInAttribute: undefined,
-      hasScopedStyles: undefined,
-      styleVNodes: null,
-      tplCache: EmptyObject,
-      wiredConnecting: EmptyArray,
-      wiredDisconnecting: EmptyArray
-    },
-    // Properties set right after VM creation.
-    tro: null,
-    shadowMode: null,
-    stylesheets: null,
-    // Properties set by the LightningElement constructor.
-    component: null,
-    shadowRoot: null,
-    renderRoot: null,
-    callHook,
-    setHook,
-    getHook,
-    renderer
-  };
-  if (process.env.NODE_ENV !== 'production') {
-    vm.debugInfo = create(null);
-  }
-  vm.stylesheets = computeStylesheets(vm, def.ctor);
-  vm.shadowMode = computeShadowMode(vm, renderer);
-  vm.tro = getTemplateReactiveObserver();
-  if (process.env.NODE_ENV !== 'production') {
-    vm.toString = () => {
-      return `[object:vm ${def.name} (${vm.idx})]`;
+    const { mode, owner, tagName, hydrated } = options;
+    const def = getComponentInternalDef(ctor);
+    const vm = {
+        elm,
+        def,
+        idx: idx++,
+        state: 0 /* VMState.created */,
+        isScheduled: false,
+        isDirty: true,
+        tagName,
+        mode,
+        owner,
+        refVNodes: null,
+        children: EmptyArray,
+        aChildren: EmptyArray,
+        velements: EmptyArray,
+        cmpProps: create(null),
+        cmpFields: create(null),
+        cmpSlots: { slotAssignments: create(null) },
+        cmpTemplate: null,
+        hydrated: Boolean(hydrated),
+        renderMode: def.renderMode,
+        context: {
+            stylesheetToken: undefined,
+            hasTokenInClass: undefined,
+            hasTokenInAttribute: undefined,
+            hasScopedStyles: undefined,
+            styleVNodes: null,
+            tplCache: EmptyObject,
+            wiredConnecting: EmptyArray,
+            wiredDisconnecting: EmptyArray,
+        },
+        // Properties set right after VM creation.
+        tro: null,
+        shadowMode: null,
+        stylesheets: null,
+        // Properties set by the LightningElement constructor.
+        component: null,
+        shadowRoot: null,
+        renderRoot: null,
+        callHook,
+        setHook,
+        getHook,
+        renderer,
     };
-    if (lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
-      vm.shadowMode = 0 /* ShadowMode.Native */;
-    }
-  }
-  // Create component instance associated to the vm and the element.
-  invokeComponentConstructor(vm, def.ctor);
-  // Initializing the wire decorator per instance only when really needed
-  if (hasWireAdapters(vm)) {
-    installWireAdapters(vm);
-  }
-  return vm;
+    if (process.env.NODE_ENV !== 'production') {
+        vm.debugInfo = create(null);
+    }
+    vm.stylesheets = computeStylesheets(vm, def.ctor);
+    vm.shadowMode = computeShadowMode(vm, renderer);
+    vm.tro = getTemplateReactiveObserver();
+    if (process.env.NODE_ENV !== 'production') {
+        vm.toString = () => {
+            return `[object:vm ${def.name} (${vm.idx})]`;
+        };
+        if (lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
+            vm.shadowMode = 0 /* ShadowMode.Native */;
+        }
+    }
+    // Create component instance associated to the vm and the element.
+    invokeComponentConstructor(vm, def.ctor);
+    // Initializing the wire decorator per instance only when really needed
+    if (hasWireAdapters(vm)) {
+        installWireAdapters(vm);
+    }
+    return vm;
 }
 function validateComponentStylesheets(vm, stylesheets) {
-  let valid = true;
-  const validate = arrayOrStylesheet => {
-    if (isArray$1(arrayOrStylesheet)) {
-      for (let i = 0; i < arrayOrStylesheet.length; i++) {
-        validate(arrayOrStylesheet[i]);
-      }
-    } else if (!isFunction$1(arrayOrStylesheet)) {
-      // function assumed to be a stylesheet factory
-      valid = false;
-    }
-  };
-  if (!isArray$1(stylesheets)) {
-    valid = false;
-  } else {
-    validate(stylesheets);
-  }
-  return valid;
+    let valid = true;
+    const validate = (arrayOrStylesheet) => {
+        if (isArray$1(arrayOrStylesheet)) {
+            for (let i = 0; i < arrayOrStylesheet.length; i++) {
+                validate(arrayOrStylesheet[i]);
+            }
+        }
+        else if (!isFunction$1(arrayOrStylesheet)) {
+            // function assumed to be a stylesheet factory
+            valid = false;
+        }
+    };
+    if (!isArray$1(stylesheets)) {
+        valid = false;
+    }
+    else {
+        validate(stylesheets);
+    }
+    return valid;
 }
 // Validate and flatten any stylesheets defined as `static stylesheets`
 function computeStylesheets(vm, ctor) {
-  if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
     warnOnStylesheetsMutation(ctor);
-    const {
-      stylesheets
-    } = ctor;
+    const { stylesheets } = ctor;
     if (!isUndefined$1(stylesheets)) {
-      const valid = validateComponentStylesheets(vm, stylesheets);
-      if (valid) {
-        return flattenStylesheets(stylesheets);
-      } else if (process.env.NODE_ENV !== 'production') {
-        logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
-      }
+        const valid = validateComponentStylesheets(vm, stylesheets);
+        if (valid) {
+            return flattenStylesheets(stylesheets);
+        }
+        else if (process.env.NODE_ENV !== 'production') {
+            logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+        }
     }
-  }
-  return null;
+    return null;
 }
 function warnOnStylesheetsMutation(ctor) {
-  if (process.env.NODE_ENV !== 'production') {
-    let {
-      stylesheets
-    } = ctor;
-    defineProperty(ctor, 'stylesheets', {
-      enumerable: true,
-      configurable: true,
-      get() {
-        return stylesheets;
-      },
-      set(newValue) {
-        logWarnOnce(`Dynamically setting the "stylesheets" static property on ${ctor.name} ` + 'will not affect the stylesheets injected.');
-        stylesheets = newValue;
-      }
-    });
-  }
+    if (process.env.NODE_ENV !== 'production') {
+        let { stylesheets } = ctor;
+        defineProperty(ctor, 'stylesheets', {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return stylesheets;
+            },
+            set(newValue) {
+                logWarnOnce(`Dynamically setting the "stylesheets" static property on ${ctor.name} ` +
+                    'will not affect the stylesheets injected.');
+                stylesheets = newValue;
+            },
+        });
+    }
 }
 function computeShadowMode(vm, renderer) {
-  const {
-    def
-  } = vm;
-  const {
-    isSyntheticShadowDefined,
-    isNativeShadowDefined
-  } = renderer;
-  let shadowMode;
-  if (isSyntheticShadowDefined) {
-    if (def.renderMode === 0 /* RenderMode.Light */) {
-      // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
-      // everything defaults to native when the synthetic shadow polyfill is unavailable.
-      shadowMode = 0 /* ShadowMode.Native */;
-    } else if (isNativeShadowDefined) {
-      // Not combined with above condition because @lwc/features only supports identifiers in
-      // the if-condition.
-      if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-        if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */) {
-          shadowMode = 0 /* ShadowMode.Native */;
-        } else {
-          const shadowAncestor = getNearestShadowAncestor(vm);
-          if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0 /* ShadowMode.Native */) {
-            // Transitive support for native Shadow DOM. A component in native mode
-            // transitively opts all of its descendants into native.
+    const { def } = vm;
+    const { isSyntheticShadowDefined, isNativeShadowDefined } = renderer;
+    let shadowMode;
+    if (isSyntheticShadowDefined) {
+        if (def.renderMode === 0 /* RenderMode.Light */) {
+            // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
+            // everything defaults to native when the synthetic shadow polyfill is unavailable.
             shadowMode = 0 /* ShadowMode.Native */;
-          } else {
-            // Synthetic if neither this component nor any of its ancestors are configured
-            // to be native.
+        }
+        else if (isNativeShadowDefined) {
+            // Not combined with above condition because @lwc/features only supports identifiers in
+            // the if-condition.
+            if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+                if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */) {
+                    shadowMode = 0 /* ShadowMode.Native */;
+                }
+                else {
+                    const shadowAncestor = getNearestShadowAncestor(vm);
+                    if (!isNull(shadowAncestor) &&
+                        shadowAncestor.shadowMode === 0 /* ShadowMode.Native */) {
+                        // Transitive support for native Shadow DOM. A component in native mode
+                        // transitively opts all of its descendants into native.
+                        shadowMode = 0 /* ShadowMode.Native */;
+                    }
+                    else {
+                        // Synthetic if neither this component nor any of its ancestors are configured
+                        // to be native.
+                        shadowMode = 1 /* ShadowMode.Synthetic */;
+                    }
+                }
+            }
+            else {
+                shadowMode = 1 /* ShadowMode.Synthetic */;
+            }
+        }
+        else {
+            // Synthetic if there is no native Shadow DOM support.
             shadowMode = 1 /* ShadowMode.Synthetic */;
-          }
-        }
-      } else {
-        shadowMode = 1 /* ShadowMode.Synthetic */;
-      }
-    } else {
-      // Synthetic if there is no native Shadow DOM support.
-      shadowMode = 1 /* ShadowMode.Synthetic */;
-    }
-  } else {
-    // Native if the synthetic shadow polyfill is unavailable.
-    shadowMode = 0 /* ShadowMode.Native */;
-  }
-
-  return shadowMode;
+        }
+    }
+    else {
+        // Native if the synthetic shadow polyfill is unavailable.
+        shadowMode = 0 /* ShadowMode.Native */;
+    }
+    return shadowMode;
 }
 function assertIsVM(obj) {
-  if (isNull(obj) || !isObject(obj) || !('renderRoot' in obj)) {
-    throw new TypeError(`${obj} is not a VM.`);
-  }
+    if (isNull(obj) || !isObject(obj) || !('renderRoot' in obj)) {
+        throw new TypeError(`${obj} is not a VM.`);
+    }
 }
 function associateVM(obj, vm) {
-  ViewModelReflection.set(obj, vm);
+    ViewModelReflection.set(obj, vm);
 }
 function getAssociatedVM(obj) {
-  const vm = ViewModelReflection.get(obj);
-  if (process.env.NODE_ENV !== 'production') {
-    assertIsVM(vm);
-  }
-  return vm;
+    const vm = ViewModelReflection.get(obj);
+    if (process.env.NODE_ENV !== 'production') {
+        assertIsVM(vm);
+    }
+    return vm;
 }
 function getAssociatedVMIfPresent(obj) {
-  const maybeVm = ViewModelReflection.get(obj);
-  if (process.env.NODE_ENV !== 'production') {
-    if (!isUndefined$1(maybeVm)) {
-      assertIsVM(maybeVm);
+    const maybeVm = ViewModelReflection.get(obj);
+    if (process.env.NODE_ENV !== 'production') {
+        if (!isUndefined$1(maybeVm)) {
+            assertIsVM(maybeVm);
+        }
     }
-  }
-  return maybeVm;
+    return maybeVm;
 }
 function rehydrate(vm) {
-  if (isTrue(vm.isDirty)) {
-    const children = renderComponent$1(vm);
-    patchShadowRoot(vm, children);
-  }
+    if (isTrue(vm.isDirty)) {
+        const children = renderComponent$1(vm);
+        patchShadowRoot(vm, children);
+    }
 }
 function patchShadowRoot(vm, newCh) {
-  const {
-    renderRoot,
-    children: oldCh,
-    renderer
-  } = vm;
-  // caching the new children collection
-  vm.children = newCh;
-  if (newCh.length > 0 || oldCh.length > 0) {
-    // patch function mutates vnodes by adding the element reference,
-    // however, if patching fails it contains partial changes.
-    if (oldCh !== newCh) {
-      runWithBoundaryProtection(vm, vm, () => {
-        // pre
-        logOperationStart(2 /* OperationId.Patch */, vm);
-      }, () => {
-        // job
-        patchChildren(oldCh, newCh, renderRoot, renderer);
-      }, () => {
-        // post
-        logOperationEnd(2 /* OperationId.Patch */, vm);
-      });
+    const { renderRoot, children: oldCh, renderer } = vm;
+    // caching the new children collection
+    vm.children = newCh;
+    if (newCh.length > 0 || oldCh.length > 0) {
+        // patch function mutates vnodes by adding the element reference,
+        // however, if patching fails it contains partial changes.
+        if (oldCh !== newCh) {
+            runWithBoundaryProtection(vm, vm, () => {
+                // pre
+                logOperationStart(2 /* OperationId.Patch */, vm);
+            }, () => {
+                // job
+                patchChildren(oldCh, newCh, renderRoot, renderer);
+            }, () => {
+                // post
+                logOperationEnd(2 /* OperationId.Patch */, vm);
+            });
+        }
     }
-  }
-  if (vm.state === 1 /* VMState.connected */) ;
+    if (vm.state === 1 /* VMState.connected */) ;
 }
-
 function runConnectedCallback(vm) {
-  const {
-    state
-  } = vm;
-  if (state === 1 /* VMState.connected */) {
-    return; // nothing to do since it was already connected
-  }
-
-  vm.state = 1 /* VMState.connected */;
-  // reporting connection
-  const {
-    connected
-  } = Services;
-  if (connected) {
-    invokeServiceHook(vm, connected);
-  }
-  if (hasWireAdapters(vm)) {
-    connectWireAdapters(vm);
-  }
-  const {
-    connectedCallback
-  } = vm.def;
-  if (!isUndefined$1(connectedCallback)) {
-    logOperationStart(3 /* OperationId.ConnectedCallback */, vm);
-    invokeComponentCallback(vm, connectedCallback);
-    logOperationEnd(3 /* OperationId.ConnectedCallback */, vm);
-  }
+    const { state } = vm;
+    if (state === 1 /* VMState.connected */) {
+        return; // nothing to do since it was already connected
+    }
+    vm.state = 1 /* VMState.connected */;
+    // reporting connection
+    const { connected } = Services;
+    if (connected) {
+        invokeServiceHook(vm, connected);
+    }
+    if (hasWireAdapters(vm)) {
+        connectWireAdapters(vm);
+    }
+    const { connectedCallback } = vm.def;
+    if (!isUndefined$1(connectedCallback)) {
+        logOperationStart(3 /* OperationId.ConnectedCallback */, vm);
+        invokeComponentCallback(vm, connectedCallback);
+        logOperationEnd(3 /* OperationId.ConnectedCallback */, vm);
+    }
 }
 function hasWireAdapters(vm) {
-  return getOwnPropertyNames$1(vm.def.wire).length > 0;
+    return getOwnPropertyNames$1(vm.def.wire).length > 0;
 }
 function runDisconnectedCallback(vm) {
-  if (process.env.NODE_ENV !== 'production') {
-    assert.isTrue(vm.state !== 2 /* VMState.disconnected */, `${vm} must be inserted.`);
-  }
-  if (isFalse(vm.isDirty)) {
-    // this guarantees that if the component is reused/reinserted,
-    // it will be re-rendered because we are disconnecting the reactivity
-    // linking, so mutations are not automatically reflected on the state
-    // of disconnected components.
-    vm.isDirty = true;
-  }
-  vm.state = 2 /* VMState.disconnected */;
-  // reporting disconnection
-  const {
-    disconnected
-  } = Services;
-  if (disconnected) {
-    invokeServiceHook(vm, disconnected);
-  }
-  if (hasWireAdapters(vm)) {
-    disconnectWireAdapters(vm);
-  }
-  const {
-    disconnectedCallback
-  } = vm.def;
-  if (!isUndefined$1(disconnectedCallback)) {
-    logOperationStart(5 /* OperationId.DisconnectedCallback */, vm);
-    invokeComponentCallback(vm, disconnectedCallback);
-    logOperationEnd(5 /* OperationId.DisconnectedCallback */, vm);
-  }
+    if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(vm.state !== 2 /* VMState.disconnected */, `${vm} must be inserted.`);
+    }
+    if (isFalse(vm.isDirty)) {
+        // this guarantees that if the component is reused/reinserted,
+        // it will be re-rendered because we are disconnecting the reactivity
+        // linking, so mutations are not automatically reflected on the state
+        // of disconnected components.
+        vm.isDirty = true;
+    }
+    vm.state = 2 /* VMState.disconnected */;
+    // reporting disconnection
+    const { disconnected } = Services;
+    if (disconnected) {
+        invokeServiceHook(vm, disconnected);
+    }
+    if (hasWireAdapters(vm)) {
+        disconnectWireAdapters(vm);
+    }
+    const { disconnectedCallback } = vm.def;
+    if (!isUndefined$1(disconnectedCallback)) {
+        logOperationStart(5 /* OperationId.DisconnectedCallback */, vm);
+        invokeComponentCallback(vm, disconnectedCallback);
+        logOperationEnd(5 /* OperationId.DisconnectedCallback */, vm);
+    }
 }
 function runChildNodesDisconnectedCallback(vm) {
-  const {
-    velements: vCustomElementCollection
-  } = vm;
-  // Reporting disconnection for every child in inverse order since they are
-  // inserted in reserved order.
-  for (let i = vCustomElementCollection.length - 1; i >= 0; i -= 1) {
-    const {
-      elm
-    } = vCustomElementCollection[i];
-    // There are two cases where the element could be undefined:
-    // * when there is an error during the construction phase, and an error
-    //   boundary picks it, there is a possibility that the VCustomElement
-    //   is not properly initialized, and therefore is should be ignored.
-    // * when slotted custom element is not used by the element where it is
-    //   slotted into it, as  a result, the custom element was never
-    //   initialized.
-    if (!isUndefined$1(elm)) {
-      const childVM = getAssociatedVMIfPresent(elm);
-      // The VM associated with the element might be associated undefined
-      // in the case where the VM failed in the middle of its creation,
-      // eg: constructor throwing before invoking super().
-      if (!isUndefined$1(childVM)) {
-        resetComponentStateWhenRemoved(childVM);
-      }
-    }
-  }
+    const { velements: vCustomElementCollection } = vm;
+    // Reporting disconnection for every child in inverse order since they are
+    // inserted in reserved order.
+    for (let i = vCustomElementCollection.length - 1; i >= 0; i -= 1) {
+        const { elm } = vCustomElementCollection[i];
+        // There are two cases where the element could be undefined:
+        // * when there is an error during the construction phase, and an error
+        //   boundary picks it, there is a possibility that the VCustomElement
+        //   is not properly initialized, and therefore is should be ignored.
+        // * when slotted custom element is not used by the element where it is
+        //   slotted into it, as  a result, the custom element was never
+        //   initialized.
+        if (!isUndefined$1(elm)) {
+            const childVM = getAssociatedVMIfPresent(elm);
+            // The VM associated with the element might be associated undefined
+            // in the case where the VM failed in the middle of its creation,
+            // eg: constructor throwing before invoking super().
+            if (!isUndefined$1(childVM)) {
+                resetComponentStateWhenRemoved(childVM);
+            }
+        }
+    }
 }
 function runLightChildNodesDisconnectedCallback(vm) {
-  const {
-    aChildren: adoptedChildren
-  } = vm;
-  recursivelyDisconnectChildren(adoptedChildren);
+    const { aChildren: adoptedChildren } = vm;
+    recursivelyDisconnectChildren(adoptedChildren);
 }
 /**
  * The recursion doesn't need to be a complete traversal of the vnode graph,
@@ -6152,78 +5871,72 @@ function runLightChildNodesDisconnectedCallback(vm) {
  * defined on its shadow.
  */
 function recursivelyDisconnectChildren(vnodes) {
-  for (let i = 0, len = vnodes.length; i < len; i += 1) {
-    const vnode = vnodes[i];
-    if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
-      switch (vnode.type) {
-        case 2 /* VNodeType.Element */:
-          recursivelyDisconnectChildren(vnode.children);
-          break;
-        case 3 /* VNodeType.CustomElement */:
-          {
-            const vm = getAssociatedVM(vnode.elm);
-            resetComponentStateWhenRemoved(vm);
-            break;
-          }
-      }
+    for (let i = 0, len = vnodes.length; i < len; i += 1) {
+        const vnode = vnodes[i];
+        if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
+            switch (vnode.type) {
+                case 2 /* VNodeType.Element */:
+                    recursivelyDisconnectChildren(vnode.children);
+                    break;
+                case 3 /* VNodeType.CustomElement */: {
+                    const vm = getAssociatedVM(vnode.elm);
+                    resetComponentStateWhenRemoved(vm);
+                    break;
+                }
+            }
+        }
     }
-  }
 }
 // This is a super optimized mechanism to remove the content of the root node (shadow root
 // for shadow DOM components and the root element itself for light DOM) without having to go
 // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
 // children VNodes might not be representing the current state of the DOM.
 function resetComponentRoot(vm) {
-  const {
-    children,
-    renderRoot,
-    renderer: {
-      remove
-    }
-  } = vm;
-  for (let i = 0, len = children.length; i < len; i++) {
-    const child = children[i];
-    if (!isNull(child) && !isUndefined$1(child.elm)) {
-      remove(child.elm, renderRoot);
-    }
-  }
-  vm.children = EmptyArray;
-  runChildNodesDisconnectedCallback(vm);
-  vm.velements = EmptyArray;
+    const { children, renderRoot, renderer: { remove }, } = vm;
+    for (let i = 0, len = children.length; i < len; i++) {
+        const child = children[i];
+        if (!isNull(child) && !isUndefined$1(child.elm)) {
+            remove(child.elm, renderRoot);
+        }
+    }
+    vm.children = EmptyArray;
+    runChildNodesDisconnectedCallback(vm);
+    vm.velements = EmptyArray;
 }
 function getErrorBoundaryVM(vm) {
-  let currentVm = vm;
-  while (!isNull(currentVm)) {
-    if (!isUndefined$1(currentVm.def.errorCallback)) {
-      return currentVm;
+    let currentVm = vm;
+    while (!isNull(currentVm)) {
+        if (!isUndefined$1(currentVm.def.errorCallback)) {
+            return currentVm;
+        }
+        currentVm = currentVm.owner;
     }
-    currentVm = currentVm.owner;
-  }
 }
 function runWithBoundaryProtection(vm, owner, pre, job, post) {
-  let error;
-  pre();
-  try {
-    job();
-  } catch (e) {
-    error = Object(e);
-  } finally {
-    post();
-    if (!isUndefined$1(error)) {
-      addErrorComponentStack(vm, error);
-      const errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
-      if (isUndefined$1(errorBoundaryVm)) {
-        throw error; // eslint-disable-line no-unsafe-finally
-      }
-
-      resetComponentRoot(vm); // remove offenders
-      logOperationStart(6 /* OperationId.ErrorCallback */, vm);
-      // error boundaries must have an ErrorCallback
-      const errorCallback = errorBoundaryVm.def.errorCallback;
-      invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
-      logOperationEnd(6 /* OperationId.ErrorCallback */, vm);
+    let error;
+    pre();
+    try {
+        job();
+    }
+    catch (e) {
+        error = Object(e);
+    }
+    finally {
+        post();
+        if (!isUndefined$1(error)) {
+            addErrorComponentStack(vm, error);
+            const errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
+            if (isUndefined$1(errorBoundaryVm)) {
+                throw error; // eslint-disable-line no-unsafe-finally
+            }
+            resetComponentRoot(vm); // remove offenders
+            logOperationStart(6 /* OperationId.ErrorCallback */, vm);
+            // error boundaries must have an ErrorCallback
+            const errorCallback = errorBoundaryVm.def.errorCallback;
+            invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
+            logOperationEnd(6 /* OperationId.ErrorCallback */, vm);
+        }
     }
-  }
 }
 
 /*
@@ -6310,185 +6023,199 @@ function setHooks(hooks) {
 const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
 // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
 const STYLESHEET_PROPS = [
-// SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
-'$scoped$'];
+    // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
+    '$scoped$',
+];
 // Via https://www.npmjs.com/package/object-observer
-const ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
+const ARRAY_MUTATION_METHODS = [
+    'pop',
+    'push',
+    'shift',
+    'unshift',
+    'reverse',
+    'sort',
+    'fill',
+    'splice',
+    'copyWithin',
+];
 let mutationTrackingDisabled = false;
 function getOriginalArrayMethod(prop) {
-  switch (prop) {
-    case 'pop':
-      return ArrayPop;
-    case 'push':
-      return ArrayPush$1;
-    case 'shift':
-      return ArrayShift;
-    case 'unshift':
-      return ArrayUnshift;
-    case 'reverse':
-      return ArrayReverse;
-    case 'sort':
-      return ArraySort;
-    case 'fill':
-      return ArrayFill;
-    case 'splice':
-      return ArraySplice;
-    case 'copyWithin':
-      return ArrayCopyWithin;
-  }
+    switch (prop) {
+        case 'pop':
+            return ArrayPop;
+        case 'push':
+            return ArrayPush$1;
+        case 'shift':
+            return ArrayShift;
+        case 'unshift':
+            return ArrayUnshift;
+        case 'reverse':
+            return ArrayReverse;
+        case 'sort':
+            return ArraySort;
+        case 'fill':
+            return ArrayFill;
+        case 'splice':
+            return ArraySplice;
+        case 'copyWithin':
+            return ArrayCopyWithin;
+    }
 }
 function reportViolation(type, eventId, prop) {
-  if (process.env.NODE_ENV !== 'production') {
-    logWarnOnce(`Mutating the "${prop}" property on a ${type} ` + `is deprecated and will be removed in a future version of LWC. ` + `See: https://lwc.dev/guide/css#deprecated-template-mutation`);
-  }
+    if (process.env.NODE_ENV !== 'production') {
+        logWarnOnce(`Mutating the "${prop}" property on a ${type} ` +
+            `is deprecated and will be removed in a future version of LWC. ` +
+            `See: https://sfdc.co/template-mutation`);
+    }
 }
 function reportTemplateViolation(prop) {
-  reportViolation('template', 3 /* ReportingEventId.TemplateMutation */, prop);
+    reportViolation('template', 3 /* ReportingEventId.TemplateMutation */, prop);
 }
 function reportStylesheetViolation(prop) {
-  reportViolation('stylesheet', 4 /* ReportingEventId.StylesheetMutation */, prop);
+    reportViolation('stylesheet', 4 /* ReportingEventId.StylesheetMutation */, prop);
 }
 // Warn if the user tries to mutate a stylesheets array, e.g.:
 // `tmpl.stylesheets.push(someStylesheetFunction)`
 function warnOnArrayMutation(stylesheets) {
-  // We can't handle users calling Array.prototype.slice.call(tmpl.stylesheets), but
-  // we can at least warn when they use the most common mutation methods.
-  for (const prop of ARRAY_MUTATION_METHODS) {
-    const originalArrayMethod = getOriginalArrayMethod(prop);
-    stylesheets[prop] = function arrayMutationWarningWrapper() {
-      reportTemplateViolation('stylesheets');
-      // @ts-ignore
-      return originalArrayMethod.apply(this, arguments);
-    };
-  }
+    // We can't handle users calling Array.prototype.slice.call(tmpl.stylesheets), but
+    // we can at least warn when they use the most common mutation methods.
+    for (const prop of ARRAY_MUTATION_METHODS) {
+        const originalArrayMethod = getOriginalArrayMethod(prop);
+        stylesheets[prop] = function arrayMutationWarningWrapper() {
+            reportTemplateViolation('stylesheets');
+            // @ts-ignore
+            return originalArrayMethod.apply(this, arguments);
+        };
+    }
 }
 // Warn if the user tries to mutate a stylesheet factory function, e.g.:
 // `stylesheet.$scoped$ = true`
 function warnOnStylesheetFunctionMutation(stylesheet) {
-  for (const prop of STYLESHEET_PROPS) {
-    let value = stylesheet[prop];
-    defineProperty(stylesheet, prop, {
-      enumerable: true,
-      configurable: true,
-      get() {
-        return value;
-      },
-      set(newValue) {
-        reportStylesheetViolation(prop);
-        value = newValue;
-      }
-    });
-  }
+    for (const prop of STYLESHEET_PROPS) {
+        let value = stylesheet[prop];
+        defineProperty(stylesheet, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return value;
+            },
+            set(newValue) {
+                reportStylesheetViolation(prop);
+                value = newValue;
+            },
+        });
+    }
 }
 // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
 function trackStylesheetsMutation(stylesheets) {
-  traverseStylesheets(stylesheets, subStylesheets => {
-    if (isArray$1(subStylesheets)) {
-      warnOnArrayMutation(subStylesheets);
-    } else {
-      warnOnStylesheetFunctionMutation(subStylesheets);
-    }
-  });
+    traverseStylesheets(stylesheets, (subStylesheets) => {
+        if (isArray$1(subStylesheets)) {
+            warnOnArrayMutation(subStylesheets);
+        }
+        else {
+            warnOnStylesheetFunctionMutation(subStylesheets);
+        }
+    });
 }
 // Deeply freeze the entire array (of arrays) of stylesheet factory functions
 function deepFreeze(stylesheets) {
-  traverseStylesheets(stylesheets, subStylesheets => {
-    freeze(subStylesheets);
-  });
+    traverseStylesheets(stylesheets, (subStylesheets) => {
+        freeze(subStylesheets);
+    });
 }
 // Deep-traverse an array (of arrays) of stylesheet factory functions, and call the callback for every array/function
 function traverseStylesheets(stylesheets, callback) {
-  callback(stylesheets);
-  for (let i = 0; i < stylesheets.length; i++) {
-    const stylesheet = stylesheets[i];
-    if (isArray$1(stylesheet)) {
-      traverseStylesheets(stylesheet, callback);
-    } else {
-      callback(stylesheet);
+    callback(stylesheets);
+    for (let i = 0; i < stylesheets.length; i++) {
+        const stylesheet = stylesheets[i];
+        if (isArray$1(stylesheet)) {
+            traverseStylesheets(stylesheet, callback);
+        }
+        else {
+            callback(stylesheet);
+        }
     }
-  }
 }
 function trackMutations(tmpl) {
-  if (!isUndefined$1(tmpl.stylesheets)) {
-    trackStylesheetsMutation(tmpl.stylesheets);
-  }
-  for (const prop of TEMPLATE_PROPS) {
-    let value = tmpl[prop];
-    defineProperty(tmpl, prop, {
-      enumerable: true,
-      configurable: true,
-      get() {
-        return value;
-      },
-      set(newValue) {
-        if (!mutationTrackingDisabled) {
-          reportTemplateViolation(prop);
-        }
-        value = newValue;
-      }
-    });
-  }
-  const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
-  defineProperty(tmpl, 'stylesheetTokens', {
-    enumerable: true,
-    configurable: true,
-    get: originalDescriptor.get,
-    set(value) {
-      reportTemplateViolation('stylesheetTokens');
-      // Avoid logging/reporting twice (for both stylesheetToken and stylesheetTokens)
-      mutationTrackingDisabled = true;
-      originalDescriptor.set.call(this, value);
-      mutationTrackingDisabled = false;
+    if (!isUndefined$1(tmpl.stylesheets)) {
+        trackStylesheetsMutation(tmpl.stylesheets);
+    }
+    for (const prop of TEMPLATE_PROPS) {
+        let value = tmpl[prop];
+        defineProperty(tmpl, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return value;
+            },
+            set(newValue) {
+                if (!mutationTrackingDisabled) {
+                    reportTemplateViolation(prop);
+                }
+                value = newValue;
+            },
+        });
     }
-  });
+    const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
+    defineProperty(tmpl, 'stylesheetTokens', {
+        enumerable: true,
+        configurable: true,
+        get: originalDescriptor.get,
+        set(value) {
+            reportTemplateViolation('stylesheetTokens');
+            // Avoid logging/reporting twice (for both stylesheetToken and stylesheetTokens)
+            mutationTrackingDisabled = true;
+            originalDescriptor.set.call(this, value);
+            mutationTrackingDisabled = false;
+        },
+    });
 }
 function addLegacyStylesheetTokensShim(tmpl) {
-  // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
-  // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
-  defineProperty(tmpl, 'stylesheetTokens', {
-    enumerable: true,
-    configurable: true,
-    get() {
-      const {
-        stylesheetToken
-      } = this;
-      if (isUndefined$1(stylesheetToken)) {
-        return stylesheetToken;
-      }
-      // Shim for the old `stylesheetTokens` property
-      // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
-      return {
-        hostAttribute: `${stylesheetToken}-host`,
-        shadowAttribute: stylesheetToken
-      };
-    },
-    set(value) {
-      // If the value is null or some other exotic object, you would be broken anyway in the past
-      // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
-      // However it may be undefined in newer versions of LWC, so we need to guard against that case.
-      this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
-    }
-  });
+    // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
+    // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
+    defineProperty(tmpl, 'stylesheetTokens', {
+        enumerable: true,
+        configurable: true,
+        get() {
+            const { stylesheetToken } = this;
+            if (isUndefined$1(stylesheetToken)) {
+                return stylesheetToken;
+            }
+            // Shim for the old `stylesheetTokens` property
+            // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
+            return {
+                hostAttribute: `${stylesheetToken}-host`,
+                shadowAttribute: stylesheetToken,
+            };
+        },
+        set(value) {
+            // If the value is null or some other exotic object, you would be broken anyway in the past
+            // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
+            // However it may be undefined in newer versions of LWC, so we need to guard against that case.
+            this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
+        },
+    });
 }
 function freezeTemplate(tmpl) {
-  // TODO [#2782]: remove this flag and delete the legacy behavior
-  if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
-    // Deep freeze the template
-    freeze(tmpl);
-    if (!isUndefined$1(tmpl.stylesheets)) {
-      deepFreeze(tmpl.stylesheets);
+    // TODO [#2782]: remove this flag and delete the legacy behavior
+    if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
+        // Deep freeze the template
+        freeze(tmpl);
+        if (!isUndefined$1(tmpl.stylesheets)) {
+            deepFreeze(tmpl.stylesheets);
+        }
     }
-  } else {
-    // template is not frozen - shim, report, and warn
-    // this shim should be applied in both dev and prod
-    addLegacyStylesheetTokensShim(tmpl);
-    // When ENABLE_FROZEN_TEMPLATE is false, we want to warn in dev mode whenever someone is mutating the template
-    if (process.env.NODE_ENV !== 'production') {
-      trackMutations(tmpl);
+    else {
+        // template is not frozen - shim, report, and warn
+        // this shim should be applied in both dev and prod
+        addLegacyStylesheetTokensShim(tmpl);
+        // When ENABLE_FROZEN_TEMPLATE is false, we want to warn in dev mode whenever someone is mutating the template
+        if (process.env.NODE_ENV !== 'production') {
+            trackMutations(tmpl);
+        }
     }
-  }
 }
-/* version: 2.36.0 */
+/* version: 2.37.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6540,7 +6267,7 @@ function unsupportedMethod(name) {
         throw new TypeError(`"${name}" is not supported in this environment`);
     };
 }
-function createElement(tagName, namespace) {
+function createElement$1(tagName, namespace) {
     return {
         [HostTypeKey]: HostNodeType.Element,
         tagName,
@@ -6791,7 +6518,7 @@ const assertInstanceOfHTMLElement = noop;
 const localRegistryRecord = new Map();
 function createUpgradableElementConstructor(tagName) {
     return function Ctor(upgradeCallback) {
-        const elm = createElement(tagName);
+        const elm = createElement$1(tagName);
         if (isFunction$1(upgradeCallback)) {
             upgradeCallback(elm); // nothing to do with the result for now
         }
@@ -6818,7 +6545,7 @@ const renderer = {
     remove,
     cloneNode,
     createFragment,
-    createElement,
+    createElement: createElement$1,
     createText,
     createComment,
     createCustomElement,
@@ -6959,11 +6686,29 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.36.0 */
+
+/*
+ * Copyright (c) 2018, 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
+ */
+/**
+ * This API is equivalent to the createElement function exposed by @lwc/engine-dom. It doesn't do anything on
+ * the server side, however, you may import it.
+ *
+ * The whole point of defining this and exporting it is so that you can import it in isomorphic code without
+ * an error being thrown by the import itself.
+ */
+function createElement() {
+    throw new Error('createElement is not supported in @lwc/engine-server, only @lwc/engine-dom.');
+}
+/* version: 2.37.1 */
 
 exports.LightningElement = LightningElement;
 exports.api = api$1;
 exports.createContextProvider = createContextProvider;
+exports.createElement = createElement;
 exports.freezeTemplate = freezeTemplate;
 exports.getComponentDef = getComponentDef;
 exports.isComponentConstructor = isComponentConstructor;