lwc 2.32.0 → 2.33.0

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

@@ -118,6 +118,9 @@ function getPropertyDescriptor(o, p) {
  * 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',
@@ -341,91 +344,9 @@ function htmlAttributeToProperty(attrName) {
  * 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.
@@ -439,19 +360,15 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
  */
 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) });
@@ -505,7 +422,83 @@ function setFeatureFlagForTest(name, value) {
         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.
@@ -1076,7 +1069,7 @@ function patchElementWithRestrictions(elm, options) {
         }),
     };
     // 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');
@@ -1924,46 +1917,51 @@ function markLockerLiveObject(obj) {
  * 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();
@@ -1973,345 +1971,442 @@ 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;
+  // 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) {
@@ -2329,45 +2424,6 @@ function createObservedFieldPropertyDescriptor(key) {
         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.
@@ -2376,90 +2432,71 @@ function createAccessorReactiveObserver(vm, set) {
  * 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,
+    };
 }
 
 /*
@@ -2785,12 +2822,6 @@ function checkVersionMismatch(func, type) {
     }
 }
 
-/*
- * 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 [];
@@ -2808,32 +2839,6 @@ function registerTemplate(tpl) {
         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;
@@ -2861,138 +2866,161 @@ 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;
-    };
-}
-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);
 
@@ -4370,11 +4398,13 @@ function applyDomManual(elm, vnode) {
 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
     });
   }
 }
@@ -4790,7 +4820,7 @@ function s(slotName, data, children, slotset) {
                     // 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);
@@ -5670,15 +5700,10 @@ function resetComponentStateWhenRemoved(vm) {
   } = 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);
@@ -5731,7 +5756,6 @@ function createVM(elm, ctor, renderer, options) {
     cmpSlots: {
       slotAssignments: create(null)
     },
-    oar: create(null),
     cmpTemplate: null,
     hydrated: Boolean(hydrated),
     renderMode: def.renderMode,
@@ -6912,94 +6936,166 @@ function setHooks(hooks) {
 // 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;
+        }
+      });
     }
+  }
 }
 
 /*
@@ -7024,7 +7120,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.32.0 */
+/* version: 2.33.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7997,7 +8093,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.32.0 */
+    /** version: 2.33.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8558,6 +8654,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.32.0 */
+/* version: 2.33.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };