@lwc/engine-core 2.32.0 → 2.33.0

package/dist/engine-core.cjs.js

@@ -3,6 +3,7 @@
 
 var features = require('@lwc/features');
 var shared = require('@lwc/shared');
+var ariaReflection = require('@lwc/aria-reflection');
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -562,7 +563,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 = shared.getPropertyDescriptor(elm, 'nodeValue');
         const originalInnerHTMLDescriptor = shared.getPropertyDescriptor(elm, 'innerHTML');
@@ -1410,46 +1411,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 (!shared.isFunction(get)) {
-        if (process.env.NODE_ENV !== 'production') {
-            shared.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 (!shared.isFunction(get)) {
+    if (process.env.NODE_ENV !== 'production') {
+      shared.assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
     }
-    if (!shared.isFunction(set)) {
+    throw new TypeError();
+  }
+  if (!shared.isFunction(set)) {
+    if (process.env.NODE_ENV !== 'production') {
+      shared.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') {
-            shared.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();
+        shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
+        shared.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}`);
+        shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        shared.assert.invariant(!shared.isObject(newValue) || shared.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();
-                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
-                shared.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}`);
-                shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
-                shared.assert.invariant(!shared.isObject(newValue) || shared.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 = shared.freeze(shared.create(null));
 const refsCache = new WeakMap();
@@ -1459,345 +1465,444 @@ const refsCache = new WeakMap();
  **/
 // @ts-ignore
 const LightningElement = function () {
-    // This should be as performant as possible, while any initialization should be done lazily
-    if (shared.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 (shared.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;
+  shared.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, {
+    [shared.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;
-    shared.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();
+      shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+      shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+      shared.assert.invariant(shared.isFunction(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 !shared.isNull(getAttribute(elm, name));
+  },
+  hasAttributeNS(namespace, name) {
+    const vm = getAssociatedVM(this);
+    const {
+      elm,
+      renderer: {
+        getAttribute
+      }
+    } = vm;
+    return !shared.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') {
+      shared.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') {
+      shared.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
+      shared.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, {
-        [shared.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' && shared.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 (shared.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 (shared.isUndefined(refs)) {
+      refs = shared.create(null);
+      for (const key of shared.keys(refVNodes)) {
+        refs[key] = refVNodes[key].elm;
+      }
+      shared.freeze(refs);
+      refsCache.set(refVNodes, refs);
+    }
+    return refs;
+  },
+  // For backwards compat, we allow component authors to set `refs` as an expando
+  set refs(value) {
+    shared.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();
-            shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-            shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-            shared.assert.invariant(shared.isFunction(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 !shared.isNull(getAttribute(elm, name));
-    },
-    hasAttributeNS(namespace, name) {
-        const vm = getAssociatedVM(this);
-        const { elm, renderer: { getAttribute }, } = vm;
-        return !shared.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') {
-            shared.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') {
-            shared.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
-            shared.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' &&
-            shared.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 (shared.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 (shared.isUndefined(refs)) {
-            refs = shared.create(null);
-            for (const key of shared.keys(refVNodes)) {
-                refs[key] = refVNodes[key].elm;
-            }
-            shared.freeze(refs);
-            refsCache.set(refVNodes, refs);
-        }
-        return refs;
-    },
-    // For backwards compat, we allow component authors to set `refs` as an expando
-    set refs(value) {
-        shared.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 = shared.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
+  };
 }
 shared.defineProperties(LightningElement.prototype, queryAndChildGetterDescriptors);
 const lightningBasedDescriptors = shared.create(null);
 for (const propName in HTMLElementOriginalDescriptors) {
-    lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
+  lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
 }
 shared.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.
+  ariaReflection.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 (features.lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+  applyAriaReflectionToLightningElement();
+} else if (!process.env.IS_BROWSER) {
+  applyAriaReflectionToLightningElement();
+}
 shared.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) {
@@ -1816,60 +1921,6 @@ function createObservedFieldPropertyDescriptor(key) {
     };
 }
 
-/*
- * 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 DUMMY_ACCESSOR_REACTIVE_OBSERVER = {
-    observe(job) {
-        job();
-    },
-    reset() { },
-    link() { },
-};
-class AccessorReactiveObserver extends ReactiveObserver {
-    constructor(vm, set) {
-        super(() => {
-            if (shared.isFalse(this.debouncing)) {
-                this.debouncing = true;
-                addCallbackToNextTick(() => {
-                    if (shared.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 (shared.isTrue(vm.isDirty) && shared.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 process.env.IS_BROWSER
-        ? new AccessorReactiveObserver(vm, set)
-        : DUMMY_ACCESSOR_REACTIVE_OBSERVER;
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1877,90 +1928,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') {
-    shared.assert.fail(`@api decorator can only be used as a decorator function.`);
-  }
-  throw new Error();
+    if (process.env.NODE_ENV !== 'production') {
+        shared.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 \`${shared.toString(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();
-        shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-        shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(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 \`${shared.toString(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();
+                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
+                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+            }
+            vm.cmpProps[key] = newValue;
+            componentValueMutated(vm, key);
+        },
+        enumerable: true,
+        configurable: true,
+    };
 }
 function createPublicAccessorDescriptor(key, descriptor) {
-  const {
-    get,
-    set,
-    enumerable,
-    configurable
-  } = descriptor;
-  if (!shared.isFunction(get)) {
-    if (process.env.NODE_ENV !== 'production') {
-      shared.assert.invariant(shared.isFunction(get), `Invalid compiler output for public accessor ${shared.toString(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();
-        shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-        shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
-      }
-      if (set) {
-        if (features.lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
-          let ro = vm.oar[key];
-          if (shared.isUndefined(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 (!shared.isFunction(get)) {
+        if (process.env.NODE_ENV !== 'production') {
+            shared.assert.invariant(shared.isFunction(get), `Invalid compiler output for public accessor ${shared.toString(key)} decorated with @api`);
         }
-      } else if (process.env.NODE_ENV !== 'production') {
-        shared.assert.fail(`Invalid attempt to set a new value for property ${shared.toString(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();
+                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
+                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+            }
+            if (set) {
+                set.call(this, newValue);
+            }
+            else if (process.env.NODE_ENV !== 'production') {
+                shared.assert.fail(`Invalid attempt to set a new value for property ${shared.toString(key)} of ${vm} that does not has a setter decorated with @api.`);
+            }
+        },
+        enumerable,
+        configurable,
+    };
 }
 
 /*
@@ -2286,12 +2318,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 [];
@@ -2309,32 +2335,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
-    shared.defineProperty(tpl, 'stylesheetTokens', {
-        enumerable: true,
-        configurable: true,
-        get() {
-            const { stylesheetToken } = this;
-            if (shared.isUndefined(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 = shared.isUndefined(value) ? undefined : value.shadowAttribute;
-        },
-    });
     // chaining this method as a way to wrap existing
     // assignment of templates easily, without too much transformation
     return tpl;
@@ -2362,138 +2362,161 @@ function sanitizeAttribute(tagName, namespaceUri, attrName, attrValue) {
 const cachedGetterByKey = shared.create(null);
 const cachedSetterByKey = shared.create(null);
 function createGetter(key) {
-    let fn = cachedGetterByKey[key];
-    if (shared.isUndefined(fn)) {
-        fn = cachedGetterByKey[key] = function () {
-            const vm = getAssociatedVM(this);
-            const { getHook } = vm;
-            return getHook(vm.component, key);
-        };
-    }
-    return fn;
+  let fn = cachedGetterByKey[key];
+  if (shared.isUndefined(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 (shared.isUndefined(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 (shared.isUndefined(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, shared.ArraySlice.call(arguments));
-    };
+  return function () {
+    const vm = getAssociatedVM(this);
+    const {
+      callHook,
+      component
+    } = vm;
+    const fn = component[methodName];
+    return callHook(vm.component, fn, shared.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 (shared.isUndefined(propName)) {
-            if (!shared.isUndefined(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 (shared.isFunction(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
-        shared.setPrototypeOf(HTMLBridgeElement, SuperClass);
-        shared.setPrototypeOf(HTMLBridgeElement.prototype, SuperClass.prototype);
-        shared.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 = shared.create(null);
-    const { attributeChangedCallback: superAttributeChangedCallback } = SuperClass.prototype;
-    const { observedAttributes: superObservedAttributes = [] } = SuperClass;
-    const descriptors = shared.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[shared.htmlPropertyToAttribute(propName)] = propName;
-        descriptors[propName] = {
-            get: createGetter(propName),
-            set: createSetter(propName),
-            enumerable: true,
-            configurable: true,
-        };
+    const propName = attributeToPropMap[attrName];
+    if (shared.isUndefined(propName)) {
+      if (!shared.isUndefined(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 (shared.isFunction(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.
-    shared.defineProperty(HTMLBridgeElement, 'observedAttributes', {
-        get() {
-            return [...superObservedAttributes, ...shared.keys(attributeToPropMap)];
-        },
+    // prototype inheritance dance
+    shared.setPrototypeOf(HTMLBridgeElement, SuperClass);
+    shared.setPrototypeOf(HTMLBridgeElement.prototype, SuperClass.prototype);
+    shared.defineProperty(HTMLBridgeElement.prototype, 'constructor', {
+      writable: true,
+      configurable: true,
+      value: HTMLBridgeElement
     });
-    shared.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 = shared.create(null);
+  const {
+    attributeChangedCallback: superAttributeChangedCallback
+  } = SuperClass.prototype;
+  const {
+    observedAttributes: superObservedAttributes = []
+  } = SuperClass;
+  const descriptors = shared.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[shared.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.
+  shared.defineProperty(HTMLBridgeElement, 'observedAttributes', {
+    get() {
+      return [...superObservedAttributes, ...shared.keys(attributeToPropMap)];
+    }
+  });
+  shared.defineProperties(HTMLBridgeElement.prototype, descriptors);
+  return HTMLBridgeElement;
 }
 const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, shared.getOwnPropertyNames(HTMLElementOriginalDescriptors), []);
+if (process.env.IS_BROWSER) {
+  // 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 (features.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.
+    ariaReflection.applyAriaReflection(BaseBridgeElement.prototype);
+  }
+}
 shared.freeze(BaseBridgeElement);
 shared.seal(BaseBridgeElement.prototype);
 
@@ -3875,11 +3898,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
     });
   }
 }
@@ -4295,7 +4320,7 @@ function s(slotName, data, children, slotset) {
                     // undefined is for root components, but root components cannot accept slotted content
                     setVMBeingRendered(slotset.owner);
                     try {
-                        shared.ArrayPush.apply(newChildren, vnode.factory(data.slotData));
+                        shared.ArrayPush.call(newChildren, vnode.factory(data.slotData, data.key));
                     }
                     finally {
                         setVMBeingRendered(vmBeingRenderedInception);
@@ -5175,15 +5200,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);
@@ -5236,7 +5256,6 @@ function createVM(elm, ctor, renderer, options) {
     cmpSlots: {
       slotAssignments: shared.create(null)
     },
-    oar: shared.create(null),
     cmpTemplate: null,
     hydrated: Boolean(hydrated),
     renderMode: def.renderMode,
@@ -6420,94 +6439,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 shared.ArrayPop;
-        case 'push':
-            return shared.ArrayPush;
-        case 'shift':
-            return shared.ArrayShift;
-        case 'unshift':
-            return shared.ArrayUnshift;
-        case 'reverse':
-            return shared.ArrayReverse;
-        case 'sort':
-            return shared.ArraySort;
-        case 'fill':
-            return shared.ArrayFill;
-        case 'splice':
-            return shared.ArraySplice;
-        case 'copyWithin':
-            return shared.ArrayCopyWithin;
-    }
+  switch (prop) {
+    case 'pop':
+      return shared.ArrayPop;
+    case 'push':
+      return shared.ArrayPush;
+    case 'shift':
+      return shared.ArrayShift;
+    case 'unshift':
+      return shared.ArrayUnshift;
+    case 'reverse':
+      return shared.ArrayReverse;
+    case 'sort':
+      return shared.ArraySort;
+    case 'fill':
+      return shared.ArrayFill;
+    case 'splice':
+      return shared.ArraySplice;
+    case 'copyWithin':
+      return shared.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];
+    shared.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 (shared.isArray(subStylesheets)) {
+      warnOnArrayMutation(subStylesheets);
+    } else {
+      warnOnStylesheetFunctionMutation(subStylesheets);
     }
+  });
+}
+// Deeply freeze the entire array (of arrays) of stylesheet factory functions
+function deepFreeze(stylesheets) {
+  traverseStylesheets(stylesheets, subStylesheets => {
+    shared.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 (shared.isArray(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 (features.lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
+    // Deep freeze the template
+    shared.freeze(tmpl);
+    if (!shared.isUndefined(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
+    shared.defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get() {
+        const {
+          stylesheetToken
+        } = this;
+        if (shared.isUndefined(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 = shared.isUndefined(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 (!shared.isUndefined(tmpl.stylesheets)) {
-            warnOnArrayMutation(tmpl.stylesheets);
-        }
-        for (const prop of TEMPLATE_PROPS) {
-            let value = tmpl[prop];
-            shared.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 = shared.getOwnPropertyDescriptor(tmpl, 'stylesheetTokens');
-        shared.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;
-            },
+      if (!shared.isUndefined(tmpl.stylesheets)) {
+        warnOnStylesheetsMutation(tmpl.stylesheets);
+      }
+      for (const prop of TEMPLATE_PROPS) {
+        let value = tmpl[prop];
+        shared.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 = shared.getOwnPropertyDescriptor(tmpl, 'stylesheetTokens');
+      shared.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;
+        }
+      });
     }
+  }
 }
 
 /*
@@ -6570,4 +6661,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.32.0 */
+/* version: 2.33.0 */