@lwc/engine-core 2.33.0 → 2.35.0

package/dist/engine-core.cjs.js

@@ -34,94 +34,167 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-let nextTickCallbackQueue = [];
-const SPACE_CHAR = 32;
-const EmptyObject = shared.seal(shared.create(null));
-const EmptyArray = shared.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 **/
+const onReportingEnabledCallbacks = [];
+/** The currently assigned reporting dispatcher. */
+let currentDispatcher$1 = shared.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.
+ */
+let enabled$1 = false;
+const reportingControl = {
+    /**
+     * Attach a new reporting control (aka dispatcher).
+     *
+     * @param dispatcher - reporting control
+     */
+    attachDispatcher(dispatcher) {
+        enabled$1 = true;
+        currentDispatcher$1 = dispatcher;
+        for (const callback of onReportingEnabledCallbacks) {
+            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);
+            }
         }
+        onReportingEnabledCallbacks.length = 0; // clear the array
+    },
+    /**
+     * Detach the current reporting control (aka dispatcher).
+     */
+    detachDispatcher() {
+        enabled$1 = false;
+        currentDispatcher$1 = shared.noop;
+    },
+};
+/**
+ * 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();
     }
-    const callbacks = nextTickCallbackQueue;
-    nextTickCallbackQueue = []; // reset to a new queue
-    for (let i = 0, len = callbacks.length; i < len; i += 1) {
-        callbacks[i]();
+    else {
+        // call later
+        onReportingEnabledCallbacks.push(callback);
     }
 }
-function addCallbackToNextTick(callback) {
-    if (process.env.NODE_ENV !== 'production') {
-        if (!shared.isFunction(callback)) {
-            throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
-        }
-    }
-    if (nextTickCallbackQueue.length === 0) {
-        Promise.resolve().then(flushCallbackQueue);
+/**
+ * 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);
     }
-    shared.ArrayPush.call(nextTickCallbackQueue, callback);
 }
-function guid() {
-    function s4() {
-        return Math.floor((1 + Math.random()) * 0x10000)
-            .toString(16)
-            .substring(1);
+
+/*
+ * 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 `<${shared.StringToLowerCase.call(vm.tagName)}>`;
+}
+// TODO [#1695]: Unify getComponentStack and getErrorComponentStack
+function getComponentStack(vm) {
+    const stack = [];
+    let prefix = '';
+    while (!shared.isNull(vm.owner)) {
+        shared.ArrayPush.call(stack, prefix + getComponentTag(vm));
+        vm = vm.owner;
+        prefix += '\t';
     }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+    return shared.ArrayJoin.call(stack, '\n');
 }
-// Borrowed from Vue template compiler.
-// https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
-const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
-const PROPERTY_DELIMITER = /:(.+)/;
-function parseStyleText(cssText) {
-    const styleMap = {};
-    const declarations = cssText.split(DECLARATION_DELIMITER);
-    for (const declaration of declarations) {
-        if (declaration) {
-            const [prop, value] = declaration.split(PROPERTY_DELIMITER);
-            if (prop !== undefined && value !== undefined) {
-                styleMap[prop.trim()] = value.trim();
-            }
-        }
+function getErrorComponentStack(vm) {
+    const wcStack = [];
+    let currentVm = vm;
+    while (!shared.isNull(currentVm)) {
+        shared.ArrayPush.call(wcStack, getComponentTag(currentVm));
+        currentVm = currentVm.owner;
     }
-    return styleMap;
+    return wcStack.reverse().join('\n\t');
 }
-// Make a shallow copy of an object but omit the given key
-function cloneAndOmitKey(object, keyToOmit) {
-    const result = {};
-    for (const key of Object.keys(object)) {
-        if (key !== keyToOmit) {
-            result[key] = object[key];
-        }
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+function addErrorComponentStack(vm, error) {
+    if (!shared.isFrozen(error) && shared.isUndefined(error.wcStack)) {
+        const wcStack = getErrorComponentStack(vm);
+        shared.defineProperty(error, 'wcStack', {
+            get() {
+                return wcStack;
+            },
+        });
     }
-    return result;
 }
-function flattenStylesheets(stylesheets) {
-    const list = [];
-    for (const stylesheet of stylesheets) {
-        if (!Array.isArray(stylesheet)) {
-            list.push(stylesheet);
-        }
-        else {
-            list.push(...flattenStylesheets(stylesheet));
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const alreadyLoggedMessages = new Set();
+// @ts-ignore
+if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
+    // @ts-ignore
+    window.__lwcResetAlreadyLoggedMessages = () => {
+        alreadyLoggedMessages.clear();
+    };
+}
+function log(method, message, vm, once) {
+    let msg = `[LWC ${method}]: ${message}`;
+    if (!shared.isUndefined(vm)) {
+        msg = `${msg}\n${getComponentStack(vm)}`;
+    }
+    if (once) {
+        if (alreadyLoggedMessages.has(msg)) {
+            return;
         }
+        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' && shared.isUndefined(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.
-    const 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.
@@ -257,81 +330,98 @@ function createReactiveObserver(callback) {
  * 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 `<${shared.StringToLowerCase.call(vm.tagName)}>`;
-}
-// TODO [#1695]: Unify getComponentStack and getErrorComponentStack
-function getComponentStack(vm) {
-    const stack = [];
-    let prefix = '';
-    while (!shared.isNull(vm.owner)) {
-        shared.ArrayPush.call(stack, prefix + getComponentTag(vm));
-        vm = vm.owner;
-        prefix += '\t';
-    }
-    return shared.ArrayJoin.call(stack, '\n');
-}
-function getErrorComponentStack(vm) {
-    const wcStack = [];
-    let currentVm = vm;
-    while (!shared.isNull(currentVm)) {
-        shared.ArrayPush.call(wcStack, getComponentTag(currentVm));
-        currentVm = currentVm.owner;
+let nextTickCallbackQueue = [];
+const SPACE_CHAR = 32;
+const EmptyObject = shared.seal(shared.create(null));
+const EmptyArray = shared.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 (!shared.isFrozen(error) && shared.isUndefined(error.wcStack)) {
-        const wcStack = getErrorComponentStack(vm);
-        shared.defineProperty(error, 'wcStack', {
-            get() {
-                return wcStack;
-            },
-        });
+    const callbacks = nextTickCallbackQueue;
+    nextTickCallbackQueue = []; // reset to a new queue
+    for (let i = 0, len = callbacks.length; i < len; i += 1) {
+        callbacks[i]();
     }
 }
-
-/*
- * 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) {
-    let msg = `[LWC ${method}]: ${message}`;
-    if (!shared.isUndefined(vm)) {
-        msg = `${msg}\n${getComponentStack(vm)}`;
-    }
-    if (process.env.NODE_ENV === 'test') {
-        /* eslint-disable-next-line no-console */
-        console[method](msg);
-        return;
-    }
-    try {
-        throw new Error(msg);
+function addCallbackToNextTick(callback) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (!shared.isFunction(callback)) {
+            throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
+        }
     }
-    catch (e) {
-        /* eslint-disable-next-line no-console */
-        console[method](e);
+    if (nextTickCallbackQueue.length === 0) {
+        Promise.resolve().then(flushCallbackQueue);
     }
+    shared.ArrayPush.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();
 }
-
-/*
- * Copyright (c) 2020, salesforce.com, inc.
- * All rights reserved.
+// Borrowed from Vue template compiler.
+// https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
+const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+const PROPERTY_DELIMITER = /:(.+)/;
+function parseStyleText(cssText) {
+    const styleMap = {};
+    const declarations = cssText.split(DECLARATION_DELIMITER);
+    for (const declaration of declarations) {
+        if (declaration) {
+            const [prop, value] = declaration.split(PROPERTY_DELIMITER);
+            if (prop !== undefined && value !== undefined) {
+                styleMap[prop.trim()] = value.trim();
+            }
+        }
+    }
+    return styleMap;
+}
+// Make a shallow copy of an object but omit the given key
+function cloneAndOmitKey(object, keyToOmit) {
+    const result = {};
+    for (const key of Object.keys(object)) {
+        if (key !== keyToOmit) {
+            result[key] = object[key];
+        }
+    }
+    return result;
+}
+function flattenStylesheets(stylesheets) {
+    const list = [];
+    for (const stylesheet of stylesheets) {
+        if (!Array.isArray(stylesheet)) {
+            list.push(stylesheet);
+        }
+        else {
+            list.push(...flattenStylesheets(stylesheet));
+        }
+    }
+    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' && shared.isUndefined(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.
+    const 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;
+    }
+}
+
+/*
+ * Copyright (c) 2020, 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
  */
@@ -378,7 +468,10 @@ function offsetPropertyErrorMessage(name) {
 // Global HTML Attributes & Properties
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
-const globalHTMLProperties = shared.assign(shared.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.
+const globalHTMLProperties = {
     accessKey: {
         attribute: 'accesskey',
     },
@@ -463,7 +556,7 @@ const globalHTMLProperties = shared.assign(shared.create(null), {
     role: {
         attribute: 'role',
     },
-});
+};
 let controlledElement = null;
 let controlledAttributeName;
 function isAttributeLocked(elm, attrName) {
@@ -1927,89 +2020,377 @@ function createObservedFieldPropertyDescriptor(key) {
  * 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') {
-        shared.assert.fail(`@api decorator can only be used as a decorator function.`);
-    }
-    throw new Error();
+const DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
+const DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
+const WIRE_DEBUG_ENTRY = '@wire';
+const WireMetaMap = new Map();
+class WireContextRegistrationEvent extends CustomEvent {
+  constructor(adapterToken, {
+    setNewContext,
+    setDisconnectedCallback
+  }) {
+    super(adapterToken, {
+      bubbles: true,
+      composed: true
+    });
+    shared.defineProperties(this, {
+      setNewContext: {
+        value: setNewContext
+      },
+      setDisconnectedCallback: {
+        value: setDisconnectedCallback
+      }
+    });
+  }
 }
-function createPublicPropertyDescriptor(key) {
-    return {
-        get() {
-            const vm = getAssociatedVM(this);
-            if (isBeingConstructed(vm)) {
-                if (process.env.NODE_ENV !== 'production') {
-                    logError(`Can’t read the value of property \`${shared.toString(key)}\` from the constructor because the owner component hasn’t set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
-                }
-                return;
-            }
-            componentValueObserved(vm, key);
-            return vm.cmpProps[key];
-        },
-        set(newValue) {
-            const vm = getAssociatedVM(this);
-            if (process.env.NODE_ENV !== 'production') {
-                const vmBeingRendered = getVMBeingRendered();
-                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
-            }
-            vm.cmpProps[key] = newValue;
-            componentValueMutated(vm, key);
-        },
-        enumerable: true,
-        configurable: true,
-    };
+function createFieldDataCallback(vm, name) {
+  return value => {
+    updateComponentValue(vm, name, value);
+  };
 }
-function createPublicAccessorDescriptor(key, descriptor) {
-    const { get, set, enumerable, configurable } = descriptor;
-    if (!shared.isFunction(get)) {
-        if (process.env.NODE_ENV !== 'production') {
-            shared.assert.invariant(shared.isFunction(get), `Invalid compiler output for public accessor ${shared.toString(key)} decorated with @api`);
-        }
-        throw new Error();
+function createMethodDataCallback(vm, method) {
+  return value => {
+    // dispatching new value into the wired method
+    runWithBoundaryProtection(vm, vm.owner, shared.noop, () => {
+      // job
+      method.call(vm.component, value);
+    }, shared.noop);
+  };
+}
+function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
+  let hasPendingConfig = false;
+  // creating the reactive observer for reactive params when needed
+  const ro = createReactiveObserver(() => {
+    if (hasPendingConfig === false) {
+      hasPendingConfig = true;
+      // collect new config in the micro-task
+      Promise.resolve().then(() => {
+        hasPendingConfig = false;
+        // resetting current reactive params
+        ro.reset();
+        // dispatching a new config due to a change in the configuration
+        computeConfigAndUpdate();
+      });
     }
-    return {
-        get() {
-            if (process.env.NODE_ENV !== 'production') {
-                // Assert that the this value is an actual Component with an associated VM.
-                getAssociatedVM(this);
-            }
-            return get.call(this);
-        },
-        set(newValue) {
-            const vm = getAssociatedVM(this);
-            if (process.env.NODE_ENV !== 'production') {
-                const vmBeingRendered = getVMBeingRendered();
-                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
-            }
-            if (set) {
-                set.call(this, newValue);
-            }
-            else if (process.env.NODE_ENV !== 'production') {
-                shared.assert.fail(`Invalid attempt to set a new value for property ${shared.toString(key)} of ${vm} that does not has a setter decorated with @api.`);
-            }
-        },
-        enumerable,
-        configurable,
-    };
+  });
+  const computeConfigAndUpdate = () => {
+    let config;
+    ro.observe(() => 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,
+    ro
+  };
 }
+function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
+  const {
+    adapter
+  } = wireDef;
+  const adapterContextToken = getAdapterToken(adapter);
+  if (shared.isUndefined(adapterContextToken)) {
+    return; // no provider found, nothing to be done
+  }
 
-/*
- * 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);
+  const {
+    elm,
+    context: {
+      wiredConnecting,
+      wiredDisconnecting
+    },
+    renderer: {
+      dispatchEvent
     }
+  } = vm;
+  // waiting for the component to be connected to formally request the context via the token
+  shared.ArrayPush.call(wiredConnecting, () => {
+    // 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.
+    const contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
+      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(disconnectCallback) {
+        // adds this callback into the disconnect bucket so it gets disconnected from parent
+        // the the element hosting the wire is disconnected
+        shared.ArrayPush.call(wiredDisconnecting, disconnectCallback);
+      }
+    });
+    dispatchEvent(elm, contextRegistrationEvent);
+  });
+}
+function createConnector(vm, name, wireDef) {
+  const {
+    method,
+    adapter,
+    configCallback,
+    dynamic
+  } = wireDef;
+  let debugInfo;
+  if (process.env.NODE_ENV !== 'production') {
+    const wiredPropOrMethod = shared.isUndefined(method) ? name : method.name;
+    debugInfo = shared.create(null);
+    debugInfo.wasDataProvisionedForConfig = false;
+    vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
+  }
+  const fieldOrMethodCallback = shared.isUndefined(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
+  const dataCallback = value => {
     if (process.env.NODE_ENV !== 'production') {
-        shared.assert.fail(`@track decorator can only be used with one argument to return a trackable object, or as a decorator function.`);
+      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;
     }
-    throw new Error();
-}
+    fieldOrMethodCallback(value);
+  };
+  let context;
+  let connector;
+  // Workaround to pass the component element associated to this wire adapter instance.
+  shared.defineProperty(dataCallback, DeprecatedWiredElementHost, {
+    value: vm.elm
+  });
+  shared.defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
+    value: dynamic
+  });
+  runWithBoundaryProtection(vm, vm, shared.noop, () => {
+    // job
+    connector = new adapter(dataCallback);
+  }, shared.noop);
+  const updateConnectorConfig = config => {
+    // every time the config is recomputed due to tracking,
+    // this callback will be invoked with the new computed config
+    runWithBoundaryProtection(vm, vm, shared.noop, () => {
+      // job
+      if (process.env.NODE_ENV !== 'production') {
+        debugInfo.config = config;
+        debugInfo.context = context;
+        debugInfo.wasDataProvisionedForConfig = false;
+      }
+      connector.update(config, context);
+    }, shared.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.
+  const {
+    computeConfigAndUpdate,
+    ro
+  } = createConfigWatcher(vm.component, configCallback, updateConnectorConfig);
+  // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
+  if (!shared.isUndefined(adapter.contextSchema)) {
+    createContextWatcher(vm, wireDef, 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,
+    computeConfigAndUpdate,
+    resetConfigWatcher: () => ro.reset()
+  };
+}
+const 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;
+  }
+  const method = descriptor.value;
+  const def = {
+    adapter,
+    method,
+    configCallback,
+    dynamic
+  };
+  WireMetaMap.set(descriptor, def);
+}
+function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
+  // support for callable adapters
+  if (adapter.adapter) {
+    adapter = adapter.adapter;
+  }
+  const def = {
+    adapter,
+    configCallback,
+    dynamic
+  };
+  WireMetaMap.set(descriptor, def);
+}
+function installWireAdapters(vm) {
+  const {
+    context,
+    def: {
+      wire
+    }
+  } = vm;
+  if (process.env.NODE_ENV !== 'production') {
+    vm.debugInfo[WIRE_DEBUG_ENTRY] = shared.create(null);
+  }
+  const wiredConnecting = context.wiredConnecting = [];
+  const wiredDisconnecting = context.wiredDisconnecting = [];
+  for (const fieldNameOrMethod in wire) {
+    const descriptor = wire[fieldNameOrMethod];
+    const wireDef = WireMetaMap.get(descriptor);
+    if (process.env.NODE_ENV !== 'production') {
+      shared.assert.invariant(wireDef, `Internal Error: invalid wire definition found.`);
+    }
+    if (!shared.isUndefined(wireDef)) {
+      const {
+        connector,
+        computeConfigAndUpdate,
+        resetConfigWatcher
+      } = createConnector(vm, fieldNameOrMethod, wireDef);
+      const hasDynamicParams = wireDef.dynamic.length > 0;
+      shared.ArrayPush.call(wiredConnecting, () => {
+        connector.connect();
+        if (!features.lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+          if (hasDynamicParams) {
+            Promise.resolve().then(computeConfigAndUpdate);
+            return;
+          }
+        }
+        computeConfigAndUpdate();
+      });
+      shared.ArrayPush.call(wiredDisconnecting, () => {
+        connector.disconnect();
+        resetConfigWatcher();
+      });
+    }
+  }
+}
+function connectWireAdapters(vm) {
+  const {
+    wiredConnecting
+  } = vm.context;
+  for (let i = 0, len = wiredConnecting.length; i < len; i += 1) {
+    wiredConnecting[i]();
+  }
+}
+function disconnectWireAdapters(vm) {
+  const {
+    wiredDisconnecting
+  } = vm.context;
+  runWithBoundaryProtection(vm, vm, shared.noop, () => {
+    // job
+    for (let i = 0, len = wiredDisconnecting.length; i < len; i += 1) {
+      wiredDisconnecting[i]();
+    }
+  }, shared.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') {
+        shared.assert.fail(`@api decorator can only be used as a decorator function.`);
+    }
+    throw new Error();
+}
+function createPublicPropertyDescriptor(key) {
+    return {
+        get() {
+            const vm = getAssociatedVM(this);
+            if (isBeingConstructed(vm)) {
+                if (process.env.NODE_ENV !== 'production') {
+                    logError(`Can’t read the value of property \`${shared.toString(key)}\` from the constructor because the owner component hasn’t set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
+                }
+                return;
+            }
+            componentValueObserved(vm, key);
+            return vm.cmpProps[key];
+        },
+        set(newValue) {
+            const vm = getAssociatedVM(this);
+            if (process.env.NODE_ENV !== 'production') {
+                const vmBeingRendered = getVMBeingRendered();
+                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
+                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+            }
+            vm.cmpProps[key] = newValue;
+            componentValueMutated(vm, key);
+        },
+        enumerable: true,
+        configurable: true,
+    };
+}
+function createPublicAccessorDescriptor(key, descriptor) {
+    const { get, set, enumerable, configurable } = descriptor;
+    if (!shared.isFunction(get)) {
+        if (process.env.NODE_ENV !== 'production') {
+            shared.assert.invariant(shared.isFunction(get), `Invalid compiler output for public accessor ${shared.toString(key)} decorated with @api`);
+        }
+        throw new Error();
+    }
+    return {
+        get() {
+            if (process.env.NODE_ENV !== 'production') {
+                // Assert that the this value is an actual Component with an associated VM.
+                getAssociatedVM(this);
+            }
+            return get.call(this);
+        },
+        set(newValue) {
+            const vm = getAssociatedVM(this);
+            if (process.env.NODE_ENV !== 'production') {
+                const vmBeingRendered = getVMBeingRendered();
+                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
+                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+            }
+            if (set) {
+                set.call(this, newValue);
+            }
+            else if (process.env.NODE_ENV !== 'production') {
+                shared.assert.fail(`Invalid attempt to set a new value for property ${shared.toString(key)} of ${vm} that does not has a setter decorated with @api.`);
+            }
+        },
+        enumerable,
+        configurable,
+    };
+}
+
+/*
+ * 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') {
+        shared.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() {
@@ -2972,6 +3353,9 @@ function updateStylesheetToken(vm, template) {
     stylesheets: newStylesheets,
     stylesheetToken: newStylesheetToken
   } = template;
+  const {
+    stylesheets: newVmStylesheets
+  } = vm;
   const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
   const {
     hasScopedStyles
@@ -2995,7 +3379,9 @@ function updateStylesheetToken(vm, template) {
   }
   // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-  if (!shared.isUndefined(newStylesheets) && newStylesheets.length !== 0) {
+  const hasNewStylesheets = hasStyles(newStylesheets);
+  const hasNewVmStylesheets = hasStyles(newVmStylesheets);
+  if (hasNewStylesheets || hasNewVmStylesheets) {
     newToken = newStylesheetToken;
   }
   // Set the new styling token on the host element
@@ -3067,10 +3453,17 @@ function getStylesheetsContent(vm, template) {
     stylesheets,
     stylesheetToken
   } = template;
+  const {
+    stylesheets: vmStylesheets
+  } = vm;
   let content = [];
-  if (!shared.isUndefined(stylesheets) && stylesheets.length !== 0) {
+  if (hasStyles(stylesheets)) {
     content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
   }
+  // VM (component) stylesheets apply after template stylesheets
+  if (hasStyles(vmStylesheets)) {
+    shared.ArrayPush.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+  }
   return content;
 }
 // It might be worth caching this to avoid doing the lookup repeatedly, but
@@ -3108,10 +3501,13 @@ function getStylesheetTokenHost(vnode) {
   const {
     template
   } = getComponentInternalDef(vnode.ctor);
+  const {
+    vm
+  } = vnode;
   const {
     stylesheetToken
   } = template;
-  return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
+  return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template, vm) ? makeHostToken(stylesheetToken) : null;
 }
 function getNearestNativeShadowComponent(vm) {
   const owner = getNearestShadowComponent(vm);
@@ -3728,6 +4124,28 @@ function patchCustomElement(n1, n2, parent, renderer) {
       // in fallback mode, the allocation will always set children to
       // empty and delegate the real allocation to the slot elements
       allocateChildren(n2, vm);
+      // Solves an edge case with slotted VFragments in native shadow mode.
+      //
+      // During allocation, in native shadow, slotted VFragment nodes are flattened and their text delimiters are removed
+      // to avoid interfering with native slot behavior. When this happens, if any of the fragments
+      // were not stable, the children must go through the dynamic diffing algo.
+      //
+      // If the new children (n2.children) contain no VFragments, but the previous children (n1.children) were dynamic,
+      // the new nodes must be marked dynamic so that all nodes are properly updated. The only indicator that the new
+      // nodes need to be dynamic comes from the previous children, so we check that to determine whether we need to
+      // mark the new children dynamic.
+      //
+      // Example:
+      // n1.children: [div, VFragment('', div, null, ''), div] => [div, div, null, div]; // marked dynamic
+      // n2.children: [div, null, div] => [div, null, div] // marked ???
+      const {
+        shadowMode,
+        renderMode
+      } = vm;
+      if (shadowMode == 0 /* ShadowMode.Native */ && renderMode !== 0 /* RenderMode.Light */ && hasDynamicChildren(n1.children)) {
+        // No-op if children has already been marked dynamic by 'allocateChildren()'.
+        markAsDynamicChildren(n2.children);
+      }
     }
     // in fallback mode, the children will be always empty, so, nothing
     // will happen, but in native, it does allocate the light dom
@@ -3920,7 +4338,6 @@ function allocateChildren(vnode, vm) {
   //
   // In case #2, we will always get a fresh VCustomElement.
   const children = vnode.aChildren || vnode.children;
-  vm.aChildren = children;
   const {
     renderMode,
     shadowMode
@@ -3933,20 +4350,66 @@ function allocateChildren(vnode, vm) {
       logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
     }
   }
+  // If any of the children being allocated are VFragments, we remove the text delimiters and flatten all immediate
+  // children VFragments to avoid them interfering with default slot behavior.
+  const allocatedChildren = flattenFragmentsInChildren(children);
+  vnode.children = allocatedChildren;
+  vm.aChildren = allocatedChildren;
   if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
     // slow path
-    allocateInSlot(vm, children, vnode.owner);
+    allocateInSlot(vm, allocatedChildren, vnode.owner);
     // save the allocated children in case this vnode is reused.
-    vnode.aChildren = children;
+    vnode.aChildren = allocatedChildren;
     // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
     vnode.children = EmptyArray;
   }
 }
-function createViewModelHook(elm, vnode, renderer) {
-  let vm = getAssociatedVMIfPresent(elm);
-  // There is a possibility that a custom element is registered under tagName, in which case, the
-  // initialization is already carry on, and there is nothing else to do here since this hook is
-  // called right after invoking `document.createElement`.
+/**
+ * Flattens the contents of all VFragments in an array of VNodes, removes the text delimiters on those VFragments, and
+ * marks the resulting children array as dynamic. Uses a stack (array) to iteratively traverse the nested VFragments
+ * and avoid the perf overhead of creating/destroying throwaway arrays/objects in a recursive approach.
+ *
+ * With the delimiters removed, the contents are marked dynamic so they are diffed correctly.
+ *
+ * This function is used for slotted VFragments to avoid the text delimiters interfering with slotting functionality.
+ */
+function flattenFragmentsInChildren(children) {
+  const flattenedChildren = [];
+  // Initialize our stack with the direct children of the custom component and check whether we have a VFragment.
+  // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
+  const nodeStack = [];
+  let fragmentFound = false;
+  for (let i = children.length - 1; i > -1; i -= 1) {
+    const child = children[i];
+    shared.ArrayPush.call(nodeStack, child);
+    fragmentFound = fragmentFound || !!(child && isVFragment(child));
+  }
+  if (!fragmentFound) {
+    return children;
+  }
+  let currentNode;
+  while (!shared.isUndefined(currentNode = shared.ArrayPop.call(nodeStack))) {
+    if (!shared.isNull(currentNode) && isVFragment(currentNode)) {
+      const fChildren = currentNode.children;
+      // Ignore the start and end text node delimiters
+      for (let i = fChildren.length - 2; i > 0; i -= 1) {
+        shared.ArrayPush.call(nodeStack, fChildren[i]);
+      }
+    } else {
+      shared.ArrayPush.call(flattenedChildren, currentNode);
+    }
+  }
+  // We always mark the children as dynamic because nothing generates stable VFragments yet.
+  // If/when stable VFragments are generated by the compiler, this code should be updated to
+  // not mark dynamic if all flattened VFragments were stable.
+  markAsDynamicChildren(flattenedChildren);
+  return flattenedChildren;
+}
+function createViewModelHook(elm, vnode, renderer) {
+  let vm = getAssociatedVMIfPresent(elm);
+  // There is a possibility that a custom element is registered under tagName, in which case, the
+  // initialization is already carry on, and there is nothing else to do here since this hook is
+  // called right after invoking `document.createElement`.
   if (!shared.isUndefined(vm)) {
     return vm;
   }
@@ -3966,22 +4429,20 @@ function createViewModelHook(elm, vnode, renderer) {
   }
   return vm;
 }
-/**
- * Collects all slots into a SlotSet, traversing through VFragment Nodes
- */
-function collectSlots(vm, children, cmpSlotsMapping) {
+function allocateInSlot(vm, children, owner) {
   var _a, _b;
+  const {
+    cmpSlots: {
+      slotAssignments: oldSlotsMapping
+    }
+  } = vm;
+  const cmpSlotsMapping = shared.create(null);
+  // Collect all slots into cmpSlotsMapping
   for (let i = 0, len = children.length; i < len; i += 1) {
     const vnode = children[i];
     if (shared.isNull(vnode)) {
       continue;
     }
-    // Dive further iff the content is wrapped in a VFragment
-    if (isVFragment(vnode)) {
-      // Remove the text delimiter nodes to avoid overriding default slot content
-      collectSlots(vm, vnode.children.slice(1, -1), cmpSlotsMapping);
-      continue;
-    }
     let slotName = '';
     if (isVBaseElement(vnode)) {
       slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
@@ -3991,15 +4452,6 @@ function collectSlots(vm, children, cmpSlotsMapping) {
     const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
     shared.ArrayPush.call(vnodes, vnode);
   }
-}
-function allocateInSlot(vm, children, owner) {
-  const {
-    cmpSlots: {
-      slotAssignments: oldSlotsMapping
-    }
-  } = vm;
-  const cmpSlotsMapping = shared.create(null);
-  collectSlots(vm, children, cmpSlotsMapping);
   vm.cmpSlots = {
     owner,
     slotAssignments: cmpSlotsMapping
@@ -4030,14 +4482,14 @@ function allocateInSlot(vm, children, owner) {
   }
 }
 // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-const FromIteration = new WeakMap();
-// dynamic children means it was generated by an iteration
-// in a template, and will require a more complex diffing algo.
+const DynamicChildren = new WeakMap();
+// dynamic children means it was either generated by an iteration in a template
+// or part of an unstable fragment, and will require a more complex diffing algo.
 function markAsDynamicChildren(children) {
-  FromIteration.set(children, 1);
+  DynamicChildren.set(children, 1);
 }
 function hasDynamicChildren(children) {
-  return FromIteration.has(children);
+  return DynamicChildren.has(children);
 }
 function createKeyToOldIdx(children, beginIdx, endIdx) {
   const map = {};
@@ -4903,7 +5355,7 @@ function evaluateTemplate(vm, html) {
                 // Create a brand new template cache for the swapped templated.
                 context.tplCache = shared.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
@@ -4946,9 +5398,8 @@ function evaluateTemplate(vm, html) {
     }
     return vnodes;
 }
-function computeHasScopedStyles(template) {
-    const { stylesheets } = template;
-    if (!shared.isUndefined(stylesheets)) {
+function computeHasScopedStylesInStylesheets(stylesheets) {
+    if (hasStyles(stylesheets)) {
         for (let i = 0; i < stylesheets.length; i++) {
             if (shared.isTrue(stylesheets[i][shared.KEY__SCOPED_CSS])) {
                 return true;
@@ -4957,6 +5408,15 @@ function computeHasScopedStyles(template) {
     }
     return false;
 }
+function computeHasScopedStyles(template, vm) {
+    const { stylesheets } = template;
+    const vmStylesheets = !shared.isUndefined(vm) ? vm.stylesheets : null;
+    return (computeHasScopedStylesInStylesheets(stylesheets) ||
+        computeHasScopedStylesInStylesheets(vmStylesheets));
+}
+function hasStyles(stylesheets) {
+    return !shared.isUndefined(stylesheets) && !shared.isNull(stylesheets) && stylesheets.length > 0;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5272,6 +5732,7 @@ function createVM(elm, ctor, renderer, options) {
     // Properties set right after VM creation.
     tro: null,
     shadowMode: null,
+    stylesheets: null,
     // Properties set by the LightningElement constructor.
     component: null,
     shadowRoot: null,
@@ -5284,6 +5745,7 @@ function createVM(elm, ctor, renderer, options) {
   if (process.env.NODE_ENV !== 'production') {
     vm.debugInfo = shared.create(null);
   }
+  vm.stylesheets = computeStylesheets(vm, def.ctor);
   vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
   if (process.env.NODE_ENV !== 'production') {
@@ -5302,6 +5764,42 @@ function createVM(elm, ctor, renderer, options) {
   }
   return vm;
 }
+function validateComponentStylesheets(vm, stylesheets) {
+  let valid = true;
+  const validate = arrayOrStylesheet => {
+    if (shared.isArray(arrayOrStylesheet)) {
+      for (let i = 0; i < arrayOrStylesheet.length; i++) {
+        validate(arrayOrStylesheet[i]);
+      }
+    } else if (!shared.isFunction(arrayOrStylesheet)) {
+      // function assumed to be a stylesheet factory
+      valid = false;
+    }
+  };
+  if (!shared.isArray(stylesheets)) {
+    valid = false;
+  } else {
+    validate(stylesheets);
+  }
+  return valid;
+}
+// Validate and flatten any stylesheets defined as `static stylesheets`
+function computeStylesheets(vm, ctor) {
+  if (features.lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
+    const {
+      stylesheets
+    } = ctor;
+    if (!shared.isUndefined(stylesheets)) {
+      const valid = validateComponentStylesheets(vm, stylesheets);
+      if (valid) {
+        return flattenStylesheets(stylesheets);
+      } else if (process.env.NODE_ENV !== 'production') {
+        logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+      }
+    }
+  }
+  return null;
+}
 function computeShadowMode(vm, renderer) {
   const {
     def
@@ -5672,286 +6170,143 @@ function forceRehydration(vm) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
-const DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
-const WIRE_DEBUG_ENTRY = '@wire';
-const WireMetaMap = new Map();
-class WireContextRegistrationEvent extends CustomEvent {
-  constructor(adapterToken, {
-    setNewContext,
-    setDisconnectedCallback
-  }) {
-    super(adapterToken, {
-      bubbles: true,
-      composed: true
-    });
-    shared.defineProperties(this, {
-      setNewContext: {
-        value: setNewContext
-      },
-      setDisconnectedCallback: {
-        value: setDisconnectedCallback
-      }
-    });
-  }
+//
+// 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
+const getElementById = shared.globalThis[shared.KEY__NATIVE_GET_ELEMENT_BY_ID];
+const querySelectorAll = shared.globalThis[shared.KEY__NATIVE_QUERY_SELECTOR_ALL];
+function isSyntheticShadowRootInstance(rootNode) {
+    return rootNode !== document && shared.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.
+    let vm = getAssociatedVMIfPresent(source.getRootNode().host);
+    if (shared.isUndefined(vm)) {
+        vm = getAssociatedVMIfPresent(target.getRootNode().host);
+    }
+    if (shared.isUndefined(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') {
+        // Avoid excessively logging to the console in the case of duplicates.
+        logWarnOnce(`Element <${source.tagName.toLowerCase()}> uses attribute "${attrName}" to reference element ` +
+            `<${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);
+    }
 }
-function createFieldDataCallback(vm, name) {
-  return value => {
-    updateComponentValue(vm, name, value);
-  };
+function parseIdRefAttributeValue(attrValue) {
+    // split on whitespace and skip empty strings after splitting
+    return shared.isString(attrValue) ? shared.ArrayFilter.call(shared.StringSplit.call(attrValue, /\s+/), Boolean) : [];
 }
-function createMethodDataCallback(vm, method) {
-  return value => {
-    // dispatching new value into the wired method
-    runWithBoundaryProtection(vm, vm.owner, shared.noop, () => {
-      // job
-      method.call(vm.component, value);
-    }, shared.noop);
-  };
-}
-function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
-  let hasPendingConfig = false;
-  // creating the reactive observer for reactive params when needed
-  const ro = createReactiveObserver(() => {
-    if (hasPendingConfig === false) {
-      hasPendingConfig = true;
-      // collect new config in the micro-task
-      Promise.resolve().then(() => {
-        hasPendingConfig = false;
-        // resetting current reactive params
-        ro.reset();
-        // dispatching a new config due to a change in the configuration
-        computeConfigAndUpdate();
-      });
+function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
+    const root = elm.getRootNode();
+    if (!isSyntheticShadowRootInstance(root)) {
+        return;
     }
-  });
-  const computeConfigAndUpdate = () => {
-    let config;
-    ro.observe(() => 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,
-    ro
-  };
-}
-function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
-  const {
-    adapter
-  } = wireDef;
-  const adapterContextToken = getAdapterToken(adapter);
-  if (shared.isUndefined(adapterContextToken)) {
-    return; // no provider found, nothing to be done
-  }
-
-  const {
-    elm,
-    context: {
-      wiredConnecting,
-      wiredDisconnecting
-    },
-    renderer: {
-      dispatchEvent
+    if (attrName === 'id') {
+        // elm is the target, find the source
+        if (!shared.isString(attrValue) || attrValue.length === 0) {
+            // if our id is null or empty, nobody can reference us
+            return;
+        }
+        for (const idRefAttrName of shared.ID_REFERENCING_ATTRIBUTES_SET) {
+            // Query all global elements with this attribute. The attribute selector syntax `~=` is for values
+            // that reference multiple IDs, separated by whitespace.
+            const query = `[${idRefAttrName}~="${CSS.escape(attrValue)}"]`;
+            const sourceElements = querySelectorAll.call(document, query);
+            for (let i = 0; i < sourceElements.length; i++) {
+                const sourceElement = sourceElements[i];
+                const sourceRoot = sourceElement.getRootNode();
+                if (sourceRoot !== root) {
+                    reportViolation(sourceElement, elm, idRefAttrName);
+                    break;
+                }
+            }
+        }
+    }
+    else {
+        // elm is the source, find the target
+        const ids = parseIdRefAttributeValue(attrValue);
+        for (const id of ids) {
+            const target = getElementById.call(document, id);
+            if (!shared.isNull(target)) {
+                const targetRoot = target.getRootNode();
+                if (targetRoot !== root) {
+                    // target element's shadow root is not the same as ours
+                    reportViolation(elm, target, attrName);
+                }
+            }
+        }
     }
-  } = vm;
-  // waiting for the component to be connected to formally request the context via the token
-  shared.ArrayPush.call(wiredConnecting, () => {
-    // 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.
-    const contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
-      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(disconnectCallback) {
-        // adds this callback into the disconnect bucket so it gets disconnected from parent
-        // the the element hosting the wire is disconnected
-        shared.ArrayPush.call(wiredDisconnecting, disconnectCallback);
-      }
-    });
-    dispatchEvent(elm, contextRegistrationEvent);
-  });
 }
-function createConnector(vm, name, wireDef) {
-  const {
-    method,
-    adapter,
-    configCallback,
-    dynamic
-  } = wireDef;
-  let debugInfo;
-  if (process.env.NODE_ENV !== 'production') {
-    const wiredPropOrMethod = shared.isUndefined(method) ? name : method.name;
-    debugInfo = shared.create(null);
-    debugInfo.wasDataProvisionedForConfig = false;
-    vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
-  }
-  const fieldOrMethodCallback = shared.isUndefined(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
-  const 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;
+let 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
     }
-    fieldOrMethodCallback(value);
-  };
-  let context;
-  let connector;
-  // Workaround to pass the component element associated to this wire adapter instance.
-  shared.defineProperty(dataCallback, DeprecatedWiredElementHost, {
-    value: vm.elm
-  });
-  shared.defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
-    value: dynamic
-  });
-  runWithBoundaryProtection(vm, vm, shared.noop, () => {
-    // job
-    connector = new adapter(dataCallback);
-  }, shared.noop);
-  const updateConnectorConfig = config => {
-    // every time the config is recomputed due to tracking,
-    // this callback will be invoked with the new computed config
-    runWithBoundaryProtection(vm, vm, shared.noop, () => {
-      // job
-      if (process.env.NODE_ENV !== 'production') {
-        debugInfo.config = config;
-        debugInfo.context = context;
-        debugInfo.wasDataProvisionedForConfig = false;
-      }
-      connector.update(config, context);
-    }, shared.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.
-  const {
-    computeConfigAndUpdate,
-    ro
-  } = createConfigWatcher(vm.component, configCallback, updateConnectorConfig);
-  // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
-  if (!shared.isUndefined(adapter.contextSchema)) {
-    createContextWatcher(vm, wireDef, 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();
-        }
-      }
+    enabled = true;
+    const { setAttribute } = Element.prototype;
+    // Detect calling `setAttribute` to set an idref or an id
+    shared.assign(Element.prototype, {
+        setAttribute(attrName, attrValue) {
+            setAttribute.call(this, attrName, attrValue);
+            if (attrName === 'id' || shared.ID_REFERENCING_ATTRIBUTES_SET.has(attrName)) {
+                detectSyntheticCrossRootAria(this, attrName, attrValue);
+            }
+        },
     });
-  }
-  return {
-    // @ts-ignore the boundary protection executes sync, connector is always defined
-    connector,
-    computeConfigAndUpdate,
-    resetConfigWatcher: () => ro.reset()
-  };
-}
-const AdapterToTokenMap = new Map();
-function getAdapterToken(adapter) {
-  return AdapterToTokenMap.get(adapter);
-}
-function setAdapterToken(adapter, token) {
-  AdapterToTokenMap.set(adapter, token);
+    // Detect `elm.id = 'foo'`
+    const idDescriptor = shared.getOwnPropertyDescriptor(Element.prototype, 'id');
+    if (!shared.isUndefined(idDescriptor)) {
+        const { get, set } = idDescriptor;
+        // These should always be a getter and a setter, but if someone is monkeying with the global descriptor, ignore it
+        if (shared.isFunction(get) && shared.isFunction(set)) {
+            shared.defineProperty(Element.prototype, 'id', {
+                get() {
+                    return get.call(this);
+                },
+                set(value) {
+                    set.call(this, value);
+                    detectSyntheticCrossRootAria(this, 'id', value);
+                },
+                // On the default descriptor for 'id', enumerable and configurable are true
+                enumerable: true,
+                configurable: true,
+            });
+        }
+    }
 }
-function storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic) {
-  // support for callable adapters
-  if (adapter.adapter) {
-    adapter = adapter.adapter;
-  }
-  const method = descriptor.value;
-  const def = {
-    adapter,
-    method,
-    configCallback,
-    dynamic
-  };
-  WireMetaMap.set(descriptor, def);
+// 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' && shared.isFunction(CSS.escape);
 }
-function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
-  // support for callable adapters
-  if (adapter.adapter) {
-    adapter = adapter.adapter;
-  }
-  const def = {
-    adapter,
-    configCallback,
-    dynamic
-  };
-  WireMetaMap.set(descriptor, def);
+// 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 shared.hasOwnProperty.call(Element.prototype, shared.KEY__SHADOW_TOKEN);
 }
-function installWireAdapters(vm) {
-  const {
-    context,
-    def: {
-      wire
-    }
-  } = vm;
-  if (process.env.NODE_ENV !== 'production') {
-    vm.debugInfo[WIRE_DEBUG_ENTRY] = shared.create(null);
-  }
-  const wiredConnecting = context.wiredConnecting = [];
-  const wiredDisconnecting = context.wiredDisconnecting = [];
-  for (const fieldNameOrMethod in wire) {
-    const descriptor = wire[fieldNameOrMethod];
-    const wireDef = WireMetaMap.get(descriptor);
+// Detecting cross-root ARIA in synthetic shadow only makes sense for the browser
+if (process.env.IS_BROWSER && supportsCssEscape() && isSyntheticShadowLoaded()) {
+    // Always run detection in dev mode, so we can at least print to the console
     if (process.env.NODE_ENV !== 'production') {
-      shared.assert.invariant(wireDef, `Internal Error: invalid wire definition found.`);
+        enableDetection();
     }
-    if (!shared.isUndefined(wireDef)) {
-      const {
-        connector,
-        computeConfigAndUpdate,
-        resetConfigWatcher
-      } = createConnector(vm, fieldNameOrMethod, wireDef);
-      const hasDynamicParams = wireDef.dynamic.length > 0;
-      shared.ArrayPush.call(wiredConnecting, () => {
-        connector.connect();
-        if (!features.lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
-          if (hasDynamicParams) {
-            Promise.resolve().then(computeConfigAndUpdate);
-            return;
-          }
-        }
-        computeConfigAndUpdate();
-      });
-      shared.ArrayPush.call(wiredDisconnecting, () => {
-        connector.disconnect();
-        resetConfigWatcher();
-      });
-    }
-  }
-}
-function connectWireAdapters(vm) {
-  const {
-    wiredConnecting
-  } = vm.context;
-  for (let i = 0, len = wiredConnecting.length; i < len; i += 1) {
-    wiredConnecting[i]();
-  }
-}
-function disconnectWireAdapters(vm) {
-  const {
-    wiredDisconnecting
-  } = vm.context;
-  runWithBoundaryProtection(vm, vm, shared.noop, () => {
-    // job
-    for (let i = 0, len = wiredDisconnecting.length; i < len; i += 1) {
-      wiredDisconnecting[i]();
+    else {
+        // In prod mode, only enable detection if reporting is enabled
+        onReportingEnabled(enableDetection);
     }
-  }, shared.noop);
 }
 
 /*
@@ -6634,6 +6989,7 @@ Object.defineProperty(exports, 'setFeatureFlagForTest', {
 });
 exports.LightningElement = LightningElement;
 exports.__unstable__ProfilerControl = profilerControl;
+exports.__unstable__ReportingControl = reportingControl;
 exports.api = api$1;
 exports.connectRootElement = connectRootElement;
 exports.createContextProvider = createContextProvider;
@@ -6661,4 +7017,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.33.0 */
+/* version: 2.35.0 */