lwc 2.33.0 → 2.35.0

package/dist/engine-dom/umd/es5/engine-dom.js

@@ -15,11 +15,6 @@
   function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
   function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
   function _getPrototypeOf2(o) { _getPrototypeOf2 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf2(o); }
-  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-  function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
   function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
   function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
   function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -28,6 +23,11 @@
   function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
   function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
   function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+  function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
   function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -109,6 +109,7 @@
   var _String$prototype = String.prototype,
     StringCharCodeAt = _String$prototype.charCodeAt,
     StringReplace = _String$prototype.replace,
+    StringSplit = _String$prototype.split,
     StringSlice = _String$prototype.slice,
     StringToLowerCase = _String$prototype.toLowerCase;
   function isUndefined$1(obj) {
@@ -204,6 +205,9 @@
     }(),
     AriaAttrNameToPropNameMap = _ref.AriaAttrNameToPropNameMap,
     AriaPropNameToAttrNameMap = _ref.AriaPropNameToAttrNameMap;
+  // These attributes take either an ID or a list of IDs as values.
+  // This includes aria-* attributes as well as the special non-ARIA "for" attribute
+  var ID_REFERENCING_ATTRIBUTES_SET = new Set(['aria-activedescendant', 'aria-controls', 'aria-describedby', 'aria-details', 'aria-errormessage', 'aria-flowto', 'aria-labelledby', 'aria-owns', 'for']);
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -257,6 +261,8 @@
   var KEY__SHADOW_TOKEN = '$shadowToken$';
   var KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
   var KEY__SCOPED_CSS = '$scoped$';
+  var KEY__NATIVE_GET_ELEMENT_BY_ID = '$nativeGetElementById$';
+  var KEY__NATIVE_QUERY_SELECTOR_ALL = '$nativeQuerySelectorAll$';
   var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   var XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
@@ -352,9 +358,9 @@
    * 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
-  var LWC_VERSION = "2.33.0";
+  var LWC_VERSION = "2.35.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.33.0 */
+  /** version: 2.35.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -376,7 +382,8 @@
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
     ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
     ENABLE_FROZEN_TEMPLATE: null,
-    DISABLE_ARIA_REFLECTION_POLYFILL: null
+    DISABLE_ARIA_REFLECTION_POLYFILL: null,
+    ENABLE_PROGRAMMATIC_STYLESHEETS: null
   };
   if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', {
@@ -432,7 +439,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.33.0 */
+  /** version: 2.35.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -496,7 +503,7 @@
       }
     }
   }
-  /** version: 2.33.0 */
+  /** version: 2.35.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -564,113 +571,173 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  var nextTickCallbackQueue = [];
-  var SPACE_CHAR = 32;
-  var EmptyObject = seal(create(null));
-  var EmptyArray = seal([]);
-  function flushCallbackQueue() {
-    if (process.env.NODE_ENV !== 'production') {
-      if (nextTickCallbackQueue.length === 0) {
-        throw new Error("Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.");
+  /** Callbacks to invoke when reporting is enabled **/
+  var onReportingEnabledCallbacks = [];
+  /** The currently assigned reporting dispatcher. */
+  var currentDispatcher$1 = noop;
+  /**
+   * Whether reporting is enabled.
+   *
+   * Note that this may seem redundant, given you can just check if the currentDispatcher is undefined,
+   * but it turns out that Terser only strips out unused code if we use this explicit boolean.
+   */
+  var enabled$1 = false;
+  var reportingControl = {
+    /**
+     * Attach a new reporting control (aka dispatcher).
+     *
+     * @param dispatcher - reporting control
+     */
+    attachDispatcher: function attachDispatcher(dispatcher) {
+      enabled$1 = true;
+      currentDispatcher$1 = dispatcher;
+      var _iterator = _createForOfIteratorHelper(onReportingEnabledCallbacks),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var callback = _step.value;
+          try {
+            callback();
+          } catch (err) {
+            // This should never happen. But if it does, we don't want one callback to cause another to fail
+            // eslint-disable-next-line no-console
+            console.error('Could not invoke callback', err);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
+      onReportingEnabledCallbacks.length = 0; // clear the array
+    },
+    /**
+     * Detach the current reporting control (aka dispatcher).
+     */
+    detachDispatcher: function detachDispatcher() {
+      enabled$1 = false;
+      currentDispatcher$1 = noop;
     }
-    var callbacks = nextTickCallbackQueue;
-    nextTickCallbackQueue = []; // reset to a new queue
-    for (var _i3 = 0, len = callbacks.length; _i3 < len; _i3 += 1) {
-      callbacks[_i3]();
+  };
+  /**
+   * Call a callback when reporting is enabled, or immediately if reporting is already enabled.
+   * Will only ever be called once.
+   * @param callback
+   */
+  function onReportingEnabled(callback) {
+    if (enabled$1) {
+      // call immediately
+      callback();
+    } else {
+      // call later
+      onReportingEnabledCallbacks.push(callback);
     }
   }
-  function addCallbackToNextTick(callback) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!isFunction$1(callback)) {
-        throw new Error("Internal Error: addCallbackToNextTick() can only accept a function callback");
-      }
+  /**
+   * Report to the current dispatcher, if there is one.
+   * @param reportingEventId
+   * @param vm
+   */
+  function report(reportingEventId, vm) {
+    if (enabled$1) {
+      currentDispatcher$1(reportingEventId, vm.tagName, vm.idx);
     }
-    if (nextTickCallbackQueue.length === 0) {
-      Promise.resolve().then(flushCallbackQueue);
+  }
+
+  /*
+   * 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 getComponentTag(vm) {
+    return "<".concat(StringToLowerCase.call(vm.tagName), ">");
+  }
+  // TODO [#1695]: Unify getComponentStack and getErrorComponentStack
+  function getComponentStack(vm) {
+    var stack = [];
+    var prefix = '';
+    while (!isNull(vm.owner)) {
+      ArrayPush$1.call(stack, prefix + getComponentTag(vm));
+      vm = vm.owner;
+      prefix += '\t';
     }
-    ArrayPush$1.call(nextTickCallbackQueue, callback);
+    return ArrayJoin.call(stack, '\n');
   }
-  function guid() {
-    function s4() {
-      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+  function getErrorComponentStack(vm) {
+    var wcStack = [];
+    var currentVm = vm;
+    while (!isNull(currentVm)) {
+      ArrayPush$1.call(wcStack, getComponentTag(currentVm));
+      currentVm = currentVm.owner;
     }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+    return wcStack.reverse().join('\n\t');
   }
-  // Borrowed from Vue template compiler.
-  // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
-  var DECLARATION_DELIMITER = /;(?![^(]*\))/g;
-  var PROPERTY_DELIMITER = /:(.+)/;
-  function parseStyleText(cssText) {
-    var styleMap = {};
-    var declarations = cssText.split(DECLARATION_DELIMITER);
-    var _iterator = _createForOfIteratorHelper(declarations),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var declaration = _step.value;
-        if (declaration) {
-          var _declaration$split = declaration.split(PROPERTY_DELIMITER),
-            _declaration$split2 = _slicedToArray(_declaration$split, 2),
-            prop = _declaration$split2[0],
-            value = _declaration$split2[1];
-          if (prop !== undefined && value !== undefined) {
-            styleMap[prop.trim()] = value.trim();
-          }
+
+  /*
+   * 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 addErrorComponentStack(vm, error) {
+    if (!isFrozen(error) && isUndefined$1(error.wcStack)) {
+      var wcStack = getErrorComponentStack(vm);
+      defineProperty(error, 'wcStack', {
+        get: function get() {
+          return wcStack;
         }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+      });
     }
-    return styleMap;
   }
-  // Make a shallow copy of an object but omit the given key
-  function cloneAndOmitKey(object, keyToOmit) {
-    var result = {};
-    for (var _i4 = 0, _Object$keys = Object.keys(object); _i4 < _Object$keys.length; _i4++) {
-      var key = _Object$keys[_i4];
-      if (key !== keyToOmit) {
-        result[key] = object[key];
-      }
-    }
-    return result;
+
+  /*
+   * 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
+   */
+  var alreadyLoggedMessages = new Set();
+  // @ts-ignore
+  if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
+    // @ts-ignore
+    window.__lwcResetAlreadyLoggedMessages = function () {
+      alreadyLoggedMessages.clear();
+    };
   }
-  function flattenStylesheets(stylesheets) {
-    var list = [];
-    var _iterator2 = _createForOfIteratorHelper(stylesheets),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var stylesheet = _step2.value;
-        if (!Array.isArray(stylesheet)) {
-          list.push(stylesheet);
-        } else {
-          list.push.apply(list, _toConsumableArray(flattenStylesheets(stylesheet)));
-        }
+  function log(method, message, vm, once) {
+    var msg = "[LWC ".concat(method, "]: ").concat(message);
+    if (!isUndefined$1(vm)) {
+      msg = "".concat(msg, "\n").concat(getComponentStack(vm));
+    }
+    if (once) {
+      if (alreadyLoggedMessages.has(msg)) {
+        return;
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
+      alreadyLoggedMessages.add(msg);
     }
-    return list;
-  }
-  // Set a ref (lwc:ref) on a VM, from a template API
-  function setRefVNode(vm, ref, vnode) {
-    if (process.env.NODE_ENV !== 'production' && isUndefined$1(vm.refVNodes)) {
-      throw new Error('refVNodes must be defined when setting a ref');
+    // 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);
+      return;
     }
-    // If this method is called, then vm.refVNodes is set as the template has refs.
-    // If not, then something went wrong and we threw an error above.
-    var refVNodes = vm.refVNodes;
-    // In cases of conflict (two elements with the same ref), prefer, the last one,
-    // in depth-first traversal order.
-    if (!(ref in refVNodes) || refVNodes[ref].key < vnode.key) {
-      refVNodes[ref] = vnode;
+    try {
+      throw new Error(msg);
+    } catch (e) {
+      /* eslint-disable-next-line no-console */
+      console[method](e);
     }
   }
+  function logError(message, vm) {
+    log('error', message, vm, false);
+  }
+  function logWarn(message, vm) {
+    log('warn', message, vm, false);
+  }
+  function logWarnOnce(message, vm) {
+    log('warn', message, vm, true);
+  }
 
   /*
    * Copyright (c) 2019, salesforce.com, inc.
@@ -694,8 +761,8 @@
     if (!isUndefined$1(reactiveRecord)) {
       var reactiveObservers = reactiveRecord[key];
       if (!isUndefined$1(reactiveObservers)) {
-        for (var _i5 = 0, len = reactiveObservers.length; _i5 < len; _i5 += 1) {
-          var ro = reactiveObservers[_i5];
+        for (var _i3 = 0, len = reactiveObservers.length; _i3 < len; _i3 += 1) {
+          var ro = reactiveObservers[_i3];
           ro.notify();
         }
       }
@@ -754,9 +821,9 @@
         var listeners = this.listeners;
         var len = listeners.length;
         if (len > 0) {
-          for (var _i6 = 0; _i6 < len; _i6 += 1) {
-            var set = listeners[_i6];
-            var pos = ArrayIndexOf.call(listeners[_i6], this);
+          for (var _i4 = 0; _i4 < len; _i4 += 1) {
+            var set = listeners[_i4];
+            var pos = ArrayIndexOf.call(listeners[_i4], this);
             ArraySplice.call(set, pos, 1);
           }
           listeners.length = 0;
@@ -801,75 +868,112 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  function getComponentTag(vm) {
-    return "<".concat(StringToLowerCase.call(vm.tagName), ">");
-  }
-  // TODO [#1695]: Unify getComponentStack and getErrorComponentStack
-  function getComponentStack(vm) {
-    var stack = [];
-    var prefix = '';
-    while (!isNull(vm.owner)) {
-      ArrayPush$1.call(stack, prefix + getComponentTag(vm));
-      vm = vm.owner;
-      prefix += '\t';
-    }
-    return ArrayJoin.call(stack, '\n');
-  }
-  function getErrorComponentStack(vm) {
-    var wcStack = [];
-    var currentVm = vm;
-    while (!isNull(currentVm)) {
-      ArrayPush$1.call(wcStack, getComponentTag(currentVm));
-      currentVm = currentVm.owner;
+  var nextTickCallbackQueue = [];
+  var SPACE_CHAR = 32;
+  var EmptyObject = seal(create(null));
+  var EmptyArray = seal([]);
+  function flushCallbackQueue() {
+    if (process.env.NODE_ENV !== 'production') {
+      if (nextTickCallbackQueue.length === 0) {
+        throw new Error("Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.");
+      }
     }
-    return wcStack.reverse().join('\n\t');
-  }
-
-  /*
-   * 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 addErrorComponentStack(vm, error) {
-    if (!isFrozen(error) && isUndefined$1(error.wcStack)) {
-      var wcStack = getErrorComponentStack(vm);
-      defineProperty(error, 'wcStack', {
-        get: function get() {
-          return wcStack;
-        }
-      });
+    var callbacks = nextTickCallbackQueue;
+    nextTickCallbackQueue = []; // reset to a new queue
+    for (var _i5 = 0, len = callbacks.length; _i5 < len; _i5 += 1) {
+      callbacks[_i5]();
     }
   }
-
-  /*
-   * 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 log(method, message, vm) {
-    var msg = "[LWC ".concat(method, "]: ").concat(message);
-    if (!isUndefined$1(vm)) {
-      msg = "".concat(msg, "\n").concat(getComponentStack(vm));
-    }
-    if (process.env.NODE_ENV === 'test') {
-      /* eslint-disable-next-line no-console */
-      console[method](msg);
-      return;
+  function addCallbackToNextTick(callback) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!isFunction$1(callback)) {
+        throw new Error("Internal Error: addCallbackToNextTick() can only accept a function callback");
+      }
     }
-    try {
-      throw new Error(msg);
-    } catch (e) {
-      /* eslint-disable-next-line no-console */
-      console[method](e);
+    if (nextTickCallbackQueue.length === 0) {
+      Promise.resolve().then(flushCallbackQueue);
     }
+    ArrayPush$1.call(nextTickCallbackQueue, callback);
   }
-  function logError(message, vm) {
-    log('error', message, vm);
-  }
-  function logWarn(message, vm) {
-    log('warn', message, vm);
+  function guid() {
+    function s4() {
+      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+    }
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+  }
+  // Borrowed from Vue template compiler.
+  // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
+  var DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+  var PROPERTY_DELIMITER = /:(.+)/;
+  function parseStyleText(cssText) {
+    var styleMap = {};
+    var declarations = cssText.split(DECLARATION_DELIMITER);
+    var _iterator2 = _createForOfIteratorHelper(declarations),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var declaration = _step2.value;
+        if (declaration) {
+          var _declaration$split = declaration.split(PROPERTY_DELIMITER),
+            _declaration$split2 = _slicedToArray(_declaration$split, 2),
+            prop = _declaration$split2[0],
+            value = _declaration$split2[1];
+          if (prop !== undefined && value !== undefined) {
+            styleMap[prop.trim()] = value.trim();
+          }
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return styleMap;
+  }
+  // Make a shallow copy of an object but omit the given key
+  function cloneAndOmitKey(object, keyToOmit) {
+    var result = {};
+    for (var _i6 = 0, _Object$keys = Object.keys(object); _i6 < _Object$keys.length; _i6++) {
+      var key = _Object$keys[_i6];
+      if (key !== keyToOmit) {
+        result[key] = object[key];
+      }
+    }
+    return result;
+  }
+  function flattenStylesheets(stylesheets) {
+    var list = [];
+    var _iterator3 = _createForOfIteratorHelper(stylesheets),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var stylesheet = _step3.value;
+        if (!Array.isArray(stylesheet)) {
+          list.push(stylesheet);
+        } else {
+          list.push.apply(list, _toConsumableArray(flattenStylesheets(stylesheet)));
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+    return list;
+  }
+  // Set a ref (lwc:ref) on a VM, from a template API
+  function setRefVNode(vm, ref, vnode) {
+    if (process.env.NODE_ENV !== 'production' && isUndefined$1(vm.refVNodes)) {
+      throw new Error('refVNodes must be defined when setting a ref');
+    }
+    // If this method is called, then vm.refVNodes is set as the template has refs.
+    // If not, then something went wrong and we threw an error above.
+    var refVNodes = vm.refVNodes;
+    // In cases of conflict (two elements with the same ref), prefer, the last one,
+    // in depth-first traversal order.
+    if (!(ref in refVNodes) || refVNodes[ref].key < vnode.key) {
+      refVNodes[ref] = vnode;
+    }
   }
 
   /*
@@ -911,7 +1015,10 @@
   // 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
-  var globalHTMLProperties = assign(create(null), {
+  //
+  // If you update this list, check for test files that recapitulate the same list. Searching the codebase
+  // for e.g. "dropzone" should suffice.
+  var globalHTMLProperties = {
     accessKey: {
       attribute: 'accesskey'
     },
@@ -996,7 +1103,7 @@
     role: {
       attribute: 'role'
     }
-  });
+  };
   var controlledElement = null;
   var controlledAttributeName;
   function isAttributeLocked(elm, attrName) {
@@ -2350,17 +2457,17 @@
       var refs = refsCache.get(refVNodes);
       if (isUndefined$1(refs)) {
         refs = create(null);
-        var _iterator3 = _createForOfIteratorHelper(keys(refVNodes)),
-          _step3;
+        var _iterator4 = _createForOfIteratorHelper(keys(refVNodes)),
+          _step4;
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var key = _step3.value;
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var key = _step4.value;
             refs[key] = refVNodes[key].elm;
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator4.e(err);
         } finally {
-          _iterator3.f();
+          _iterator4.f();
         }
         freeze(refs);
         refsCache.set(refVNodes, refs);
@@ -2510,97 +2617,377 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  function api$1() {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.fail("@api decorator can only be used as a decorator function.");
+  var DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
+  var DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
+  var WIRE_DEBUG_ENTRY = '@wire';
+  var WireMetaMap = new Map();
+  var WireContextRegistrationEvent = /*#__PURE__*/function (_CustomEvent) {
+    _inherits(WireContextRegistrationEvent, _CustomEvent);
+    var _super3 = _createSuper(WireContextRegistrationEvent);
+    function WireContextRegistrationEvent(adapterToken, _ref3) {
+      var _this2;
+      var setNewContext = _ref3.setNewContext,
+        setDisconnectedCallback = _ref3.setDisconnectedCallback;
+      _classCallCheck(this, WireContextRegistrationEvent);
+      _this2 = _super3.call(this, adapterToken, {
+        bubbles: true,
+        composed: true
+      });
+      defineProperties(_assertThisInitialized(_this2), {
+        setNewContext: {
+          value: setNewContext
+        },
+        setDisconnectedCallback: {
+          value: setDisconnectedCallback
+        }
+      });
+      return _this2;
     }
-    throw new Error();
+    return _createClass(WireContextRegistrationEvent);
+  }( /*#__PURE__*/_wrapNativeSuper(CustomEvent));
+  function createFieldDataCallback(vm, name) {
+    return function (value) {
+      updateComponentValue(vm, name, value);
+    };
   }
-  function createPublicPropertyDescriptor(key) {
-    return {
-      get: function get() {
-        var vm = getAssociatedVM(this);
-        if (isBeingConstructed(vm)) {
-          if (process.env.NODE_ENV !== 'production') {
-            logError("Can\u2019t read the value of property `".concat(toString$1(key), "` from the constructor because the owner component hasn\u2019t set the value yet. Instead, use the constructor to set a default value for the property."), vm);
-          }
-          return;
-        }
-        componentValueObserved(vm, key);
-        return vm.cmpProps[key];
-      },
-      set: function set(newValue) {
-        var vm = getAssociatedVM(this);
-        if (process.env.NODE_ENV !== 'production') {
-          var _vmBeingRendered3 = getVMBeingRendered();
-          assert.invariant(!isInvokingRender, "".concat(_vmBeingRendered3, ".render() method has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
-          assert.invariant(!isUpdatingTemplate, "Updating the template of ".concat(_vmBeingRendered3, " has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
-        }
-        vm.cmpProps[key] = newValue;
-        componentValueMutated(vm, key);
-      },
-      enumerable: true,
-      configurable: true
+  function createMethodDataCallback(vm, method) {
+    return function (value) {
+      // dispatching new value into the wired method
+      runWithBoundaryProtection(vm, vm.owner, noop, function () {
+        // job
+        method.call(vm.component, value);
+      }, noop);
     };
   }
-  function createPublicAccessorDescriptor(key, descriptor) {
-    var _get2 = descriptor.get,
-      _set2 = descriptor.set,
-      enumerable = descriptor.enumerable,
-      configurable = descriptor.configurable;
-    if (!isFunction$1(_get2)) {
-      if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(isFunction$1(_get2), "Invalid compiler output for public accessor ".concat(toString$1(key), " decorated with @api"));
+  function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
+    var hasPendingConfig = false;
+    // creating the reactive observer for reactive params when needed
+    var ro = createReactiveObserver(function () {
+      if (hasPendingConfig === false) {
+        hasPendingConfig = true;
+        // collect new config in the micro-task
+        Promise.resolve().then(function () {
+          hasPendingConfig = false;
+          // resetting current reactive params
+          ro.reset();
+          // dispatching a new config due to a change in the configuration
+          computeConfigAndUpdate();
+        });
       }
-      throw new Error();
-    }
+    });
+    var computeConfigAndUpdate = function computeConfigAndUpdate() {
+      var config;
+      ro.observe(function () {
+        return config = configCallback(component);
+      });
+      // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
+      // TODO: dev-mode validation of config based on the adapter.configSchema
+      // @ts-ignore it is assigned in the observe() callback
+      callbackWhenConfigIsReady(config);
+    };
     return {
-      get: function get() {
-        if (process.env.NODE_ENV !== 'production') {
-          // Assert that the this value is an actual Component with an associated VM.
-          getAssociatedVM(this);
-        }
-        return _get2.call(this);
-      },
-      set: function set(newValue) {
-        var vm = getAssociatedVM(this);
-        if (process.env.NODE_ENV !== 'production') {
-          var _vmBeingRendered4 = getVMBeingRendered();
-          assert.invariant(!isInvokingRender, "".concat(_vmBeingRendered4, ".render() method has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
-          assert.invariant(!isUpdatingTemplate, "Updating the template of ".concat(_vmBeingRendered4, " has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
-        }
-        if (_set2) {
-          _set2.call(this, newValue);
-        } else if (process.env.NODE_ENV !== 'production') {
-          assert.fail("Invalid attempt to set a new value for property ".concat(toString$1(key), " of ").concat(vm, " that does not has a setter decorated with @api."));
-        }
-      },
-      enumerable: enumerable,
-      configurable: configurable
+      computeConfigAndUpdate: computeConfigAndUpdate,
+      ro: ro
     };
   }
-
-  /*
-   * 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 track(target) {
-    if (arguments.length === 1) {
-      return getReactiveProxy(target);
+  function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
+    var adapter = wireDef.adapter;
+    var adapterContextToken = getAdapterToken(adapter);
+    if (isUndefined$1(adapterContextToken)) {
+      return; // no provider found, nothing to be done
     }
+
+    var elm = vm.elm,
+      _vm$context = vm.context,
+      wiredConnecting = _vm$context.wiredConnecting,
+      wiredDisconnecting = _vm$context.wiredDisconnecting,
+      dispatchEvent = vm.renderer.dispatchEvent;
+    // waiting for the component to be connected to formally request the context via the token
+    ArrayPush$1.call(wiredConnecting, function () {
+      // This event is responsible for connecting the host element with another
+      // element in the composed path that is providing contextual data. The provider
+      // must be listening for a special dom event with the name corresponding to the value of
+      // `adapterContextToken`, which will remain secret and internal to this file only to
+      // guarantee that the linkage can be forged.
+      var contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
+        setNewContext: function setNewContext(newContext) {
+          // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
+          // TODO: dev-mode validation of config based on the adapter.contextSchema
+          callbackWhenContextIsReady(newContext);
+        },
+        setDisconnectedCallback: function setDisconnectedCallback(disconnectCallback) {
+          // adds this callback into the disconnect bucket so it gets disconnected from parent
+          // the the element hosting the wire is disconnected
+          ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
+        }
+      });
+      dispatchEvent(elm, contextRegistrationEvent);
+    });
+  }
+  function createConnector(vm, name, wireDef) {
+    var method = wireDef.method,
+      adapter = wireDef.adapter,
+      configCallback = wireDef.configCallback,
+      dynamic = wireDef.dynamic;
+    var debugInfo;
     if (process.env.NODE_ENV !== 'production') {
-      assert.fail("@track decorator can only be used with one argument to return a trackable object, or as a decorator function.");
+      var wiredPropOrMethod = isUndefined$1(method) ? name : method.name;
+      debugInfo = create(null);
+      debugInfo.wasDataProvisionedForConfig = false;
+      vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
     }
-    throw new Error();
-  }
-  function internalTrackDecorator(key) {
-    return {
-      get: function get() {
-        var vm = getAssociatedVM(this);
-        componentValueObserved(vm, key);
-        return vm.cmpFields[key];
+    var fieldOrMethodCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
+    var dataCallback = function dataCallback(value) {
+      if (process.env.NODE_ENV !== 'production') {
+        debugInfo.data = value;
+        // Note: most of the time, the data provided is for the current config, but there may be
+        // some conditions in which it does not, ex:
+        // race conditions in a poor network while the adapter does not cancel a previous request.
+        debugInfo.wasDataProvisionedForConfig = true;
+      }
+      fieldOrMethodCallback(value);
+    };
+    var context;
+    var connector;
+    // Workaround to pass the component element associated to this wire adapter instance.
+    defineProperty(dataCallback, DeprecatedWiredElementHost, {
+      value: vm.elm
+    });
+    defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
+      value: dynamic
+    });
+    runWithBoundaryProtection(vm, vm, noop, function () {
+      // job
+      connector = new adapter(dataCallback);
+    }, noop);
+    var updateConnectorConfig = function updateConnectorConfig(config) {
+      // every time the config is recomputed due to tracking,
+      // this callback will be invoked with the new computed config
+      runWithBoundaryProtection(vm, vm, noop, function () {
+        // job
+        if (process.env.NODE_ENV !== 'production') {
+          debugInfo.config = config;
+          debugInfo.context = context;
+          debugInfo.wasDataProvisionedForConfig = false;
+        }
+        connector.update(config, context);
+      }, noop);
+    };
+    // Computes the current wire config and calls the update method on the wire adapter.
+    // If it has params, we will need to observe changes in the next tick.
+    var _createConfigWatcher = createConfigWatcher(vm.component, configCallback, updateConnectorConfig),
+      computeConfigAndUpdate = _createConfigWatcher.computeConfigAndUpdate,
+      ro = _createConfigWatcher.ro;
+    // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
+    if (!isUndefined$1(adapter.contextSchema)) {
+      createContextWatcher(vm, wireDef, function (newContext) {
+        // every time the context is pushed into this component,
+        // this callback will be invoked with the new computed context
+        if (context !== newContext) {
+          context = newContext;
+          // Note: when new context arrives, the config will be recomputed and pushed along side the new
+          // context, this is to preserve the identity characteristics, config should not have identity
+          // (ever), while context can have identity
+          if (vm.state === 1 /* VMState.connected */) {
+            computeConfigAndUpdate();
+          }
+        }
+      });
+    }
+    return {
+      // @ts-ignore the boundary protection executes sync, connector is always defined
+      connector: connector,
+      computeConfigAndUpdate: computeConfigAndUpdate,
+      resetConfigWatcher: function resetConfigWatcher() {
+        return ro.reset();
+      }
+    };
+  }
+  var AdapterToTokenMap = new Map();
+  function getAdapterToken(adapter) {
+    return AdapterToTokenMap.get(adapter);
+  }
+  function setAdapterToken(adapter, token) {
+    AdapterToTokenMap.set(adapter, token);
+  }
+  function storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic) {
+    // support for callable adapters
+    if (adapter.adapter) {
+      adapter = adapter.adapter;
+    }
+    var method = descriptor.value;
+    var def = {
+      adapter: adapter,
+      method: method,
+      configCallback: configCallback,
+      dynamic: dynamic
+    };
+    WireMetaMap.set(descriptor, def);
+  }
+  function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
+    // support for callable adapters
+    if (adapter.adapter) {
+      adapter = adapter.adapter;
+    }
+    var def = {
+      adapter: adapter,
+      configCallback: configCallback,
+      dynamic: dynamic
+    };
+    WireMetaMap.set(descriptor, def);
+  }
+  function installWireAdapters(vm) {
+    var context = vm.context,
+      wire = vm.def.wire;
+    if (process.env.NODE_ENV !== 'production') {
+      vm.debugInfo[WIRE_DEBUG_ENTRY] = create(null);
+    }
+    var wiredConnecting = context.wiredConnecting = [];
+    var wiredDisconnecting = context.wiredDisconnecting = [];
+    for (var fieldNameOrMethod in wire) {
+      var descriptor = wire[fieldNameOrMethod];
+      var wireDef = WireMetaMap.get(descriptor);
+      if (process.env.NODE_ENV !== 'production') {
+        assert.invariant(wireDef, "Internal Error: invalid wire definition found.");
+      }
+      if (!isUndefined$1(wireDef)) {
+        (function () {
+          var _createConnector = createConnector(vm, fieldNameOrMethod, wireDef),
+            connector = _createConnector.connector,
+            computeConfigAndUpdate = _createConnector.computeConfigAndUpdate,
+            resetConfigWatcher = _createConnector.resetConfigWatcher;
+          var hasDynamicParams = wireDef.dynamic.length > 0;
+          ArrayPush$1.call(wiredConnecting, function () {
+            connector.connect();
+            if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+              if (hasDynamicParams) {
+                Promise.resolve().then(computeConfigAndUpdate);
+                return;
+              }
+            }
+            computeConfigAndUpdate();
+          });
+          ArrayPush$1.call(wiredDisconnecting, function () {
+            connector.disconnect();
+            resetConfigWatcher();
+          });
+        })();
+      }
+    }
+  }
+  function connectWireAdapters(vm) {
+    var wiredConnecting = vm.context.wiredConnecting;
+    for (var _i8 = 0, len = wiredConnecting.length; _i8 < len; _i8 += 1) {
+      wiredConnecting[_i8]();
+    }
+  }
+  function disconnectWireAdapters(vm) {
+    var wiredDisconnecting = vm.context.wiredDisconnecting;
+    runWithBoundaryProtection(vm, vm, noop, function () {
+      // job
+      for (var _i9 = 0, len = wiredDisconnecting.length; _i9 < len; _i9 += 1) {
+        wiredDisconnecting[_i9]();
+      }
+    }, noop);
+  }
+
+  /*
+   * 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 api$1() {
+    if (process.env.NODE_ENV !== 'production') {
+      assert.fail("@api decorator can only be used as a decorator function.");
+    }
+    throw new Error();
+  }
+  function createPublicPropertyDescriptor(key) {
+    return {
+      get: function get() {
+        var vm = getAssociatedVM(this);
+        if (isBeingConstructed(vm)) {
+          if (process.env.NODE_ENV !== 'production') {
+            logError("Can\u2019t read the value of property `".concat(toString$1(key), "` from the constructor because the owner component hasn\u2019t set the value yet. Instead, use the constructor to set a default value for the property."), vm);
+          }
+          return;
+        }
+        componentValueObserved(vm, key);
+        return vm.cmpProps[key];
+      },
+      set: function set(newValue) {
+        var vm = getAssociatedVM(this);
+        if (process.env.NODE_ENV !== 'production') {
+          var _vmBeingRendered3 = getVMBeingRendered();
+          assert.invariant(!isInvokingRender, "".concat(_vmBeingRendered3, ".render() method has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
+          assert.invariant(!isUpdatingTemplate, "Updating the template of ".concat(_vmBeingRendered3, " has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
+        }
+        vm.cmpProps[key] = newValue;
+        componentValueMutated(vm, key);
+      },
+      enumerable: true,
+      configurable: true
+    };
+  }
+  function createPublicAccessorDescriptor(key, descriptor) {
+    var _get2 = descriptor.get,
+      _set2 = descriptor.set,
+      enumerable = descriptor.enumerable,
+      configurable = descriptor.configurable;
+    if (!isFunction$1(_get2)) {
+      if (process.env.NODE_ENV !== 'production') {
+        assert.invariant(isFunction$1(_get2), "Invalid compiler output for public accessor ".concat(toString$1(key), " decorated with @api"));
+      }
+      throw new Error();
+    }
+    return {
+      get: function get() {
+        if (process.env.NODE_ENV !== 'production') {
+          // Assert that the this value is an actual Component with an associated VM.
+          getAssociatedVM(this);
+        }
+        return _get2.call(this);
+      },
+      set: function set(newValue) {
+        var vm = getAssociatedVM(this);
+        if (process.env.NODE_ENV !== 'production') {
+          var _vmBeingRendered4 = getVMBeingRendered();
+          assert.invariant(!isInvokingRender, "".concat(_vmBeingRendered4, ".render() method has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
+          assert.invariant(!isUpdatingTemplate, "Updating the template of ".concat(_vmBeingRendered4, " has side effects on the state of ").concat(vm, ".").concat(toString$1(key)));
+        }
+        if (_set2) {
+          _set2.call(this, newValue);
+        } else if (process.env.NODE_ENV !== 'production') {
+          assert.fail("Invalid attempt to set a new value for property ".concat(toString$1(key), " of ").concat(vm, " that does not has a setter decorated with @api."));
+        }
+      },
+      enumerable: enumerable,
+      configurable: configurable
+    };
+  }
+
+  /*
+   * 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 track(target) {
+    if (arguments.length === 1) {
+      return getReactiveProxy(target);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      assert.fail("@track decorator can only be used with one argument to return a trackable object, or as a decorator function.");
+    }
+    throw new Error();
+  }
+  function internalTrackDecorator(key) {
+    return {
+      get: function get() {
+        var vm = getAssociatedVM(this);
+        componentValueObserved(vm, key);
+        return vm.cmpFields[key];
       },
       set: function set(newValue) {
         var vm = getAssociatedVM(this);
@@ -2833,8 +3220,8 @@
       }
     }
     if (!isUndefined$1(fields)) {
-      for (var _i8 = 0, n = fields.length; _i8 < n; _i8++) {
-        var _fieldName2 = fields[_i8];
+      for (var _i10 = 0, n = fields.length; _i10 < n; _i10++) {
+        var _fieldName2 = fields[_i10];
         descriptor = getOwnPropertyDescriptor$1(proto, _fieldName2);
         if (process.env.NODE_ENV !== 'production') {
           validateObservedField(Ctor, _fieldName2, descriptor);
@@ -3026,10 +3413,10 @@
     if (isFunction$1(SuperClass)) {
       HTMLBridgeElement = /*#__PURE__*/function (_SuperClass) {
         _inherits(HTMLBridgeElement, _SuperClass);
-        var _super3 = _createSuper(HTMLBridgeElement);
+        var _super4 = _createSuper(HTMLBridgeElement);
         function HTMLBridgeElement() {
           _classCallCheck(this, HTMLBridgeElement);
-          return _super3.apply(this, arguments);
+          return _super4.apply(this, arguments);
         }
         return _createClass(HTMLBridgeElement);
       }(SuperClass);
@@ -3056,8 +3443,8 @@
       superObservedAttributes = _SuperClass$observedA === void 0 ? [] : _SuperClass$observedA;
     var descriptors = create(null);
     // expose getters and setters for each public props on the new Element Bridge
-    for (var _i9 = 0, len = props.length; _i9 < len; _i9 += 1) {
-      var _propName = props[_i9];
+    for (var _i11 = 0, len = props.length; _i11 < len; _i11 += 1) {
+      var _propName = props[_i11];
       attributeToPropMap[htmlPropertyToAttribute(_propName)] = _propName;
       descriptors[_propName] = {
         get: createGetter(_propName),
@@ -3067,8 +3454,8 @@
       };
     }
     // expose public methods as props on the new Element Bridge
-    for (var _i10 = 0, _len = methods.length; _i10 < _len; _i10 += 1) {
-      var methodName = methods[_i10];
+    for (var _i12 = 0, _len = methods.length; _i12 < _len; _i12 += 1) {
+      var methodName = methods[_i12];
       descriptors[methodName] = {
         value: createMethodCaller(methodName),
         writable: true,
@@ -3568,6 +3955,7 @@
       setAttribute = _vm$renderer.setAttribute;
     var newStylesheets = template.stylesheets,
       newStylesheetToken = template.stylesheetToken;
+    var newVmStylesheets = vm.stylesheets;
     var isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
     var hasScopedStyles = context.hasScopedStyles;
     var newToken;
@@ -3587,7 +3975,9 @@
     }
     // 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) {
+    var hasNewStylesheets = hasStyles(newStylesheets);
+    var hasNewVmStylesheets = hasStyles(newVmStylesheets);
+    if (hasNewStylesheets || hasNewVmStylesheets) {
       newToken = newStylesheetToken;
     }
     // Set the new styling token on the host element
@@ -3609,8 +3999,8 @@
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     var content = [];
     var root;
-    for (var _i11 = 0; _i11 < stylesheets.length; _i11++) {
-      var stylesheet = stylesheets[_i11];
+    for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
+      var stylesheet = stylesheets[_i13];
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
       } else {
@@ -3657,10 +4047,15 @@
   function getStylesheetsContent(vm, template) {
     var stylesheets = template.stylesheets,
       stylesheetToken = template.stylesheetToken;
+    var vmStylesheets = vm.stylesheets;
     var 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
@@ -3695,8 +4090,9 @@
   function getStylesheetTokenHost(vnode) {
     var _getComponentInternal = getComponentInternalDef(vnode.ctor),
       template = _getComponentInternal.template;
+    var vm = vnode.vm;
     var stylesheetToken = template.stylesheetToken;
-    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
+    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template, vm) ? makeHostToken(stylesheetToken) : null;
   }
   function getNearestNativeShadowComponent(vm) {
     var owner = getNearestShadowComponent(vm);
@@ -3712,8 +4108,8 @@
       shadowMode = vm.shadowMode,
       insertStylesheet = vm.renderer.insertStylesheet;
     if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-      for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
-        insertStylesheet(stylesheets[_i12]);
+      for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
+        insertStylesheet(stylesheets[_i14]);
       }
     } else if (vm.hydrated) {
       // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
@@ -3726,8 +4122,8 @@
       var root = getNearestNativeShadowComponent(vm);
       // null root means a global style
       var target = isNull(root) ? undefined : root.shadowRoot;
-      for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
-        insertStylesheet(stylesheets[_i13], target);
+      for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
+        insertStylesheet(stylesheets[_i15], target);
       }
     }
     return null;
@@ -4041,8 +4437,8 @@
       return;
     }
     var setCSSStyleProperty = renderer.setCSSStyleProperty;
-    for (var _i14 = 0; _i14 < styleDecls.length; _i14++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i14], 3),
+    for (var _i16 = 0; _i16 < styleDecls.length; _i16++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i16], 3),
         prop = _styleDecls$_i[0],
         value = _styleDecls$_i[1],
         important = _styleDecls$_i[2];
@@ -4285,6 +4681,26 @@
         // 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 ???
+        var shadowMode = vm.shadowMode,
+          renderMode = vm.renderMode;
+        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
@@ -4463,7 +4879,6 @@
     //
     // In case #2, we will always get a fresh VCustomElement.
     var children = vnode.aChildren || vnode.children;
-    vm.aChildren = children;
     var renderMode = vm.renderMode,
       shadowMode = vm.shadowMode;
     if (process.env.NODE_ENV !== 'production') {
@@ -4476,21 +4891,67 @@
         logError("Invalid usage of 'lwc:slot-data' on ".concat(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.
+    var 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;
     }
   }
-  function createViewModelHook(elm, vnode, renderer) {
-    var vm = getAssociatedVMIfPresent(elm);
-    // There is a possibility that a custom element is registered under tagName, in which case, the
-    // initialization is already carry on, and there is nothing else to do here since this hook is
-    // called right after invoking `document.createElement`.
-    if (!isUndefined$1(vm)) {
+  /**
+   * 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) {
+    var 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.
+    var nodeStack = [];
+    var fragmentFound = false;
+    for (var _i17 = children.length - 1; _i17 > -1; _i17 -= 1) {
+      var child = children[_i17];
+      ArrayPush$1.call(nodeStack, child);
+      fragmentFound = fragmentFound || !!(child && isVFragment(child));
+    }
+    if (!fragmentFound) {
+      return children;
+    }
+    var currentNode;
+    while (!isUndefined$1(currentNode = ArrayPop.call(nodeStack))) {
+      if (!isNull(currentNode) && isVFragment(currentNode)) {
+        var fChildren = currentNode.children;
+        // Ignore the start and end text node delimiters
+        for (var _i18 = fChildren.length - 2; _i18 > 0; _i18 -= 1) {
+          ArrayPush$1.call(nodeStack, fChildren[_i18]);
+        }
+      } 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) {
+    var vm = getAssociatedVMIfPresent(elm);
+    // There is a possibility that a custom element is registered under tagName, in which case, the
+    // initialization is already carry on, and there is nothing else to do here since this hook is
+    // called right after invoking `document.createElement`.
+    if (!isUndefined$1(vm)) {
       return vm;
     }
     var sel = vnode.sel,
@@ -4507,22 +4968,16 @@
     }
     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;
-    for (var _i15 = 0, len = children.length; _i15 < len; _i15 += 1) {
-      var vnode = children[_i15];
+    var oldSlotsMapping = vm.cmpSlots.slotAssignments;
+    var cmpSlotsMapping = create(null);
+    // Collect all slots into cmpSlotsMapping
+    for (var _i19 = 0, len = children.length; _i19 < len; _i19 += 1) {
+      var vnode = children[_i19];
       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;
-      }
       var slotName = '';
       if (isVBaseElement(vnode)) {
         slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
@@ -4532,11 +4987,6 @@
       var vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
-  }
-  function allocateInSlot(vm, children, owner) {
-    var oldSlotsMapping = vm.cmpSlots.slotAssignments;
-    var cmpSlotsMapping = create(null);
-    collectSlots(vm, children, cmpSlotsMapping);
     vm.cmpSlots = {
       owner: owner,
       slotAssignments: cmpSlotsMapping
@@ -4549,16 +4999,16 @@
         markComponentAsDirty(vm);
         return;
       }
-      for (var _i16 = 0, len = oldKeys.length; _i16 < len; _i16 += 1) {
-        var key = oldKeys[_i16];
+      for (var _i20 = 0, _len2 = oldKeys.length; _i20 < _len2; _i20 += 1) {
+        var key = oldKeys[_i20];
         if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
           markComponentAsDirty(vm);
           return;
         }
         var oldVNodes = oldSlotsMapping[key];
-        var vnodes = cmpSlotsMapping[key];
+        var _vnodes = cmpSlotsMapping[key];
         for (var j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
-          if (oldVNodes[j] !== vnodes[j]) {
+          if (oldVNodes[j] !== _vnodes[j]) {
             markComponentAsDirty(vm);
             return;
           }
@@ -4567,14 +5017,14 @@
     }
   }
   // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-  var FromIteration = new WeakMap();
-  // dynamic children means it was generated by an iteration
-  // in a template, and will require a more complex diffing algo.
+  var 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) {
     var map = {};
@@ -4673,11 +5123,11 @@
       if (oldStartIdx > oldEndIdx) {
         // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
         // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        var _i17 = newEndIdx;
+        var _i21 = newEndIdx;
         var n;
         do {
-          n = newCh[++_i17];
-        } while (!isVNode(n) && _i17 < newChEnd);
+          n = newCh[++_i21];
+        } while (!isVNode(n) && _i21 < newChEnd);
         before = isVNode(n) ? n.elm : null;
         mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
       } else {
@@ -4702,9 +5152,9 @@
     // if the old list is not empty, the new list MUST have the same
     // amount of nodes, that's why we call this static children
     var anchor = null;
-    for (var _i18 = c2Length - 1; _i18 >= 0; _i18 -= 1) {
-      var n1 = c1[_i18];
-      var n2 = c2[_i18];
+    for (var _i22 = c2Length - 1; _i22 >= 0; _i22 -= 1) {
+      var n1 = c1[_i22];
+      var n2 = c2[_i22];
       if (n2 !== n1) {
         if (isVNode(n1)) {
           if (isVNode(n2)) {
@@ -4829,8 +5279,8 @@
     if (!isUndefined$1(slotset) && !isUndefined$1(slotset.slotAssignments) && !isUndefined$1(slotset.slotAssignments[slotName]) && slotset.slotAssignments[slotName].length !== 0) {
       var newChildren = [];
       var slotAssignments = slotset.slotAssignments[slotName];
-      for (var _i19 = 0; _i19 < slotAssignments.length; _i19++) {
-        var vnode = slotAssignments[_i19];
+      for (var _i23 = 0; _i23 < slotAssignments.length; _i23++) {
+        var vnode = slotAssignments[_i23];
         if (!isNull(vnode)) {
           var assignedNodeIsScopedSlot = isVScopedSlotFragment(vnode);
           // The only sniff test for a scoped <slot> element is the presence of `slotData`
@@ -5326,7 +5776,7 @@
   }
   function buildParseFragmentFn(createFragmentFn) {
     return function (strings) {
-      for (var _len2 = arguments.length, keys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key3 = 1; _key3 < _len2; _key3++) {
+      for (var _len3 = arguments.length, keys = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
         keys[_key3 - 1] = arguments[_key3];
       }
       var cache = create(null);
@@ -5355,23 +5805,23 @@
         var classAttrToken = hasScopedStyles && hasStyleToken ? " class=\"".concat(stylesheetToken, "\"") : '';
         var attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
         var htmlFragment = '';
-        for (var _i20 = 0, n = keys.length; _i20 < n; _i20++) {
-          switch (keys[_i20]) {
+        for (var _i24 = 0, n = keys.length; _i24 < n; _i24++) {
+          switch (keys[_i24]) {
             case 0:
               // styleToken in existing class attr
-              htmlFragment += strings[_i20] + classToken;
+              htmlFragment += strings[_i24] + classToken;
               break;
             case 1:
               // styleToken for added class attr
-              htmlFragment += strings[_i20] + classAttrToken;
+              htmlFragment += strings[_i24] + classAttrToken;
               break;
             case 2:
               // styleToken as attr
-              htmlFragment += strings[_i20] + attrToken;
+              htmlFragment += strings[_i24] + attrToken;
               break;
             case 3:
               // ${1}${2}
-              htmlFragment += strings[_i20] + classAttrToken + attrToken;
+              htmlFragment += strings[_i24] + classAttrToken + attrToken;
               break;
           }
         }
@@ -5436,7 +5886,7 @@
           // 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
@@ -5476,17 +5926,24 @@
     }
     return vnodes;
   }
-  function computeHasScopedStyles(template) {
-    var stylesheets = template.stylesheets;
-    if (!isUndefined$1(stylesheets)) {
-      for (var _i21 = 0; _i21 < stylesheets.length; _i21++) {
-        if (isTrue(stylesheets[_i21][KEY__SCOPED_CSS])) {
+  function computeHasScopedStylesInStylesheets(stylesheets) {
+    if (hasStyles(stylesheets)) {
+      for (var _i25 = 0; _i25 < stylesheets.length; _i25++) {
+        if (isTrue(stylesheets[_i25][KEY__SCOPED_CSS])) {
           return true;
         }
       }
     }
     return false;
   }
+  function computeHasScopedStyles(template, vm) {
+    var stylesheets = template.stylesheets;
+    var 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.
@@ -5592,8 +6049,8 @@
    */
   function registerComponent(
   // We typically expect a LightningElementConstructor, but technically you can call this with anything
-  Ctor, _ref3) {
-    var tmpl = _ref3.tmpl;
+  Ctor, _ref4) {
+    var tmpl = _ref4.tmpl;
     if (isFunction$1(Ctor)) {
       if (process.env.NODE_ENV !== 'production') {
         checkVersionMismatch(Ctor, 'component');
@@ -5668,8 +6125,8 @@
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
-    for (var _i22 = 0; _i22 < hooks.length; ++_i22) {
-      var hookName = hooks[_i22];
+    for (var _i26 = 0; _i26 < hooks.length; ++_i26) {
+      var hookName = hooks[_i26];
       if (hookName in service) {
         var l = Services[hookName];
         if (isUndefined$1(l)) {
@@ -5686,8 +6143,8 @@
     var component = vm.component,
       def = vm.def,
       context = vm.context;
-    for (var _i23 = 0, len = cbs.length; _i23 < len; ++_i23) {
-      cbs[_i23].call(undefined, component, {}, def, context);
+    for (var _i27 = 0, len = cbs.length; _i27 < len; ++_i27) {
+      cbs[_i27].call(undefined, component, {}, def, context);
     }
   }
 
@@ -5806,6 +6263,7 @@
       // Properties set right after VM creation.
       tro: null,
       shadowMode: null,
+      stylesheets: null,
       // Properties set by the LightningElement constructor.
       component: null,
       shadowRoot: null,
@@ -5818,6 +6276,7 @@
     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') {
@@ -5836,6 +6295,40 @@
     }
     return vm;
   }
+  function validateComponentStylesheets(vm, stylesheets) {
+    var valid = true;
+    var validate = function validate(arrayOrStylesheet) {
+      if (isArray$1(arrayOrStylesheet)) {
+        for (var _i28 = 0; _i28 < arrayOrStylesheet.length; _i28++) {
+          validate(arrayOrStylesheet[_i28]);
+        }
+      } 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) {
+      var stylesheets = ctor.stylesheets;
+      if (!isUndefined$1(stylesheets)) {
+        var 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 <".concat(vm.tagName, ">"), vm);
+        }
+      }
+    }
+    return null;
+  }
   function computeShadowMode(vm, renderer) {
     var def = vm.def;
     var isSyntheticShadowDefined = renderer.isSyntheticShadowDefined,
@@ -5960,17 +6453,17 @@
       return a.idx - b.idx;
     });
     rehydrateQueue = []; // reset to a new queue
-    for (var _i24 = 0, len = vms.length; _i24 < len; _i24 += 1) {
-      var vm = vms[_i24];
+    for (var _i29 = 0, len = vms.length; _i29 < len; _i29 += 1) {
+      var vm = vms[_i29];
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i24 + 1 < len) {
+        if (_i29 + 1 < len) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i24 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i29 + 1));
         }
         // we need to end the measure before throwing.
         logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
@@ -6016,437 +6509,318 @@
       // this guarantees that if the component is reused/reinserted,
       // it will be re-rendered because we are disconnecting the reactivity
       // linking, so mutations are not automatically reflected on the state
-      // of disconnected components.
-      vm.isDirty = true;
-    }
-    vm.state = 2 /* VMState.disconnected */;
-    // reporting disconnection
-    var disconnected = Services.disconnected;
-    if (disconnected) {
-      invokeServiceHook(vm, disconnected);
-    }
-    if (hasWireAdapters(vm)) {
-      disconnectWireAdapters(vm);
-    }
-    var disconnectedCallback = vm.def.disconnectedCallback;
-    if (!isUndefined$1(disconnectedCallback)) {
-      logOperationStart(5 /* OperationId.DisconnectedCallback */, vm);
-      invokeComponentCallback(vm, disconnectedCallback);
-      logOperationEnd(5 /* OperationId.DisconnectedCallback */, vm);
-    }
-  }
-  function runChildNodesDisconnectedCallback(vm) {
-    var vCustomElementCollection = vm.velements;
-    // Reporting disconnection for every child in inverse order since they are
-    // inserted in reserved order.
-    for (var _i25 = vCustomElementCollection.length - 1; _i25 >= 0; _i25 -= 1) {
-      var elm = vCustomElementCollection[_i25].elm;
-      // There are two cases where the element could be undefined:
-      // * when there is an error during the construction phase, and an error
-      //   boundary picks it, there is a possibility that the VCustomElement
-      //   is not properly initialized, and therefore is should be ignored.
-      // * when slotted custom element is not used by the element where it is
-      //   slotted into it, as  a result, the custom element was never
-      //   initialized.
-      if (!isUndefined$1(elm)) {
-        var childVM = getAssociatedVMIfPresent(elm);
-        // The VM associated with the element might be associated undefined
-        // in the case where the VM failed in the middle of its creation,
-        // eg: constructor throwing before invoking super().
-        if (!isUndefined$1(childVM)) {
-          resetComponentStateWhenRemoved(childVM);
-        }
-      }
-    }
-  }
-  function runLightChildNodesDisconnectedCallback(vm) {
-    var adoptedChildren = vm.aChildren;
-    recursivelyDisconnectChildren(adoptedChildren);
-  }
-  /**
-   * The recursion doesn't need to be a complete traversal of the vnode graph,
-   * instead it can be partial, when a custom element vnode is found, we don't
-   * need to continue into its children because by attempting to disconnect the
-   * custom element itself will trigger the removal of anything slotted or anything
-   * defined on its shadow.
-   */
-  function recursivelyDisconnectChildren(vnodes) {
-    for (var _i26 = 0, len = vnodes.length; _i26 < len; _i26 += 1) {
-      var vnode = vnodes[_i26];
-      if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
-        switch (vnode.type) {
-          case 2 /* VNodeType.Element */:
-            recursivelyDisconnectChildren(vnode.children);
-            break;
-          case 3 /* VNodeType.CustomElement */:
-            {
-              var vm = getAssociatedVM(vnode.elm);
-              resetComponentStateWhenRemoved(vm);
-              break;
-            }
-        }
-      }
-    }
-  }
-  // This is a super optimized mechanism to remove the content of the root node (shadow root
-  // for shadow DOM components and the root element itself for light DOM) without having to go
-  // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
-  // children VNodes might not be representing the current state of the DOM.
-  function resetComponentRoot(vm) {
-    var children = vm.children,
-      renderRoot = vm.renderRoot,
-      remove = vm.renderer.remove;
-    for (var _i27 = 0, len = children.length; _i27 < len; _i27++) {
-      var child = children[_i27];
-      if (!isNull(child) && !isUndefined$1(child.elm)) {
-        remove(child.elm, renderRoot);
-      }
-    }
-    vm.children = EmptyArray;
-    runChildNodesDisconnectedCallback(vm);
-    vm.velements = EmptyArray;
-  }
-  function scheduleRehydration(vm) {
-    if (isTrue(vm.isScheduled)) {
-      return;
-    }
-    vm.isScheduled = true;
-    if (rehydrateQueue.length === 0) {
-      addCallbackToNextTick(flushRehydrationQueue);
-    }
-    ArrayPush$1.call(rehydrateQueue, vm);
-  }
-  function getErrorBoundaryVM(vm) {
-    var currentVm = vm;
-    while (!isNull(currentVm)) {
-      if (!isUndefined$1(currentVm.def.errorCallback)) {
-        return currentVm;
-      }
-      currentVm = currentVm.owner;
-    }
-  }
-  function runWithBoundaryProtection(vm, owner, pre, job, post) {
-    var error;
-    pre();
-    try {
-      job();
-    } catch (e) {
-      error = Object(e);
-    } finally {
-      post();
-      if (!isUndefined$1(error)) {
-        addErrorComponentStack(vm, error);
-        var errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
-        if (isUndefined$1(errorBoundaryVm)) {
-          throw error; // eslint-disable-line no-unsafe-finally
-        }
-
-        resetComponentRoot(vm); // remove offenders
-        logOperationStart(6 /* OperationId.ErrorCallback */, vm);
-        // error boundaries must have an ErrorCallback
-        var errorCallback = errorBoundaryVm.def.errorCallback;
-        invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
-        logOperationEnd(6 /* OperationId.ErrorCallback */, vm);
-      }
-    }
-  }
-  function forceRehydration(vm) {
-    // if we must reset the shadowRoot content and render the template
-    // from scratch on an active instance, the way to force the reset
-    // is by replacing the value of old template, which is used during
-    // to determine if the template has changed or not during the rendering
-    // process. If the template returned by render() is different from the
-    // previous stored template, the styles will be reset, along with the
-    // content of the shadowRoot, this way we can guarantee that all children
-    // elements will be throw away, and new instances will be created.
-    vm.cmpTemplate = function () {
-      return [];
-    };
-    if (isFalse(vm.isDirty)) {
-      // forcing the vm to rehydrate in the next tick
-      markComponentAsDirty(vm);
-      scheduleRehydration(vm);
-    }
-  }
-
-  /*
-   * 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
-   */
-  var DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
-  var DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
-  var WIRE_DEBUG_ENTRY = '@wire';
-  var WireMetaMap = new Map();
-  var WireContextRegistrationEvent = /*#__PURE__*/function (_CustomEvent) {
-    _inherits(WireContextRegistrationEvent, _CustomEvent);
-    var _super4 = _createSuper(WireContextRegistrationEvent);
-    function WireContextRegistrationEvent(adapterToken, _ref4) {
-      var _this2;
-      var setNewContext = _ref4.setNewContext,
-        setDisconnectedCallback = _ref4.setDisconnectedCallback;
-      _classCallCheck(this, WireContextRegistrationEvent);
-      _this2 = _super4.call(this, adapterToken, {
-        bubbles: true,
-        composed: true
-      });
-      defineProperties(_assertThisInitialized(_this2), {
-        setNewContext: {
-          value: setNewContext
-        },
-        setDisconnectedCallback: {
-          value: setDisconnectedCallback
-        }
-      });
-      return _this2;
-    }
-    return _createClass(WireContextRegistrationEvent);
-  }( /*#__PURE__*/_wrapNativeSuper(CustomEvent));
-  function createFieldDataCallback(vm, name) {
-    return function (value) {
-      updateComponentValue(vm, name, value);
-    };
-  }
-  function createMethodDataCallback(vm, method) {
-    return function (value) {
-      // dispatching new value into the wired method
-      runWithBoundaryProtection(vm, vm.owner, noop, function () {
-        // job
-        method.call(vm.component, value);
-      }, noop);
-    };
-  }
-  function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
-    var hasPendingConfig = false;
-    // creating the reactive observer for reactive params when needed
-    var ro = createReactiveObserver(function () {
-      if (hasPendingConfig === false) {
-        hasPendingConfig = true;
-        // collect new config in the micro-task
-        Promise.resolve().then(function () {
-          hasPendingConfig = false;
-          // resetting current reactive params
-          ro.reset();
-          // dispatching a new config due to a change in the configuration
-          computeConfigAndUpdate();
-        });
-      }
-    });
-    var computeConfigAndUpdate = function computeConfigAndUpdate() {
-      var config;
-      ro.observe(function () {
-        return config = configCallback(component);
-      });
-      // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
-      // TODO: dev-mode validation of config based on the adapter.configSchema
-      // @ts-ignore it is assigned in the observe() callback
-      callbackWhenConfigIsReady(config);
-    };
-    return {
-      computeConfigAndUpdate: computeConfigAndUpdate,
-      ro: ro
-    };
-  }
-  function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
-    var adapter = wireDef.adapter;
-    var adapterContextToken = getAdapterToken(adapter);
-    if (isUndefined$1(adapterContextToken)) {
-      return; // no provider found, nothing to be done
-    }
-
-    var elm = vm.elm,
-      _vm$context = vm.context,
-      wiredConnecting = _vm$context.wiredConnecting,
-      wiredDisconnecting = _vm$context.wiredDisconnecting,
-      dispatchEvent = vm.renderer.dispatchEvent;
-    // waiting for the component to be connected to formally request the context via the token
-    ArrayPush$1.call(wiredConnecting, function () {
-      // This event is responsible for connecting the host element with another
-      // element in the composed path that is providing contextual data. The provider
-      // must be listening for a special dom event with the name corresponding to the value of
-      // `adapterContextToken`, which will remain secret and internal to this file only to
-      // guarantee that the linkage can be forged.
-      var contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
-        setNewContext: function setNewContext(newContext) {
-          // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
-          // TODO: dev-mode validation of config based on the adapter.contextSchema
-          callbackWhenContextIsReady(newContext);
-        },
-        setDisconnectedCallback: function setDisconnectedCallback(disconnectCallback) {
-          // adds this callback into the disconnect bucket so it gets disconnected from parent
-          // the the element hosting the wire is disconnected
-          ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
-        }
-      });
-      dispatchEvent(elm, contextRegistrationEvent);
-    });
-  }
-  function createConnector(vm, name, wireDef) {
-    var method = wireDef.method,
-      adapter = wireDef.adapter,
-      configCallback = wireDef.configCallback,
-      dynamic = wireDef.dynamic;
-    var debugInfo;
-    if (process.env.NODE_ENV !== 'production') {
-      var wiredPropOrMethod = isUndefined$1(method) ? name : method.name;
-      debugInfo = create(null);
-      debugInfo.wasDataProvisionedForConfig = false;
-      vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
-    }
-    var fieldOrMethodCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
-    var dataCallback = function dataCallback(value) {
-      if (process.env.NODE_ENV !== 'production') {
-        debugInfo.data = value;
-        // Note: most of the time, the data provided is for the current config, but there may be
-        // some conditions in which it does not, ex:
-        // race conditions in a poor network while the adapter does not cancel a previous request.
-        debugInfo.wasDataProvisionedForConfig = true;
-      }
-      fieldOrMethodCallback(value);
-    };
-    var context;
-    var connector;
-    // Workaround to pass the component element associated to this wire adapter instance.
-    defineProperty(dataCallback, DeprecatedWiredElementHost, {
-      value: vm.elm
-    });
-    defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
-      value: dynamic
-    });
-    runWithBoundaryProtection(vm, vm, noop, function () {
-      // job
-      connector = new adapter(dataCallback);
-    }, noop);
-    var updateConnectorConfig = function updateConnectorConfig(config) {
-      // every time the config is recomputed due to tracking,
-      // this callback will be invoked with the new computed config
-      runWithBoundaryProtection(vm, vm, noop, function () {
-        // job
-        if (process.env.NODE_ENV !== 'production') {
-          debugInfo.config = config;
-          debugInfo.context = context;
-          debugInfo.wasDataProvisionedForConfig = false;
-        }
-        connector.update(config, context);
-      }, noop);
-    };
-    // Computes the current wire config and calls the update method on the wire adapter.
-    // If it has params, we will need to observe changes in the next tick.
-    var _createConfigWatcher = createConfigWatcher(vm.component, configCallback, updateConnectorConfig),
-      computeConfigAndUpdate = _createConfigWatcher.computeConfigAndUpdate,
-      ro = _createConfigWatcher.ro;
-    // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
-    if (!isUndefined$1(adapter.contextSchema)) {
-      createContextWatcher(vm, wireDef, function (newContext) {
-        // every time the context is pushed into this component,
-        // this callback will be invoked with the new computed context
-        if (context !== newContext) {
-          context = newContext;
-          // Note: when new context arrives, the config will be recomputed and pushed along side the new
-          // context, this is to preserve the identity characteristics, config should not have identity
-          // (ever), while context can have identity
-          if (vm.state === 1 /* VMState.connected */) {
-            computeConfigAndUpdate();
-          }
+      // of disconnected components.
+      vm.isDirty = true;
+    }
+    vm.state = 2 /* VMState.disconnected */;
+    // reporting disconnection
+    var disconnected = Services.disconnected;
+    if (disconnected) {
+      invokeServiceHook(vm, disconnected);
+    }
+    if (hasWireAdapters(vm)) {
+      disconnectWireAdapters(vm);
+    }
+    var disconnectedCallback = vm.def.disconnectedCallback;
+    if (!isUndefined$1(disconnectedCallback)) {
+      logOperationStart(5 /* OperationId.DisconnectedCallback */, vm);
+      invokeComponentCallback(vm, disconnectedCallback);
+      logOperationEnd(5 /* OperationId.DisconnectedCallback */, vm);
+    }
+  }
+  function runChildNodesDisconnectedCallback(vm) {
+    var vCustomElementCollection = vm.velements;
+    // Reporting disconnection for every child in inverse order since they are
+    // inserted in reserved order.
+    for (var _i30 = vCustomElementCollection.length - 1; _i30 >= 0; _i30 -= 1) {
+      var elm = vCustomElementCollection[_i30].elm;
+      // There are two cases where the element could be undefined:
+      // * when there is an error during the construction phase, and an error
+      //   boundary picks it, there is a possibility that the VCustomElement
+      //   is not properly initialized, and therefore is should be ignored.
+      // * when slotted custom element is not used by the element where it is
+      //   slotted into it, as  a result, the custom element was never
+      //   initialized.
+      if (!isUndefined$1(elm)) {
+        var childVM = getAssociatedVMIfPresent(elm);
+        // The VM associated with the element might be associated undefined
+        // in the case where the VM failed in the middle of its creation,
+        // eg: constructor throwing before invoking super().
+        if (!isUndefined$1(childVM)) {
+          resetComponentStateWhenRemoved(childVM);
         }
-      });
+      }
     }
-    return {
-      // @ts-ignore the boundary protection executes sync, connector is always defined
-      connector: connector,
-      computeConfigAndUpdate: computeConfigAndUpdate,
-      resetConfigWatcher: function resetConfigWatcher() {
-        return ro.reset();
+  }
+  function runLightChildNodesDisconnectedCallback(vm) {
+    var adoptedChildren = vm.aChildren;
+    recursivelyDisconnectChildren(adoptedChildren);
+  }
+  /**
+   * The recursion doesn't need to be a complete traversal of the vnode graph,
+   * instead it can be partial, when a custom element vnode is found, we don't
+   * need to continue into its children because by attempting to disconnect the
+   * custom element itself will trigger the removal of anything slotted or anything
+   * defined on its shadow.
+   */
+  function recursivelyDisconnectChildren(vnodes) {
+    for (var _i31 = 0, len = vnodes.length; _i31 < len; _i31 += 1) {
+      var vnode = vnodes[_i31];
+      if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
+        switch (vnode.type) {
+          case 2 /* VNodeType.Element */:
+            recursivelyDisconnectChildren(vnode.children);
+            break;
+          case 3 /* VNodeType.CustomElement */:
+            {
+              var vm = getAssociatedVM(vnode.elm);
+              resetComponentStateWhenRemoved(vm);
+              break;
+            }
+        }
       }
-    };
+    }
   }
-  var AdapterToTokenMap = new Map();
-  function getAdapterToken(adapter) {
-    return AdapterToTokenMap.get(adapter);
+  // This is a super optimized mechanism to remove the content of the root node (shadow root
+  // for shadow DOM components and the root element itself for light DOM) without having to go
+  // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
+  // children VNodes might not be representing the current state of the DOM.
+  function resetComponentRoot(vm) {
+    var children = vm.children,
+      renderRoot = vm.renderRoot,
+      remove = vm.renderer.remove;
+    for (var _i32 = 0, len = children.length; _i32 < len; _i32++) {
+      var child = children[_i32];
+      if (!isNull(child) && !isUndefined$1(child.elm)) {
+        remove(child.elm, renderRoot);
+      }
+    }
+    vm.children = EmptyArray;
+    runChildNodesDisconnectedCallback(vm);
+    vm.velements = EmptyArray;
   }
-  function setAdapterToken(adapter, token) {
-    AdapterToTokenMap.set(adapter, token);
+  function scheduleRehydration(vm) {
+    if (isTrue(vm.isScheduled)) {
+      return;
+    }
+    vm.isScheduled = true;
+    if (rehydrateQueue.length === 0) {
+      addCallbackToNextTick(flushRehydrationQueue);
+    }
+    ArrayPush$1.call(rehydrateQueue, vm);
   }
-  function storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic) {
-    // support for callable adapters
-    if (adapter.adapter) {
-      adapter = adapter.adapter;
+  function getErrorBoundaryVM(vm) {
+    var currentVm = vm;
+    while (!isNull(currentVm)) {
+      if (!isUndefined$1(currentVm.def.errorCallback)) {
+        return currentVm;
+      }
+      currentVm = currentVm.owner;
     }
-    var method = descriptor.value;
-    var def = {
-      adapter: adapter,
-      method: method,
-      configCallback: configCallback,
-      dynamic: dynamic
-    };
-    WireMetaMap.set(descriptor, def);
   }
-  function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
-    // support for callable adapters
-    if (adapter.adapter) {
-      adapter = adapter.adapter;
+  function runWithBoundaryProtection(vm, owner, pre, job, post) {
+    var error;
+    pre();
+    try {
+      job();
+    } catch (e) {
+      error = Object(e);
+    } finally {
+      post();
+      if (!isUndefined$1(error)) {
+        addErrorComponentStack(vm, error);
+        var errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
+        if (isUndefined$1(errorBoundaryVm)) {
+          throw error; // eslint-disable-line no-unsafe-finally
+        }
+
+        resetComponentRoot(vm); // remove offenders
+        logOperationStart(6 /* OperationId.ErrorCallback */, vm);
+        // error boundaries must have an ErrorCallback
+        var errorCallback = errorBoundaryVm.def.errorCallback;
+        invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
+        logOperationEnd(6 /* OperationId.ErrorCallback */, vm);
+      }
     }
-    var def = {
-      adapter: adapter,
-      configCallback: configCallback,
-      dynamic: dynamic
+  }
+  function forceRehydration(vm) {
+    // if we must reset the shadowRoot content and render the template
+    // from scratch on an active instance, the way to force the reset
+    // is by replacing the value of old template, which is used during
+    // to determine if the template has changed or not during the rendering
+    // process. If the template returned by render() is different from the
+    // previous stored template, the styles will be reset, along with the
+    // content of the shadowRoot, this way we can guarantee that all children
+    // elements will be throw away, and new instances will be created.
+    vm.cmpTemplate = function () {
+      return [];
     };
-    WireMetaMap.set(descriptor, def);
+    if (isFalse(vm.isDirty)) {
+      // forcing the vm to rehydrate in the next tick
+      markComponentAsDirty(vm);
+      scheduleRehydration(vm);
+    }
   }
-  function installWireAdapters(vm) {
-    var context = vm.context,
-      wire = vm.def.wire;
+
+  /*
+   * 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
+   */
+  //
+  // The goal of this code is to detect invalid cross-root ARIA references in synthetic shadow DOM.
+  // These invalid references should be fixed before the offending components can be migrated to native shadow DOM.
+  // When invalid usage is detected, we warn in dev mode and call the reporting API if enabled.
+  // See: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates
+  //
+  // Use the unpatched native getElementById/querySelectorAll rather than the synthetic one
+  var getElementById = _globalThis[KEY__NATIVE_GET_ELEMENT_BY_ID];
+  var querySelectorAll = _globalThis[KEY__NATIVE_QUERY_SELECTOR_ALL];
+  function isSyntheticShadowRootInstance(rootNode) {
+    return rootNode !== document && isTrue(rootNode.synthetic);
+  }
+  function reportViolation(source, target, attrName) {
+    // The vm is either for the source, the target, or both. Either one or both must be using synthetic
+    // shadow for a violation to be detected.
+    var vm = getAssociatedVMIfPresent(source.getRootNode().host);
+    if (isUndefined$1(vm)) {
+      vm = getAssociatedVMIfPresent(target.getRootNode().host);
+    }
+    if (isUndefined$1(vm)) {
+      // vm should never be undefined here, but just to be safe, bail out and don't report
+      return;
+    }
+    report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, vm);
     if (process.env.NODE_ENV !== 'production') {
-      vm.debugInfo[WIRE_DEBUG_ENTRY] = create(null);
+      // Avoid excessively logging to the console in the case of duplicates.
+      logWarnOnce("Element <".concat(source.tagName.toLowerCase(), "> uses attribute \"").concat(attrName, "\" to reference element ") + "<".concat(target.tagName.toLowerCase(), ">, which is not in the same shadow root. This will break in native shadow DOM. ") + "For details, see: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates", vm);
     }
-    var wiredConnecting = context.wiredConnecting = [];
-    var wiredDisconnecting = context.wiredDisconnecting = [];
-    for (var fieldNameOrMethod in wire) {
-      var descriptor = wire[fieldNameOrMethod];
-      var wireDef = WireMetaMap.get(descriptor);
-      if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(wireDef, "Internal Error: invalid wire definition found.");
+  }
+  function parseIdRefAttributeValue(attrValue) {
+    // split on whitespace and skip empty strings after splitting
+    return isString(attrValue) ? ArrayFilter.call(StringSplit.call(attrValue, /\s+/), Boolean) : [];
+  }
+  function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
+    var root = elm.getRootNode();
+    if (!isSyntheticShadowRootInstance(root)) {
+      return;
+    }
+    if (attrName === 'id') {
+      // elm is the target, find the source
+      if (!isString(attrValue) || attrValue.length === 0) {
+        // if our id is null or empty, nobody can reference us
+        return;
       }
-      if (!isUndefined$1(wireDef)) {
-        (function () {
-          var _createConnector = createConnector(vm, fieldNameOrMethod, wireDef),
-            connector = _createConnector.connector,
-            computeConfigAndUpdate = _createConnector.computeConfigAndUpdate,
-            resetConfigWatcher = _createConnector.resetConfigWatcher;
-          var hasDynamicParams = wireDef.dynamic.length > 0;
-          ArrayPush$1.call(wiredConnecting, function () {
-            connector.connect();
-            if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
-              if (hasDynamicParams) {
-                Promise.resolve().then(computeConfigAndUpdate);
-                return;
-              }
+      var _iterator5 = _createForOfIteratorHelper(ID_REFERENCING_ATTRIBUTES_SET),
+        _step5;
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var idRefAttrName = _step5.value;
+          // Query all global elements with this attribute. The attribute selector syntax `~=` is for values
+          // that reference multiple IDs, separated by whitespace.
+          var query = "[".concat(idRefAttrName, "~=\"").concat(CSS.escape(attrValue), "\"]");
+          var sourceElements = querySelectorAll.call(document, query);
+          for (var _i33 = 0; _i33 < sourceElements.length; _i33++) {
+            var sourceElement = sourceElements[_i33];
+            var sourceRoot = sourceElement.getRootNode();
+            if (sourceRoot !== root) {
+              reportViolation(sourceElement, elm, idRefAttrName);
+              break;
             }
-            computeConfigAndUpdate();
-          });
-          ArrayPush$1.call(wiredDisconnecting, function () {
-            connector.disconnect();
-            resetConfigWatcher();
-          });
-        })();
+          }
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+    } else {
+      // elm is the source, find the target
+      var ids = parseIdRefAttributeValue(attrValue);
+      var _iterator6 = _createForOfIteratorHelper(ids),
+        _step6;
+      try {
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var id = _step6.value;
+          var target = getElementById.call(document, id);
+          if (!isNull(target)) {
+            var targetRoot = target.getRootNode();
+            if (targetRoot !== root) {
+              // target element's shadow root is not the same as ours
+              reportViolation(elm, target, attrName);
+            }
+          }
+        }
+      } catch (err) {
+        _iterator6.e(err);
+      } finally {
+        _iterator6.f();
       }
     }
   }
-  function connectWireAdapters(vm) {
-    var wiredConnecting = vm.context.wiredConnecting;
-    for (var _i28 = 0, len = wiredConnecting.length; _i28 < len; _i28 += 1) {
-      wiredConnecting[_i28]();
+  var enabled = false;
+  // We want to avoid patching globals whenever possible, so this should be tree-shaken out in prod-mode and if
+  // reporting is not enabled. It should also only run once
+  function enableDetection() {
+    if (enabled) {
+      return; // don't double-apply the patches
     }
-  }
-  function disconnectWireAdapters(vm) {
-    var wiredDisconnecting = vm.context.wiredDisconnecting;
-    runWithBoundaryProtection(vm, vm, noop, function () {
-      // job
-      for (var _i29 = 0, len = wiredDisconnecting.length; _i29 < len; _i29 += 1) {
-        wiredDisconnecting[_i29]();
+
+    enabled = true;
+    var _setAttribute = Element.prototype.setAttribute;
+    // Detect calling `setAttribute` to set an idref or an id
+    assign(Element.prototype, {
+      setAttribute: function setAttribute(attrName, attrValue) {
+        _setAttribute.call(this, attrName, attrValue);
+        if (attrName === 'id' || ID_REFERENCING_ATTRIBUTES_SET.has(attrName)) {
+          detectSyntheticCrossRootAria(this, attrName, attrValue);
+        }
       }
-    }, noop);
+    });
+    // Detect `elm.id = 'foo'`
+    var idDescriptor = getOwnPropertyDescriptor$1(Element.prototype, 'id');
+    if (!isUndefined$1(idDescriptor)) {
+      var _get3 = idDescriptor.get,
+        _set3 = idDescriptor.set;
+      // These should always be a getter and a setter, but if someone is monkeying with the global descriptor, ignore it
+      if (isFunction$1(_get3) && isFunction$1(_set3)) {
+        defineProperty(Element.prototype, 'id', {
+          get: function get() {
+            return _get3.call(this);
+          },
+          set: function set(value) {
+            _set3.call(this, value);
+            detectSyntheticCrossRootAria(this, 'id', value);
+          },
+          // On the default descriptor for 'id', enumerable and configurable are true
+          enumerable: true,
+          configurable: true
+        });
+      }
+    }
+  }
+  // Our detection logic relies on some modern browser features. We can just skip reporting the data
+  // for unsupported browsers
+  function supportsCssEscape() {
+    return typeof CSS !== 'undefined' && isFunction$1(CSS.escape);
+  }
+  // If this page is not using synthetic shadow, then we don't need to install detection. Note
+  // that we are assuming synthetic shadow is loaded before LWC.
+  function isSyntheticShadowLoaded() {
+    // We should probably be calling `renderer.isSyntheticShadowDefined`, but 1) we don't have access to the renderer,
+    // and 2) this code needs to run in @lwc/engine-core, so it can access `logWarn()` and `report()`.
+    return hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
+  }
+  // Detecting cross-root ARIA in synthetic shadow only makes sense for the browser
+  if (supportsCssEscape() && isSyntheticShadowLoaded()) {
+    // Always run detection in dev mode, so we can at least print to the console
+    if (process.env.NODE_ENV !== 'production') {
+      enableDetection();
+    } else {
+      // In prod mode, only enable detection if reporting is enabled
+      onReportingEnabled(enableDetection);
+    }
   }
 
   /*
@@ -6683,8 +7057,8 @@
     var nextNode = node;
     var anchor = null;
     var renderer = owner.renderer;
-    for (var _i30 = 0; _i30 < children.length; _i30++) {
-      var childVnode = children[_i30];
+    for (var _i34 = 0; _i34 < children.length; _i34++) {
+      var childVnode = children[_i34];
       if (!isNull(childVnode)) {
         if (nextNode) {
           nextNode = hydrateNode(nextNode, childVnode, renderer);
@@ -6762,8 +7136,8 @@
     var nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
-    for (var _i31 = 0, _Object$entries = Object.entries(attrs); _i31 < _Object$entries.length; _i31++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i31], 2),
+    for (var _i35 = 0, _Object$entries = Object.entries(attrs); _i35 < _Object$entries.length; _i35++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i35], 2),
         attrName = _Object$entries$_i[0],
         attrValue = _Object$entries$_i[1];
       var owner = vnode.owner;
@@ -6864,8 +7238,8 @@
       var parsedVnodeStyle = parseStyleText(elmStyle);
       var expectedStyle = [];
       // styleMap is used when style is set to static value.
-      for (var _i32 = 0, n = styleDecls.length; _i32 < n; _i32++) {
-        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i32], 3),
+      for (var _i36 = 0, n = styleDecls.length; _i36 < n; _i36++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i36], 3),
           prop = _styleDecls$_i2[0],
           value = _styleDecls$_i2[1],
           important = _styleDecls$_i2[2];
@@ -6982,11 +7356,11 @@
   function warnOnArrayMutation(stylesheets) {
     // We can't handle users calling Array.prototype.slice.call(tmpl.stylesheets), but
     // we can at least warn when they use the most common mutation methods.
-    var _iterator4 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
-      _step4;
+    var _iterator7 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
+      _step7;
     try {
       var _loop2 = function _loop2() {
-        var prop = _step4.value;
+        var prop = _step7.value;
         var originalArrayMethod = getOriginalArrayMethod(prop);
         stylesheets[prop] = function arrayMutationWarningWrapper() {
           logError("Mutating the \"stylesheets\" array on a template function " + "is deprecated and may be removed in a future version of LWC.");
@@ -6994,24 +7368,24 @@
           return originalArrayMethod.apply(this, arguments);
         };
       };
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
         _loop2();
       }
     } catch (err) {
-      _iterator4.e(err);
+      _iterator7.e(err);
     } finally {
-      _iterator4.f();
+      _iterator7.f();
     }
   }
   // Warn if the user tries to mutate a stylesheet factory function, e.g.:
   // `stylesheet.$scoped$ = true`
   function warnOnStylesheetFunctionMutation(stylesheet) {
     // We could warn on other properties, but in practice only certain expandos are meaningful to LWC at runtime
-    var _iterator5 = _createForOfIteratorHelper(STYLESHEET_FUNCTION_EXPANDOS),
-      _step5;
+    var _iterator8 = _createForOfIteratorHelper(STYLESHEET_FUNCTION_EXPANDOS),
+      _step8;
     try {
       var _loop3 = function _loop3() {
-        var prop = _step5.value;
+        var prop = _step8.value;
         var value = stylesheet[prop];
         defineProperty(stylesheet, prop, {
           enumerable: true,
@@ -7025,13 +7399,13 @@
           }
         });
       };
-      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
         _loop3();
       }
     } catch (err) {
-      _iterator5.e(err);
+      _iterator8.e(err);
     } finally {
-      _iterator5.f();
+      _iterator8.f();
     }
   }
   // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
@@ -7053,8 +7427,8 @@
   // Deep-traverse an array (of arrays) of stylesheet factory functions, and call the callback for every array/function
   function traverseStylesheets(stylesheets, callback) {
     callback(stylesheets);
-    for (var _i33 = 0; _i33 < stylesheets.length; _i33++) {
-      var stylesheet = stylesheets[_i33];
+    for (var _i37 = 0; _i37 < stylesheets.length; _i37++) {
+      var stylesheet = stylesheets[_i37];
       if (isArray$1(stylesheet)) {
         traverseStylesheets(stylesheet, callback);
       } else {
@@ -7100,11 +7474,11 @@
         if (!isUndefined$1(tmpl.stylesheets)) {
           warnOnStylesheetsMutation(tmpl.stylesheets);
         }
-        var _iterator6 = _createForOfIteratorHelper(TEMPLATE_PROPS),
-          _step6;
+        var _iterator9 = _createForOfIteratorHelper(TEMPLATE_PROPS),
+          _step9;
         try {
           var _loop4 = function _loop4() {
-            var prop = _step6.value;
+            var prop = _step9.value;
             var value = tmpl[prop];
             defineProperty(tmpl, prop, {
               enumerable: true,
@@ -7120,13 +7494,13 @@
               }
             });
           };
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
             _loop4();
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator9.e(err);
         } finally {
-          _iterator6.f();
+          _iterator9.f();
         }
         var originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
         defineProperty(tmpl, 'stylesheetTokens', {
@@ -7167,7 +7541,7 @@
     }
     return ctor;
   }
-  /* version: 2.33.0 */
+  /* version: 2.35.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7270,7 +7644,9 @@
   //
   // 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 = function () {
       stylesheetCache.clear();
@@ -7849,17 +8225,17 @@
     function flushPendingWhenDefinedCallbacks(tagName, ctor) {
       var resolvers = pendingWhenDefinedCallbacks.get(tagName);
       if (!isUndefined$1(resolvers)) {
-        var _iterator7 = _createForOfIteratorHelper(resolvers),
-          _step7;
+        var _iterator10 = _createForOfIteratorHelper(resolvers),
+          _step10;
         try {
-          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-            var resolver = _step7.value;
+          for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+            var resolver = _step10.value;
             resolver(ctor);
           }
         } catch (err) {
-          _iterator7.e(err);
+          _iterator10.e(err);
         } finally {
-          _iterator7.f();
+          _iterator10.f();
         }
       }
       pendingWhenDefinedCallbacks.delete(tagName);
@@ -7909,11 +8285,11 @@
       var awaiting = awaitingUpgrade.get(tagName);
       if (!isUndefined$1(awaiting)) {
         awaitingUpgrade.delete(tagName);
-        var _iterator8 = _createForOfIteratorHelper(awaiting),
-          _step8;
+        var _iterator11 = _createForOfIteratorHelper(awaiting),
+          _step11;
         try {
-          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-            var element = _step8.value;
+          for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+            var element = _step11.value;
             var registeredDefinition = pendingRegistryForElement.get(element);
             // At this point, registeredDefinition should never be undefined because awaitingUpgrade
             // is only populated when we haven't run internalUpgrade yet, and we only populate
@@ -7925,9 +8301,9 @@
             }
           }
         } catch (err) {
-          _iterator8.e(err);
+          _iterator11.e(err);
         } finally {
-          _iterator8.f();
+          _iterator11.f();
         }
       }
       // If anyone called customElements.whenDefined() and is still waiting for a promise resolution, resolve now
@@ -8204,7 +8580,7 @@
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 2.33.0 */
+      /** version: 2.35.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8263,17 +8639,17 @@
         exports.createFragment = function (html) {
           var wrapperTags = topLevelWrappingMap[getTagName(html)];
           if (!isUndefined(wrapperTags)) {
-            var _iterator9 = _createForOfIteratorHelper(wrapperTags),
-              _step9;
+            var _iterator12 = _createForOfIteratorHelper(wrapperTags),
+              _step12;
             try {
-              for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-                var wrapperTag = _step9.value;
+              for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+                var wrapperTag = _step12.value;
                 html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
               }
             } catch (err) {
-              _iterator9.e(err);
+              _iterator12.e(err);
             } finally {
-              _iterator9.f();
+              _iterator12.f();
             }
           }
           // For IE11, the document title must not be undefined, but it can be an empty string
@@ -8282,7 +8658,7 @@
           doc.body.innerHTML = html;
           var content = doc.body;
           if (!isUndefined(wrapperTags)) {
-            for (var _i34 = 0; _i34 < wrapperTags.length; _i34++) {
+            for (var _i38 = 0; _i38 < wrapperTags.length; _i38++) {
               content = content.firstChild;
             }
           }
@@ -8475,8 +8851,8 @@
       tagName: element.tagName.toLowerCase(),
       hydrated: true
     });
-    for (var _i35 = 0, _Object$entries2 = Object.entries(props); _i35 < _Object$entries2.length; _i35++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i35], 2),
+    for (var _i39 = 0, _Object$entries2 = Object.entries(props); _i39 < _Object$entries2.length; _i39++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i39], 2),
         key = _Object$entries2$_i[0],
         value = _Object$entries2$_i[1];
       element[key] = value;
@@ -8770,10 +9146,11 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.33.0 */
+  /* version: 2.35.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
+  exports.__unstable__ReportingControl = reportingControl;
   exports.api = api$1;
   exports.buildCustomElementConstructor = deprecatedBuildCustomElementConstructor;
   exports.createContextProvider = createContextProvider;