@lwc/engine-core 2.32.1 → 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.
@@ -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) {
@@ -2257,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);
 
@@ -6533,4 +6661,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.32.1 */
+/* version: 2.33.0 */