lwc 2.32.1 → 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.1";
+const LWC_VERSION = "2.33.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.32.1 */
-
-/**
- * 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.1 */
+/** version: 2.33.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -447,6 +368,7 @@ const features = {
     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) });
@@ -500,7 +422,83 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.32.1 */
+/** 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.
@@ -1919,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.`);
+    }
+    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.`);
     }
-    if (!isFunction$1(set)) {
+    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();
@@ -1968,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) {
@@ -2766,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);
 
@@ -6997,7 +7120,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.32.1 */
+/* version: 2.33.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7970,7 +8093,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.32.1 */
+    /** version: 2.33.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8531,6 +8654,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.32.1 */
+/* 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 };