lwc 2.32.1 → 2.34.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.34.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.34.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -447,6 +368,8 @@ const features = {
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
     ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
     ENABLE_FROZEN_TEMPLATE: null,
+    DISABLE_ARIA_REFLECTION_POLYFILL: null,
+    ENABLE_PROGRAMMATIC_STYLESHEETS: null,
 };
 if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -500,7 +423,83 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.32.1 */
+/** version: 2.34.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.34.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.
@@ -817,6 +816,7 @@ function log(method, message, vm) {
     if (!isUndefined$1(vm)) {
         msg = `${msg}\n${getComponentStack(vm)}`;
     }
+    // In Jest tests, reduce the warning and error verbosity by not printing the callstack
     if (process.env.NODE_ENV === 'test') {
         /* eslint-disable-next-line no-console */
         console[method](msg);
@@ -886,6 +886,9 @@ function offsetPropertyErrorMessage(name) {
 // Global HTML Attributes & Properties
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+//
+// If you update this list, check for test files that recapitulate the same list. Searching the codebase
+// for e.g. "dropzone" should suffice.
 const globalHTMLProperties = assign(create(null), {
     accessKey: {
         attribute: 'accesskey',
@@ -1919,46 +1922,51 @@ function markLockerLiveObject(obj) {
  * for the Base Lightning Element, it also include the reactivity bit, so the standard property is reactive.
  */
 function createBridgeToElementDescriptor(propName, descriptor) {
-    const { get, set, enumerable, configurable } = descriptor;
-    if (!isFunction$1(get)) {
-        if (process.env.NODE_ENV !== 'production') {
-            assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
-        }
-        throw new TypeError();
+  const {
+    get,
+    set,
+    enumerable,
+    configurable
+  } = descriptor;
+  if (!isFunction$1(get)) {
+    if (process.env.NODE_ENV !== 'production') {
+      assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
     }
-    if (!isFunction$1(set)) {
+    throw new TypeError();
+  }
+  if (!isFunction$1(set)) {
+    if (process.env.NODE_ENV !== 'production') {
+      assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
+    }
+    throw new TypeError();
+  }
+  return {
+    enumerable,
+    configurable,
+    get() {
+      const vm = getAssociatedVM(this);
+      if (isBeingConstructed(vm)) {
         if (process.env.NODE_ENV !== 'production') {
-            assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
+          logError(`The value of property \`${propName}\` can't be read from the constructor because the owner component hasn't set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
         }
-        throw new TypeError();
+        return;
+      }
+      componentValueObserved(vm, propName);
+      return get.call(vm.elm);
+    },
+    set(newValue) {
+      const vm = getAssociatedVM(this);
+      if (process.env.NODE_ENV !== 'production') {
+        const vmBeingRendered = getVMBeingRendered();
+        assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
+        assert.invariant(!isUpdatingTemplate, `When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
+        assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
+      }
+      updateComponentValue(vm, propName, newValue);
+      return set.call(vm.elm, newValue);
     }
-    return {
-        enumerable,
-        configurable,
-        get() {
-            const vm = getAssociatedVM(this);
-            if (isBeingConstructed(vm)) {
-                if (process.env.NODE_ENV !== 'production') {
-                    logError(`The value of property \`${propName}\` can't be read from the constructor because the owner component hasn't set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
-                }
-                return;
-            }
-            componentValueObserved(vm, propName);
-            return get.call(vm.elm);
-        },
-        set(newValue) {
-            const vm = getAssociatedVM(this);
-            if (process.env.NODE_ENV !== 'production') {
-                const vmBeingRendered = getVMBeingRendered();
-                assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
-                assert.invariant(!isUpdatingTemplate, `When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
-                assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
-                assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
-            }
-            updateComponentValue(vm, propName, newValue);
-            return set.call(vm.elm, newValue);
-        },
-    };
+  };
 }
 const EMPTY_REFS = freeze(create(null));
 const refsCache = new WeakMap();
@@ -1968,345 +1976,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 +2871,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);
 
@@ -3353,6 +3481,9 @@ function updateStylesheetToken(vm, template) {
     stylesheets: newStylesheets,
     stylesheetToken: newStylesheetToken
   } = template;
+  const {
+    stylesheets: newVmStylesheets
+  } = vm;
   const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
   const {
     hasScopedStyles
@@ -3376,7 +3507,9 @@ function updateStylesheetToken(vm, template) {
   }
   // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-  if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+  const hasNewStylesheets = hasStyles(newStylesheets);
+  const hasNewVmStylesheets = hasStyles(newVmStylesheets);
+  if (hasNewStylesheets || hasNewVmStylesheets) {
     newToken = newStylesheetToken;
   }
   // Set the new styling token on the host element
@@ -3448,10 +3581,17 @@ function getStylesheetsContent(vm, template) {
     stylesheets,
     stylesheetToken
   } = template;
+  const {
+    stylesheets: vmStylesheets
+  } = vm;
   let content = [];
-  if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
+  if (hasStyles(stylesheets)) {
     content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
   }
+  // VM (component) stylesheets apply after template stylesheets
+  if (hasStyles(vmStylesheets)) {
+    ArrayPush$1.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+  }
   return content;
 }
 // It might be worth caching this to avoid doing the lookup repeatedly, but
@@ -3489,10 +3629,13 @@ function getStylesheetTokenHost(vnode) {
   const {
     template
   } = getComponentInternalDef(vnode.ctor);
+  const {
+    vm
+  } = vnode;
   const {
     stylesheetToken
   } = template;
-  return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
+  return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template, vm) ? makeHostToken(stylesheetToken) : null;
 }
 function getNearestNativeShadowComponent(vm) {
   const owner = getNearestShadowComponent(vm);
@@ -4105,6 +4248,28 @@ function patchCustomElement(n1, n2, parent, renderer) {
       // in fallback mode, the allocation will always set children to
       // empty and delegate the real allocation to the slot elements
       allocateChildren(n2, vm);
+      // Solves an edge case with slotted VFragments in native shadow mode.
+      //
+      // During allocation, in native shadow, slotted VFragment nodes are flattened and their text delimiters are removed
+      // to avoid interfering with native slot behavior. When this happens, if any of the fragments
+      // were not stable, the children must go through the dynamic diffing algo.
+      //
+      // If the new children (n2.children) contain no VFragments, but the previous children (n1.children) were dynamic,
+      // the new nodes must be marked dynamic so that all nodes are properly updated. The only indicator that the new
+      // nodes need to be dynamic comes from the previous children, so we check that to determine whether we need to
+      // mark the new children dynamic.
+      //
+      // Example:
+      // n1.children: [div, VFragment('', div, null, ''), div] => [div, div, null, div]; // marked dynamic
+      // n2.children: [div, null, div] => [div, null, div] // marked ???
+      const {
+        shadowMode,
+        renderMode
+      } = vm;
+      if (shadowMode == 0 /* ShadowMode.Native */ && renderMode !== 0 /* RenderMode.Light */ && hasDynamicChildren(n1.children)) {
+        // No-op if children has already been marked dynamic by 'allocateChildren()'.
+        markAsDynamicChildren(n2.children);
+      }
     }
     // in fallback mode, the children will be always empty, so, nothing
     // will happen, but in native, it does allocate the light dom
@@ -4297,7 +4462,6 @@ function allocateChildren(vnode, vm) {
   //
   // In case #2, we will always get a fresh VCustomElement.
   const children = vnode.aChildren || vnode.children;
-  vm.aChildren = children;
   const {
     renderMode,
     shadowMode
@@ -4310,15 +4474,61 @@ function allocateChildren(vnode, vm) {
       logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
     }
   }
+  // If any of the children being allocated are VFragments, we remove the text delimiters and flatten all immediate
+  // children VFragments to avoid them interfering with default slot behavior.
+  const allocatedChildren = flattenFragmentsInChildren(children);
+  vnode.children = allocatedChildren;
+  vm.aChildren = allocatedChildren;
   if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
     // slow path
-    allocateInSlot(vm, children, vnode.owner);
+    allocateInSlot(vm, allocatedChildren, vnode.owner);
     // save the allocated children in case this vnode is reused.
-    vnode.aChildren = children;
+    vnode.aChildren = allocatedChildren;
     // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
     vnode.children = EmptyArray;
   }
 }
+/**
+ * Flattens the contents of all VFragments in an array of VNodes, removes the text delimiters on those VFragments, and
+ * marks the resulting children array as dynamic. Uses a stack (array) to iteratively traverse the nested VFragments
+ * and avoid the perf overhead of creating/destroying throwaway arrays/objects in a recursive approach.
+ *
+ * With the delimiters removed, the contents are marked dynamic so they are diffed correctly.
+ *
+ * This function is used for slotted VFragments to avoid the text delimiters interfering with slotting functionality.
+ */
+function flattenFragmentsInChildren(children) {
+  const flattenedChildren = [];
+  // Initialize our stack with the direct children of the custom component and check whether we have a VFragment.
+  // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
+  const nodeStack = [];
+  let fragmentFound = false;
+  for (let i = children.length - 1; i > -1; i -= 1) {
+    const child = children[i];
+    ArrayPush$1.call(nodeStack, child);
+    fragmentFound = fragmentFound || !!(child && isVFragment(child));
+  }
+  if (!fragmentFound) {
+    return children;
+  }
+  let currentNode;
+  while (!isUndefined$1(currentNode = ArrayPop.call(nodeStack))) {
+    if (!isNull(currentNode) && isVFragment(currentNode)) {
+      const fChildren = currentNode.children;
+      // Ignore the start and end text node delimiters
+      for (let i = fChildren.length - 2; i > 0; i -= 1) {
+        ArrayPush$1.call(nodeStack, fChildren[i]);
+      }
+    } else {
+      ArrayPush$1.call(flattenedChildren, currentNode);
+    }
+  }
+  // We always mark the children as dynamic because nothing generates stable VFragments yet.
+  // If/when stable VFragments are generated by the compiler, this code should be updated to
+  // not mark dynamic if all flattened VFragments were stable.
+  markAsDynamicChildren(flattenedChildren);
+  return flattenedChildren;
+}
 function createViewModelHook(elm, vnode, renderer) {
   let vm = getAssociatedVMIfPresent(elm);
   // There is a possibility that a custom element is registered under tagName, in which case, the
@@ -4343,22 +4553,20 @@ function createViewModelHook(elm, vnode, renderer) {
   }
   return vm;
 }
-/**
- * Collects all slots into a SlotSet, traversing through VFragment Nodes
- */
-function collectSlots(vm, children, cmpSlotsMapping) {
+function allocateInSlot(vm, children, owner) {
   var _a, _b;
+  const {
+    cmpSlots: {
+      slotAssignments: oldSlotsMapping
+    }
+  } = vm;
+  const cmpSlotsMapping = create(null);
+  // Collect all slots into cmpSlotsMapping
   for (let i = 0, len = children.length; i < len; i += 1) {
     const vnode = children[i];
     if (isNull(vnode)) {
       continue;
     }
-    // Dive further iff the content is wrapped in a VFragment
-    if (isVFragment(vnode)) {
-      // Remove the text delimiter nodes to avoid overriding default slot content
-      collectSlots(vm, vnode.children.slice(1, -1), cmpSlotsMapping);
-      continue;
-    }
     let slotName = '';
     if (isVBaseElement(vnode)) {
       slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
@@ -4368,15 +4576,6 @@ function collectSlots(vm, children, cmpSlotsMapping) {
     const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
     ArrayPush$1.call(vnodes, vnode);
   }
-}
-function allocateInSlot(vm, children, owner) {
-  const {
-    cmpSlots: {
-      slotAssignments: oldSlotsMapping
-    }
-  } = vm;
-  const cmpSlotsMapping = create(null);
-  collectSlots(vm, children, cmpSlotsMapping);
   vm.cmpSlots = {
     owner,
     slotAssignments: cmpSlotsMapping
@@ -4407,14 +4606,14 @@ function allocateInSlot(vm, children, owner) {
   }
 }
 // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-const FromIteration = new WeakMap();
-// dynamic children means it was generated by an iteration
-// in a template, and will require a more complex diffing algo.
+const DynamicChildren = new WeakMap();
+// dynamic children means it was either generated by an iteration in a template
+// or part of an unstable fragment, and will require a more complex diffing algo.
 function markAsDynamicChildren(children) {
-  FromIteration.set(children, 1);
+  DynamicChildren.set(children, 1);
 }
 function hasDynamicChildren(children) {
-  return FromIteration.has(children);
+  return DynamicChildren.has(children);
 }
 function createKeyToOldIdx(children, beginIdx, endIdx) {
   const map = {};
@@ -5280,7 +5479,7 @@ function evaluateTemplate(vm, html) {
                 // Create a brand new template cache for the swapped templated.
                 context.tplCache = create(null);
                 // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
-                context.hasScopedStyles = computeHasScopedStyles(html);
+                context.hasScopedStyles = computeHasScopedStyles(html, vm);
                 // Update the scoping token on the host element.
                 updateStylesheetToken(vm, html);
                 // Evaluate, create stylesheet and cache the produced VNode for future
@@ -5323,9 +5522,8 @@ function evaluateTemplate(vm, html) {
     }
     return vnodes;
 }
-function computeHasScopedStyles(template) {
-    const { stylesheets } = template;
-    if (!isUndefined$1(stylesheets)) {
+function computeHasScopedStylesInStylesheets(stylesheets) {
+    if (hasStyles(stylesheets)) {
         for (let i = 0; i < stylesheets.length; i++) {
             if (isTrue(stylesheets[i][KEY__SCOPED_CSS])) {
                 return true;
@@ -5334,6 +5532,15 @@ function computeHasScopedStyles(template) {
     }
     return false;
 }
+function computeHasScopedStyles(template, vm) {
+    const { stylesheets } = template;
+    const vmStylesheets = !isUndefined$1(vm) ? vm.stylesheets : null;
+    return (computeHasScopedStylesInStylesheets(stylesheets) ||
+        computeHasScopedStylesInStylesheets(vmStylesheets));
+}
+function hasStyles(stylesheets) {
+    return !isUndefined$1(stylesheets) && !isNull(stylesheets) && stylesheets.length > 0;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5649,6 +5856,7 @@ function createVM(elm, ctor, renderer, options) {
     // Properties set right after VM creation.
     tro: null,
     shadowMode: null,
+    stylesheets: null,
     // Properties set by the LightningElement constructor.
     component: null,
     shadowRoot: null,
@@ -5661,6 +5869,7 @@ function createVM(elm, ctor, renderer, options) {
   if (process.env.NODE_ENV !== 'production') {
     vm.debugInfo = create(null);
   }
+  vm.stylesheets = computeStylesheets(vm, def.ctor);
   vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
   if (process.env.NODE_ENV !== 'production') {
@@ -5679,6 +5888,42 @@ function createVM(elm, ctor, renderer, options) {
   }
   return vm;
 }
+function validateComponentStylesheets(vm, stylesheets) {
+  let valid = true;
+  const validate = arrayOrStylesheet => {
+    if (isArray$1(arrayOrStylesheet)) {
+      for (let i = 0; i < arrayOrStylesheet.length; i++) {
+        validate(arrayOrStylesheet[i]);
+      }
+    } else if (!isFunction$1(arrayOrStylesheet)) {
+      // function assumed to be a stylesheet factory
+      valid = false;
+    }
+  };
+  if (!isArray$1(stylesheets)) {
+    valid = false;
+  } else {
+    validate(stylesheets);
+  }
+  return valid;
+}
+// Validate and flatten any stylesheets defined as `static stylesheets`
+function computeStylesheets(vm, ctor) {
+  if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
+    const {
+      stylesheets
+    } = ctor;
+    if (!isUndefined$1(stylesheets)) {
+      const valid = validateComponentStylesheets(vm, stylesheets);
+      if (valid) {
+        return flattenStylesheets(stylesheets);
+      } else if (process.env.NODE_ENV !== 'production') {
+        logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+      }
+    }
+  }
+  return null;
+}
 function computeShadowMode(vm, renderer) {
   const {
     def
@@ -6997,7 +7242,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.32.1 */
+/* version: 2.34.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7104,7 +7349,9 @@ const stylesheetCache = new Map();
 //
 // Test utilities
 //
-if (process.env.NODE_ENV === 'development') {
+// Only used in LWC's Karma tests
+// @ts-ignore
+if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
     // @ts-ignore
     window.__lwcResetGlobalStylesheets = () => {
         stylesheetCache.clear();
@@ -7970,7 +8217,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.32.1 */
+    /** version: 2.34.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8531,6 +8778,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.32.1 */
+/* version: 2.34.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 };