lwc 2.32.0 → 2.33.0

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

@@ -121,6 +121,9 @@ var LWC = (function (exports) {
    * The above list of 46 aria attributes is consistent with the following resources:
    * https://github.com/w3c/aria/pull/708/files#diff-eacf331f0ffc35d4b482f1d15a887d3bR11060
    * https://wicg.github.io/aom/spec/aria-reflection.html
+   *
+   * NOTE: If you update this list, please update test files that implicitly reference this list!
+   * Searching the codebase for `aria-flowto` and `ariaFlowTo` should be good enough to find all usages.
    */
   const AriaPropertyNames = [
       'ariaActiveDescendant',
@@ -344,91 +347,9 @@ var LWC = (function (exports) {
    * 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.32.0";
+  const LWC_VERSION = "2.33.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.32.0 */
-
-  /**
-   * Copyright (C) 2018 salesforce.com, inc.
-   */
-
-  /*
-   * 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
-   */
-  function detect(propName) {
-      return getOwnPropertyDescriptor$1(Element.prototype, propName) === undefined;
-  }
-
-  /*
-   * 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
-   */
-  const nodeToAriaPropertyValuesMap = new WeakMap();
-  function getAriaPropertyMap(elm) {
-      let map = nodeToAriaPropertyValuesMap.get(elm);
-      if (map === undefined) {
-          map = {};
-          nodeToAriaPropertyValuesMap.set(elm, map);
-      }
-      return map;
-  }
-  function getNormalizedAriaPropertyValue(value) {
-      return value == null ? null : String(value);
-  }
-  function createAriaPropertyPropertyDescriptor(propName, attrName) {
-      return {
-          get() {
-              const map = getAriaPropertyMap(this);
-              if (hasOwnProperty$1.call(map, propName)) {
-                  return map[propName];
-              }
-              // otherwise just reflect what's in the attribute
-              return this.hasAttribute(attrName) ? this.getAttribute(attrName) : null;
-          },
-          set(newValue) {
-              const normalizedValue = getNormalizedAriaPropertyValue(newValue);
-              const map = getAriaPropertyMap(this);
-              map[propName] = normalizedValue;
-              // reflect into the corresponding attribute
-              if (newValue === null) {
-                  this.removeAttribute(attrName);
-              }
-              else {
-                  this.setAttribute(attrName, newValue);
-              }
-          },
-          configurable: true,
-          enumerable: true,
-      };
-  }
-  function patch$1(propName) {
-      // Typescript is inferring the wrong function type for this particular
-      // overloaded method: https://github.com/Microsoft/TypeScript/issues/27972
-      // @ts-ignore type-mismatch
-      const attrName = AriaPropNameToAttrNameMap[propName];
-      const descriptor = createAriaPropertyPropertyDescriptor(propName, attrName);
-      Object.defineProperty(Element.prototype, propName, descriptor);
-  }
-
-  /*
-   * 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
-   */
-  const ElementPrototypeAriaPropertyNames = keys(AriaPropNameToAttrNameMap);
-  for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1) {
-      const propName = ElementPrototypeAriaPropertyNames[i];
-      if (detect(propName)) {
-          patch$1(propName);
-      }
-  }
-  /** version: 2.32.0 */
+  /** version: 2.33.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -442,19 +363,15 @@ var LWC = (function (exports) {
    */
   const features = {
       DUMMY_TEST_FLAG: null,
-      ENABLE_ELEMENT_PATCH: null,
       ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
-      ENABLE_HTML_COLLECTIONS_PATCH: null,
-      ENABLE_INNER_OUTER_TEXT_PATCH: null,
       ENABLE_MIXED_SHADOW_MODE: null,
       ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
-      ENABLE_NODE_LIST_PATCH: null,
-      ENABLE_NODE_PATCH: null,
-      ENABLE_REACTIVE_SETTER: null,
       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,
   };
   if (!_globalThis.lwcRuntimeFlags) {
       Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -508,7 +425,83 @@ var LWC = (function (exports) {
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.32.0 */
+  /** version: 2.33.0 */
+
+  /**
+   * Copyright (C) 2018 salesforce.com, inc.
+   */
+
+  /*
+   * 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
+   */
+  function detect(propName, prototype) {
+      return isUndefined$1(getOwnPropertyDescriptor$1(prototype, propName));
+  }
+
+  /*
+   * 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
+   */
+  function createAriaPropertyPropertyDescriptor(attrName) {
+      // Note that we need to call this.{get,set,has,remove}Attribute rather than dereferencing
+      // from Element.prototype, because these methods are overridden in LightningElement.
+      return {
+          get() {
+              // reflect what's in the attribute
+              return this.hasAttribute(attrName) ? this.getAttribute(attrName) : null;
+          },
+          set(newValue) {
+              // reflect into the corresponding attribute
+              if (isNull(newValue)) {
+                  this.removeAttribute(attrName);
+              }
+              else {
+                  this.setAttribute(attrName, newValue);
+              }
+          },
+          configurable: true,
+          enumerable: true,
+      };
+  }
+  function patch$1(propName, prototype) {
+      const attrName = AriaPropNameToAttrNameMap[propName];
+      const descriptor = createAriaPropertyPropertyDescriptor(attrName);
+      defineProperty(prototype, propName, descriptor);
+  }
+
+  /*
+   * 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
+   */
+  function applyAriaReflection(prototype = Element.prototype) {
+      const ElementPrototypeAriaPropertyNames = keys(AriaPropNameToAttrNameMap);
+      for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1) {
+          const propName = ElementPrototypeAriaPropertyNames[i];
+          if (detect(propName, prototype)) {
+              patch$1(propName, prototype);
+          }
+      }
+  }
+  /** version: 2.33.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
+   */
+  if (!lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+    // If DISABLE_ARIA_REFLECTION_POLYFILL is false, then we need to apply the ARIA reflection polyfill globally,
+    // i.e. to the global Element.prototype
+    applyAriaReflection();
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1079,7 +1072,7 @@ var LWC = (function (exports) {
           }),
       };
       // Apply extra restriction related to DOM manipulation if the element is not a portal.
-      if (!options.isLight && !options.isPortal) {
+      if (!options.isLight && options.isSynthetic && !options.isPortal) {
           const { appendChild, insertBefore, removeChild, replaceChild } = elm;
           const originalNodeValueDescriptor = getPropertyDescriptor(elm, 'nodeValue');
           const originalInnerHTMLDescriptor = getPropertyDescriptor(elm, 'innerHTML');
@@ -1927,46 +1920,51 @@ var LWC = (function (exports) {
    * 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();
+    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.`);
       }
-      if (!isFunction$1(set)) {
+      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.`);
+      }
+      throw new TypeError();
+    }
+    return {
+      enumerable,
+      configurable,
+      get() {
+        const vm = getAssociatedVM(this);
+        if (isBeingConstructed(vm)) {
           if (process.env.NODE_ENV !== 'production') {
-              assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
+            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);
           }
-          throw new TypeError();
+          return;
+        }
+        componentValueObserved(vm, propName);
+        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);
       }
-      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;
-              }
-              componentValueObserved(vm, propName);
-              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 EMPTY_REFS = freeze(create(null));
   const refsCache = new WeakMap();
@@ -1976,345 +1974,442 @@ var LWC = (function (exports) {
    **/
   // @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;
+    // 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;
+    }
+    markLockerLiveObject(this);
+    // 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 { 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;
-      }
-      markLockerLiveObject(this);
-      // 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);
+        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()');
       }
-      else {
-          vm.renderRoot = elm;
+      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;
       }
-      // Adding extra guard rails in DEV mode.
       if (process.env.NODE_ENV !== 'production') {
-          patchCustomElementWithRestrictions(elm);
-          patchComponentWithRestrictions(component);
+        warnIfInvokedDuringConstruction(vm, 'refs');
       }
-      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,
+      const {
+        refVNodes,
+        hasRefVNodes,
+        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 it is not sufficient to just check if `refVNodes` is null or empty,
+      // because a template may have `lwc:ref` defined within a falsy `if:true` block.
+      if (!hasRefVNodes) {
+        return;
+      }
+      // For templates that are using `lwc:ref`, if there are no refs currently available
+      // (e.g. refs inside of a falsy `if:true` block), we return an empty object.
+      if (isNull(refVNodes)) {
+        return EMPTY_REFS;
+      }
+      // 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
       });
-      vm.shadowRoot = shadowRoot;
-      associateVM(shadowRoot, vm);
+    },
+    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') {
-          patchShadowRootWithRestrictions(shadowRoot);
+        warnIfInvokedDuringConstruction(vm, 'children');
       }
-      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.getChildren(vm.elm);
+    },
+    get childNodes() {
+      const vm = getAssociatedVM(this);
+      const renderer = vm.renderer;
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfInvokedDuringConstruction(vm, 'childNodes');
       }
-  }
-  // @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, hasRefVNodes, 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 it is not sufficient to just check if `refVNodes` is null or empty,
-          // because a template may have `lwc:ref` defined within a falsy `if:true` block.
-          if (!hasRefVNodes) {
-              return;
-          }
-          // For templates that are using `lwc:ref`, if there are no refs currently available
-          // (e.g. refs inside of a falsy `if:true` block), we return an empty object.
-          if (isNull(refVNodes)) {
-              return EMPTY_REFS;
-          }
-          // 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}]`;
-      },
+      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();
+  }
   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) {
@@ -2332,45 +2427,6 @@ var LWC = (function (exports) {
           configurable: true,
       };
   }
-  class AccessorReactiveObserver extends ReactiveObserver {
-      constructor(vm, set) {
-          super(() => {
-              if (isFalse(this.debouncing)) {
-                  this.debouncing = true;
-                  addCallbackToNextTick(() => {
-                      if (isTrue(this.debouncing)) {
-                          const { value } = this;
-                          const { isDirty: dirtyStateBeforeSetterCall, component, idx } = vm;
-                          set.call(component, value);
-                          // de-bouncing after the call to the original setter to prevent
-                          // infinity loop if the setter itself is mutating things that
-                          // were accessed during the previous invocation.
-                          this.debouncing = false;
-                          if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
-                              // immediate rehydration due to a setter driven mutation, otherwise
-                              // the component will get rendered on the second tick, which it is not
-                              // desirable.
-                              rerenderVM(vm);
-                          }
-                      }
-                  });
-              }
-          });
-          this.debouncing = false;
-      }
-      reset(value) {
-          super.reset();
-          this.debouncing = false;
-          if (arguments.length > 0) {
-              this.value = value;
-          }
-      }
-  }
-  function createAccessorReactiveObserver(vm, set) {
-      // On the server side, we don't need mutation tracking. Skipping it improves performance.
-      return new AccessorReactiveObserver(vm, set)
-          ;
-  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2379,90 +2435,71 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   function api$1() {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.fail(`@api decorator can only be used as a decorator function.`);
-    }
-    throw new Error();
+      if (process.env.NODE_ENV !== 'production') {
+          assert.fail(`@api decorator can only be used as a decorator function.`);
+      }
+      throw new Error();
   }
   function createPublicPropertyDescriptor(key) {
-    return {
-      get() {
-        const vm = getAssociatedVM(this);
-        if (isBeingConstructed(vm)) {
-          if (process.env.NODE_ENV !== 'production') {
-            logError(`Can’t read the value of property \`${toString$1(key)}\` 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;
-        }
-        componentValueObserved(vm, key);
-        return vm.cmpProps[key];
-      },
-      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}.${toString$1(key)}`);
-          assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
-        }
-        vm.cmpProps[key] = newValue;
-        componentValueMutated(vm, key);
-      },
-      enumerable: true,
-      configurable: true
-    };
+      return {
+          get() {
+              const vm = getAssociatedVM(this);
+              if (isBeingConstructed(vm)) {
+                  if (process.env.NODE_ENV !== 'production') {
+                      logError(`Can’t read the value of property \`${toString$1(key)}\` 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;
+              }
+              componentValueObserved(vm, key);
+              return vm.cmpProps[key];
+          },
+          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}.${toString$1(key)}`);
+                  assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+              }
+              vm.cmpProps[key] = newValue;
+              componentValueMutated(vm, key);
+          },
+          enumerable: true,
+          configurable: true,
+      };
   }
   function createPublicAccessorDescriptor(key, descriptor) {
-    const {
-      get,
-      set,
-      enumerable,
-      configurable
-    } = descriptor;
-    if (!isFunction$1(get)) {
-      if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(isFunction$1(get), `Invalid compiler output for public accessor ${toString$1(key)} decorated with @api`);
-      }
-      throw new Error();
-    }
-    return {
-      get() {
-        if (process.env.NODE_ENV !== 'production') {
-          // Assert that the this value is an actual Component with an associated VM.
-          getAssociatedVM(this);
-        }
-        return get.call(this);
-      },
-      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}.${toString$1(key)}`);
-          assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
-        }
-        if (set) {
-          if (lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
-            let ro = vm.oar[key];
-            if (isUndefined$1(ro)) {
-              ro = vm.oar[key] = createAccessorReactiveObserver(vm, set);
-            }
-            // every time we invoke this setter from outside (through this wrapper setter)
-            // we should reset the value and then debounce just in case there is a pending
-            // invocation the next tick that is not longer relevant since the value is changing
-            // from outside.
-            ro.reset(newValue);
-            ro.observe(() => {
-              set.call(this, newValue);
-            });
-          } else {
-            set.call(this, newValue);
+      const { get, set, enumerable, configurable } = descriptor;
+      if (!isFunction$1(get)) {
+          if (process.env.NODE_ENV !== 'production') {
+              assert.invariant(isFunction$1(get), `Invalid compiler output for public accessor ${toString$1(key)} decorated with @api`);
           }
-        } else if (process.env.NODE_ENV !== 'production') {
-          assert.fail(`Invalid attempt to set a new value for property ${toString$1(key)} of ${vm} that does not has a setter decorated with @api.`);
-        }
-      },
-      enumerable,
-      configurable
-    };
+          throw new Error();
+      }
+      return {
+          get() {
+              if (process.env.NODE_ENV !== 'production') {
+                  // Assert that the this value is an actual Component with an associated VM.
+                  getAssociatedVM(this);
+              }
+              return get.call(this);
+          },
+          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}.${toString$1(key)}`);
+                  assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+              }
+              if (set) {
+                  set.call(this, newValue);
+              }
+              else if (process.env.NODE_ENV !== 'production') {
+                  assert.fail(`Invalid attempt to set a new value for property ${toString$1(key)} of ${vm} that does not has a setter decorated with @api.`);
+              }
+          },
+          enumerable,
+          configurable,
+      };
   }
 
   /*
@@ -2788,12 +2825,6 @@ var LWC = (function (exports) {
       }
   }
 
-  /*
-   * 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
-   */
   const signedTemplateSet = new Set();
   function defaultEmptyTemplate() {
       return [];
@@ -2811,32 +2842,6 @@ var LWC = (function (exports) {
           checkVersionMismatch(tpl, 'template');
       }
       signedTemplateSet.add(tpl);
-      // FIXME[@W-10950976]: the template object should be frozen, and it should not be possible to set
-      // the stylesheets or stylesheetToken(s). For backwards compat, though, we shim stylesheetTokens
-      // on top of stylesheetToken for anyone who is accessing the old internal API.
-      // Details: https://salesforce.quip.com/v1rmAFu2cKAr
-      defineProperty(tpl, '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;
-          },
-      });
       // chaining this method as a way to wrap existing
       // assignment of templates easily, without too much transformation
       return tpl;
@@ -2864,138 +2869,161 @@ var LWC = (function (exports) {
   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;
-      };
-  }
-  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');
-          };
-          // prototype inheritance dance
-          setPrototypeOf(HTMLBridgeElement, SuperClass);
-          setPrototypeOf(HTMLBridgeElement.prototype, SuperClass.prototype);
-          defineProperty(HTMLBridgeElement.prototype, 'constructor', {
-              writable: true,
-              configurable: true,
-              value: HTMLBridgeElement,
-          });
+    return function attributeChangedCallback(attrName, oldValue, newValue) {
+      if (oldValue === newValue) {
+        // Ignore same values.
+        return;
       }
-      // 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,
-          };
+      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;
       }
-      // 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,
-          };
+      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;
       }
-      // 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),
+      // 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');
       };
-      // Specify attributes for which we want to reflect changes back to their corresponding
-      // properties via attributeChangedCallback.
-      defineProperty(HTMLBridgeElement, 'observedAttributes', {
-          get() {
-              return [...superObservedAttributes, ...keys(attributeToPropMap)];
-          },
+      // prototype inheritance dance
+      setPrototypeOf(HTMLBridgeElement, SuperClass);
+      setPrototypeOf(HTMLBridgeElement.prototype, SuperClass.prototype);
+      defineProperty(HTMLBridgeElement.prototype, 'constructor', {
+        writable: true,
+        configurable: true,
+        value: HTMLBridgeElement
       });
-      defineProperties(HTMLBridgeElement.prototype, descriptors);
-      return 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)
+    };
+    // 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;
   }
   const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+  {
+    // This ARIA reflection only really makes sense in the browser. On the server, there is no `renderedCallback()`,
+    // so you cannot do e.g. `this.template.querySelector('x-child').ariaBusy = 'true'`. So we don't need to expose
+    // ARIA props outside the LightningElement
+    if (lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+      // If ARIA reflection is not applied globally to Element.prototype, apply it to HTMLBridgeElement.prototype.
+      // This allows `elm.aria*` property accessors to work from outside a component, and to reflect `aria-*` attrs.
+      // This is especially important because the template compiler compiles aria-* attrs on components to aria* props
+      //
+      // Also note that we apply this to BaseBridgeElement.prototype to avoid excessively redefining property
+      // accessors inside the HTMLBridgeElementFactory.
+      applyAriaReflection(BaseBridgeElement.prototype);
+    }
+  }
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
 
@@ -4373,11 +4401,13 @@ var LWC = (function (exports) {
   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
+        isLight,
+        isSynthetic
       });
     }
   }
@@ -4793,7 +4823,7 @@ var LWC = (function (exports) {
                       // undefined is for root components, but root components cannot accept slotted content
                       setVMBeingRendered(slotset.owner);
                       try {
-                          ArrayPush$1.apply(newChildren, vnode.factory(data.slotData));
+                          ArrayPush$1.call(newChildren, vnode.factory(data.slotData, data.key));
                       }
                       finally {
                           setVMBeingRendered(vmBeingRenderedInception);
@@ -5673,15 +5703,10 @@ var LWC = (function (exports) {
     } = vm;
     if (state !== 2 /* VMState.disconnected */) {
       const {
-        oar,
         tro
       } = vm;
       // Making sure that any observing record will not trigger the rehydrated on this vm
       tro.reset();
-      // Making sure that any observing accessor record will not trigger the setter to be reinvoked
-      for (const key in oar) {
-        oar[key].reset();
-      }
       runDisconnectedCallback(vm);
       // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
       runChildNodesDisconnectedCallback(vm);
@@ -5734,7 +5759,6 @@ var LWC = (function (exports) {
       cmpSlots: {
         slotAssignments: create(null)
       },
-      oar: create(null),
       cmpTemplate: null,
       hydrated: Boolean(hydrated),
       renderMode: def.renderMode,
@@ -6915,94 +6939,166 @@ var LWC = (function (exports) {
   // See @lwc/engine-core/src/framework/template.ts
   const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
   // 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'];
+  // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
+  const STYLESHEET_FUNCTION_EXPANDOS = [
+  // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
+  '$scoped$'];
   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;
+    }
   }
   let mutationWarningsSilenced = false;
-  // Warn if the user tries to mutate tmpl.stylesheets, e.g.:
+  // 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() {
-              logError(`Mutating the "stylesheets" array on a template function ` +
-                  `is deprecated and may be removed in a future version of LWC.`);
-              // @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() {
+        logError(`Mutating the "stylesheets" array on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
+        // @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) {
+    // We could warn on other properties, but in practice only certain expandos are meaningful to LWC at runtime
+    for (const prop of STYLESHEET_FUNCTION_EXPANDOS) {
+      let value = stylesheet[prop];
+      defineProperty(stylesheet, prop, {
+        enumerable: true,
+        configurable: true,
+        get() {
+          return value;
+        },
+        set(newValue) {
+          logError(`Dynamically setting the "${prop}" property on a stylesheet function ` + `is deprecated and may be removed in a future version of LWC.`);
+          value = newValue;
+        }
+      });
+    }
+  }
+  // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
+  function warnOnStylesheetsMutation(stylesheets) {
+    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);
+    });
+  }
+  // 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);
       }
+    }
   }
-  // TODO [#2782]: eventually freezeTemplate() will _actually_ freeze the tmpl object. Today it
-  // just warns on mutation.
   function freezeTemplate(tmpl) {
-      if (process.env.NODE_ENV !== 'production') {
-          if (!isUndefined$1(tmpl.stylesheets)) {
-              warnOnArrayMutation(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 (!mutationWarningsSilenced) {
-                          logError(`Dynamically setting the "${prop}" property on a template function ` +
-                              `is deprecated and may be removed in a future version of LWC.`);
-                      }
-                      value = newValue;
-                  },
-              });
+    if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
+      // Deep freeze the template
+      freeze(tmpl);
+      if (!isUndefined$1(tmpl.stylesheets)) {
+        deepFreeze(tmpl.stylesheets);
+      }
+    } else {
+      // TODO [#2782]: remove this flag and delete the legacy behavior
+      // 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;
           }
-          const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
-          defineProperty(tmpl, 'stylesheetTokens', {
-              enumerable: true,
-              configurable: true,
-              get: originalDescriptor.get,
-              set(value) {
-                  logError(`Dynamically setting the "stylesheetTokens" property on a template function ` +
-                      `is deprecated and may be removed in a future version of LWC.`);
-                  // Avoid logging twice (for both stylesheetToken and stylesheetTokens)
-                  mutationWarningsSilenced = true;
-                  originalDescriptor.set.call(this, value);
-                  mutationWarningsSilenced = false;
-              },
+          // 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, warn in dev mode whenever someone is mutating the template
+      if (process.env.NODE_ENV !== 'production') {
+        if (!isUndefined$1(tmpl.stylesheets)) {
+          warnOnStylesheetsMutation(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 (!mutationWarningsSilenced) {
+                logError(`Dynamically setting the "${prop}" property on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
+              }
+              value = newValue;
+            }
           });
+        }
+        const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
+        defineProperty(tmpl, 'stylesheetTokens', {
+          enumerable: true,
+          configurable: true,
+          get: originalDescriptor.get,
+          set(value) {
+            logError(`Dynamically setting the "stylesheetTokens" property on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
+            // Avoid logging twice (for both stylesheetToken and stylesheetTokens)
+            mutationWarningsSilenced = true;
+            originalDescriptor.set.call(this, value);
+            mutationWarningsSilenced = false;
+          }
+        });
       }
+    }
   }
 
   /*
@@ -7027,7 +7123,7 @@ var LWC = (function (exports) {
       }
       return ctor;
   }
-  /* version: 2.32.0 */
+  /* version: 2.33.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8000,7 +8096,7 @@ var LWC = (function (exports) {
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.32.0 */
+      /** version: 2.33.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8561,7 +8657,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.32.0 */
+  /* version: 2.33.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;