@lwc/engine-core 2.3.4 → 2.5.1

package/dist/engine-core.js

@@ -1,5 +1,5 @@
 /* proxy-compat-disable */
-import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, assign, assert, keys, StringCharCodeAt, isString, StringSlice, freeze, defineProperties, forEach, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, getPropertyDescriptor, isObject, AriaPropNameToAttrNameMap, defineProperty, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, noop, isArray as isArray$1, isNumber, StringReplace, KEY__SHADOW_RESOLVER, ArrayUnshift, isFrozen, globalThis as globalThis$1, KEY__IS_NATIVE_SHADOW_ROOT_DEFINED } from '@lwc/shared';
+import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, assign, assert, keys, StringCharCodeAt, isString, StringSlice, freeze, defineProperties, forEach, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, getPropertyDescriptor, isObject, AriaPropNameToAttrNameMap, defineProperty, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, noop, isArray as isArray$1, isNumber, StringReplace, KEY__SHADOW_RESOLVER, KEY__SCOPED_CSS, ArrayUnshift, isFrozen } from '@lwc/shared';
 import { runtimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -2309,12 +2309,6 @@ const LightningElement = function () {
   associateVM(component, vm);
   associateVM(elm, vm);
 
-  if (!runtimeFlags.ENABLE_LIGHT_DOM_COMPONENTS) {
-    assert.isTrue(def.renderMode !== 0
-    /* Light */
-    , `${def.name || 'Anonymous class'} is an invalid LWC component. Light DOM components are not available in this environment.`);
-  }
-
   if (vm.renderMode === 1
   /* Shadow */
   ) {
@@ -2353,6 +2347,12 @@ function attachShadow(vm) {
   if (process.env.NODE_ENV !== 'production') {
     patchShadowRootWithRestrictions(cmpRoot);
   }
+}
+
+function warnIfInvokedDuringConstruction(vm, methodName) {
+  if (isBeingConstructed(vm)) {
+    logError(`this.${methodName}() should not be called during the construction of the custom element for ${getComponentTag(vm)} because the element is not yet in the DOM or has no children yet.`);
+  }
 } // @ts-ignore
 
 
@@ -2511,7 +2511,7 @@ LightningElement.prototype = {
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
-      assert.isFalse(isBeingConstructed(vm), `this.getBoundingClientRect() should not be called during the construction of the custom element for ${getComponentTag(vm)} because the element is not yet in the DOM, instead, you can use it in one of the available life-cycle hooks.`);
+      warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect');
     }
 
     return getBoundingClientRect(elm);
@@ -2527,7 +2527,7 @@ LightningElement.prototype = {
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
-      assert.isFalse(isBeingConstructed(vm), `this.querySelector() cannot be called during the construction of the custom element for ${getComponentTag(vm)} because no children has been added to this element yet.`);
+      warnIfInvokedDuringConstruction(vm, 'querySelector');
     }
 
     return querySelector(elm, selectors);
@@ -2543,7 +2543,7 @@ LightningElement.prototype = {
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
-      assert.isFalse(isBeingConstructed(vm), `this.querySelectorAll() cannot be called during the construction of the custom element for ${getComponentTag(vm)} because no children has been added to this element yet.`);
+      warnIfInvokedDuringConstruction(vm, 'querySelectorAll');
     }
 
     return querySelectorAll(elm, selectors);
@@ -2559,7 +2559,7 @@ LightningElement.prototype = {
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
-      assert.isFalse(isBeingConstructed(vm), `this.getElementsByTagName() cannot be called during the construction of the custom element for ${getComponentTag(vm)} because no children has been added to this element yet.`);
+      warnIfInvokedDuringConstruction(vm, 'getElementsByTagName');
     }
 
     return getElementsByTagName(elm, tagNameOrWildCard);
@@ -2575,7 +2575,7 @@ LightningElement.prototype = {
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
-      assert.isFalse(isBeingConstructed(vm), `this.getElementsByClassName() cannot be called during the construction of the custom element for ${getComponentTag(vm)} because no children has been added to this element yet.`);
+      warnIfInvokedDuringConstruction(vm, 'getElementsByClassName');
     }
 
     return getElementsByClassName(elm, names);
@@ -2940,18 +2940,33 @@ function createObservedFieldPropertyDescriptor(key) {
 
 function getClassDescriptorType(descriptor) {
   if (isFunction$1(descriptor.value)) {
-    return 'method';
+    return "method"
+    /* Method */
+    ;
   } else if (isFunction$1(descriptor.set) || isFunction$1(descriptor.get)) {
-    return 'accessor';
+    return "accessor"
+    /* Accessor */
+    ;
   } else {
-    return 'field';
+    return "field"
+    /* Field */
+    ;
   }
 }
 
 function validateObservedField(Ctor, fieldName, descriptor) {
   if (!isUndefined$1(descriptor)) {
     const type = getClassDescriptorType(descriptor);
-    assert.fail(`Invalid observed ${fieldName} field. Found a duplicate ${type} with the same name.`);
+    const message = `Invalid observed ${fieldName} field. Found a duplicate ${type} with the same name.`; // [W-9927596] Ideally we always throw an error when detecting duplicate observed field.
+    // This branch is only here for backward compatibility reasons.
+
+    if (type === "accessor"
+    /* Accessor */
+    ) {
+      logError(message);
+    } else {
+      assert.fail(message);
+    }
   }
 }
 
@@ -2978,7 +2993,16 @@ function validateMethodDecoratedWithWire(Ctor, methodName, descriptor) {
 function validateFieldDecoratedWithApi(Ctor, fieldName, descriptor) {
   if (!isUndefined$1(descriptor)) {
     const type = getClassDescriptorType(descriptor);
-    assert.fail(`Invalid @api ${fieldName} field. Found a duplicate ${type} with the same name.`);
+    const message = `Invalid @api ${fieldName} field. Found a duplicate ${type} with the same name.`; // [W-9927596] Ideally we always throw an error when detecting duplicate public properties.
+    // This branch is only here for backward compatibility reasons.
+
+    if (type === "accessor"
+    /* Accessor */
+    ) {
+      logError(message);
+    } else {
+      assert.fail(message);
+    }
   }
 }
 
@@ -3041,9 +3065,16 @@ function registerDecorators(Ctor, meta) {
         // field declaration
         if (process.env.NODE_ENV !== 'production') {
           validateFieldDecoratedWithApi(Ctor, fieldName, descriptor);
-        }
+        } // [W-9927596] If a component has both a public property and a private setter/getter
+        // with the same name, the property is defined as a public accessor. This branch is
+        // only here for backward compatibility reasons.
+
 
-        descriptor = createPublicPropertyDescriptor(fieldName);
+        if (!isUndefined$1(descriptor) && !isUndefined$1(descriptor.get)) {
+          descriptor = createPublicAccessorDescriptor(fieldName, descriptor);
+        } else {
+          descriptor = createPublicPropertyDescriptor(fieldName);
+        }
       }
 
       apiFields[fieldName] = descriptor;
@@ -3123,9 +3154,16 @@ function registerDecorators(Ctor, meta) {
 
       if (process.env.NODE_ENV !== 'production') {
         validateObservedField(Ctor, fieldName, descriptor);
-      }
+      } // [W-9927596] Only mark a field as observed whenever it isn't a duplicated public nor
+      // tracked property. This is only here for backward compatibility purposes.
+
+
+      const isDuplicatePublicProp = !isUndefined$1(publicProps) && fieldName in publicProps;
+      const isDuplicateTrackedProp = !isUndefined$1(track) && fieldName in track;
 
-      observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+      if (!isDuplicatePublicProp && !isDuplicateTrackedProp) {
+        observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+      }
     }
   }
 
@@ -3957,6 +3995,19 @@ function observeElementChildNodes(elm) {
 
 function setElementShadowToken(elm, token) {
   elm.$shadowToken$ = token;
+} // Set the scope token class for *.scoped.css styles
+
+
+function setScopeTokenClassIfNecessary(elm, owner) {
+  const {
+    cmpTemplate,
+    context
+  } = owner;
+  const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
+
+  if (!isUndefined$1(token) && context.hasScopedStyles) {
+    owner.renderer.getClassList(elm).add(token);
+  }
 }
 
 function updateNodeHook(oldVnode, vnode) {
@@ -4026,6 +4077,7 @@ function fallbackElmHook(elm, vnode) {
   const {
     owner
   } = vnode;
+  setScopeTokenClassIfNecessary(elm, owner);
 
   if (owner.shadowMode === 1
   /* Synthetic */
@@ -4036,7 +4088,7 @@ function fallbackElmHook(elm, vnode) {
       }
     } = vnode;
     const {
-      shadowAttribute
+      stylesheetToken
     } = owner.context;
 
     if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -4048,7 +4100,7 @@ function fallbackElmHook(elm, vnode) {
     // into each element from the template, so they can be styled accordingly.
 
 
-    setElementShadowToken(elm, shadowAttribute);
+    setElementShadowToken(elm, stylesheetToken);
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4133,16 +4185,17 @@ function createViewModelHook(elm, vnode) {
     ctor,
     owner
   } = vnode;
+  setScopeTokenClassIfNecessary(elm, owner);
 
   if (owner.shadowMode === 1
   /* Synthetic */
   ) {
     const {
-      shadowAttribute
+      stylesheetToken
     } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
     // into each element from the template, so they can be styled accordingly.
 
-    setElementShadowToken(elm, shadowAttribute);
+    setElementShadowToken(elm, stylesheetToken);
   }
 
   const def = getComponentInternalDef(ctor);
@@ -4434,13 +4487,19 @@ const CustomElementHook = {
 
 function linkNodeToShadow(elm, owner) {
   const {
+    renderer,
+    renderMode,
     shadowMode
   } = owner; // TODO [#1164]: this should eventually be done by the polyfill directly
 
-  if (shadowMode === 1
-  /* Synthetic */
-  ) {
-    elm[KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[KEY__SHADOW_RESOLVER];
+  if (renderer.isSyntheticShadowDefined) {
+    if (shadowMode === 1
+    /* Synthetic */
+    || renderMode === 0
+    /* Light */
+    ) {
+      elm[KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[KEY__SHADOW_RESOLVER];
+    }
   }
 }
 
@@ -4775,14 +4834,11 @@ function gid(id) {
 
   const {
     idx,
-    renderMode,
     shadowMode
   } = vmBeingRendered;
 
   if (shadowMode === 1
   /* Synthetic */
-  && renderMode === 1
-  /* Shadow */
   ) {
     return StringReplace.call(id, /\S+/g, id => `${id}-${idx}`);
   }
@@ -4810,14 +4866,11 @@ function fid(url) {
 
   const {
     idx,
-    renderMode,
     shadowMode
   } = vmBeingRendered; // Apply transformation only for fragment-only-urls, and only in shadow DOM
 
   if (shadowMode === 1
   /* Synthetic */
-  && renderMode === 1
-  /* Shadow */
   && /^#/.test(url)) {
     return `${url}-${idx}`;
   }
@@ -4917,6 +4970,10 @@ var api = /*#__PURE__*/Object.freeze({
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
+function makeHostToken(token) {
+  return `${token}-host`;
+}
+
 function createInlineStyleVNode(content) {
   return h('style', {
     key: 'style',
@@ -4926,59 +4983,100 @@ function createInlineStyleVNode(content) {
   }, [t(content)]);
 }
 
-function updateSyntheticShadowAttributes(vm, template) {
+function updateStylesheetToken(vm, template) {
   const {
     elm,
     context,
     renderer,
-    renderMode
+    renderMode,
+    shadowMode
   } = vm;
   const {
     stylesheets: newStylesheets,
-    stylesheetTokens: newStylesheetTokens
+    stylesheetToken: newStylesheetToken
   } = template;
-  let newTokens; // Reset the styling token applied to the host element.
+  const isSyntheticShadow = renderMode === 1
+  /* Shadow */
+  && shadowMode === 1
+  /* Synthetic */
+  ;
+  const {
+    hasScopedStyles
+  } = context;
+  let newToken;
+  let newHasTokenInClass;
+  let newHasTokenInAttribute; // Reset the styling token applied to the host element.
 
-  const oldHostAttribute = context.hostAttribute;
+  const {
+    stylesheetToken: oldToken,
+    hasTokenInClass: oldHasTokenInClass,
+    hasTokenInAttribute: oldHasTokenInAttribute
+  } = context;
+
+  if (oldHasTokenInClass) {
+    renderer.getClassList(elm).remove(makeHostToken(oldToken));
+  }
 
-  if (!isUndefined$1(oldHostAttribute)) {
-    renderer.removeAttribute(elm, oldHostAttribute);
+  if (oldHasTokenInAttribute) {
+    renderer.removeAttribute(elm, makeHostToken(oldToken));
   } // Apply the new template styling token to the host element, if the new template has any
-  // associated stylesheets.
+  // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
 
-  if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0 && renderMode === 1
-  /* Shadow */
-  ) {
-    newTokens = newStylesheetTokens;
-  }
+  if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+    newToken = newStylesheetToken;
+  } // Set the new styling token on the host element
+
 
-  if (!isUndefined$1(newTokens)) {
-    renderer.setAttribute(elm, newTokens.hostAttribute, '');
+  if (!isUndefined$1(newToken)) {
+    if (hasScopedStyles) {
+      renderer.getClassList(elm).add(makeHostToken(newToken));
+      newHasTokenInClass = true;
+    }
+
+    if (isSyntheticShadow) {
+      renderer.setAttribute(elm, makeHostToken(newToken), '');
+      newHasTokenInAttribute = true;
+    }
   } // Update the styling tokens present on the context object.
 
 
-  context.hostAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.hostAttribute;
-  context.shadowAttribute = newTokens === null || newTokens === void 0 ? void 0 : newTokens.shadowAttribute;
+  context.stylesheetToken = newToken;
+  context.hasTokenInClass = newHasTokenInClass;
+  context.hasTokenInAttribute = newHasTokenInAttribute;
 }
 
-function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, nativeShadow) {
+function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
   const content = [];
 
   for (let i = 0; i < stylesheets.length; i++) {
     let stylesheet = stylesheets[i];
 
     if (isArray$1(stylesheet)) {
-      ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, hostSelector, shadowSelector, nativeShadow));
+      ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
     } else {
       if (process.env.NODE_ENV !== 'production') {
         // in dev-mode, we support hot swapping of stylesheet, which means that
         // the component instance might be attempting to use an old version of
         // the stylesheet, while internally, we have a replacement for it.
         stylesheet = getStyleOrSwappedStyle(stylesheet);
-      }
+      } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+      // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+
+
+      const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+      const useActualHostSelector = vm.renderMode === 0
+      /* Light */
+      ? !isScopedCss : vm.shadowMode === 0
+      /* Native */
+      ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
 
-      ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
+      const scopeToken = isScopedCss || vm.shadowMode === 1
+      /* Synthetic */
+      && vm.renderMode === 1
+      /* Shadow */
+      ? stylesheetToken : undefined;
+      ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
     }
   }
 
@@ -4988,38 +5086,37 @@ function evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, n
 function getStylesheetsContent(vm, template) {
   const {
     stylesheets,
-    stylesheetTokens
+    stylesheetToken
   } = template;
-  const {
-    renderMode,
-    shadowMode
-  } = vm;
   let content = [];
 
   if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-    let hostSelector;
-    let shadowSelector; // Scoping with the tokens is only necessary for synthetic shadow. For both
-    // light DOM elements and native shadow, we just render the CSS as-is.
+    content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+  }
+
+  return content;
+} // It might be worth caching this to avoid doing the lookup repeatedly, but
+// perf testing has not shown it to be a huge improvement yet:
+// https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 
-    if (renderMode === 1
+function getNearestNativeShadowComponent(vm) {
+  let owner = vm;
+
+  while (!isNull(owner)) {
+    if (owner.renderMode === 1
     /* Shadow */
-    && shadowMode === 1
-    /* Synthetic */
-    && !isUndefined$1(stylesheetTokens)) {
-      hostSelector = `[${stylesheetTokens.hostAttribute}]`;
-      shadowSelector = `[${stylesheetTokens.shadowAttribute}]`;
-    } else {
-      hostSelector = '';
-      shadowSelector = '';
+    && owner.shadowMode === 0
+    /* Native */
+    ) {
+      return owner;
     }
 
-    content = evaluateStylesheetsContent(stylesheets, hostSelector, shadowSelector, shadowMode === 0
-    /* Native */
-    );
+    owner = owner.owner;
   }
 
-  return content;
+  return owner;
 }
+
 function createStylesheet(vm, stylesheets) {
   const {
     renderer,
@@ -5035,13 +5132,26 @@ function createStylesheet(vm, stylesheets) {
     for (let i = 0; i < stylesheets.length; i++) {
       renderer.insertGlobalStylesheet(stylesheets[i]);
     }
-
-    return null;
-  } else {
-    // native shadow or light DOM
+  } else if (renderer.ssr) {
+    // native shadow or light DOM, SSR
     const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
     return createInlineStyleVNode(combinedStylesheetContent);
+  } else {
+    // native shadow or light DOM, DOM renderer
+    const root = getNearestNativeShadowComponent(vm);
+    const isGlobal = isNull(root);
+
+    for (let i = 0; i < stylesheets.length; i++) {
+      if (isGlobal) {
+        renderer.insertGlobalStylesheet(stylesheets[i]);
+      } else {
+        // local level
+        renderer.insertStylesheet(stylesheets[i], root.cmpRoot);
+      }
+    }
   }
+
+  return null;
 }
 
 /*
@@ -5239,8 +5349,7 @@ function evaluateTemplate(vm, html) {
       context,
       cmpSlots,
       cmpTemplate,
-      tro,
-      shadowMode
+      tro
     } = vm;
     tro.observe(() => {
       // Reset the cache memoizer for template when needed.
@@ -5265,15 +5374,12 @@ function evaluateTemplate(vm, html) {
 
         vm.cmpTemplate = html; // Create a brand new template cache for the swapped templated.
 
-        context.tplCache = create(null); // Update the synthetic shadow attributes on the host element if necessary.
+        context.tplCache = create(null); // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
 
-        if (shadowMode === 1
-        /* Synthetic */
-        ) {
-          updateSyntheticShadowAttributes(vm, html);
-        } // Evaluate, create stylesheet and cache the produced VNode for future
-        // re-rendering.
+        context.hasScopedStyles = computeHasScopedStyles(html); // Update the scoping token on the host element.
 
+        updateStylesheetToken(vm, html); // Evaluate, create stylesheet and cache the produced VNode for future
+        // re-rendering.
 
         const stylesheetsContent = getStylesheetsContent(vm, html);
         context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
@@ -5315,6 +5421,21 @@ function evaluateTemplate(vm, html) {
 
   return vnodes;
 }
+function computeHasScopedStyles(template) {
+  const {
+    stylesheets
+  } = template;
+
+  if (!isUndefined$1(stylesheets)) {
+    for (let i = 0; i < stylesheets.length; i++) {
+      if (isTrue(stylesheets[i][KEY__SCOPED_CSS])) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5569,7 +5690,6 @@ function invokeServiceHook(vm, cbs) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const isNativeShadowRootDefined = globalThis$1[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
 let idx = 0;
 /** The internal slot used to associate different objects the engine manipulates with the VM */
 
@@ -5674,29 +5794,6 @@ function getNearestShadowAncestor(vm) {
   return ancestor;
 }
 
-function assertNotSyntheticComposedWithinNative(vm) {
-  const isSynthetic = vm.renderMode === 1
-  /* Shadow */
-  && vm.shadowMode === 1
-  /* Synthetic */
-  ;
-
-  if (!isSynthetic) {
-    return;
-  }
-
-  const ancestor = getNearestShadowAncestor(vm);
-
-  if (!isNull(ancestor)) {
-    // Any native shadow component being an ancestor of a synthetic shadow component is disallowed.
-    assert.isFalse(ancestor.renderMode === 1
-    /* Shadow */
-    && ancestor.shadowMode === 0
-    /* Native */
-    , `${getComponentTag(vm)} (synthetic shadow DOM) cannot be composed inside of ${getComponentTag(ancestor)} (native shadow DOM), because synthetic-within-native composition is disallowed`);
-  }
-}
-
 function createVM(elm, def, options) {
   const {
     mode,
@@ -5704,22 +5801,6 @@ function createVM(elm, def, options) {
     renderer,
     tagName
   } = options;
-  let shadowMode;
-
-  if (renderer.syntheticShadow) {
-    shadowMode = def.shadowSupportMode === "any"
-    /* Any */
-    && isNativeShadowRootDefined ? 0
-    /* Native */
-    : 1
-    /* Synthetic */
-    ;
-  } else {
-    shadowMode = 0
-    /* Native */
-    ;
-  }
-
   const vm = {
     elm,
     def,
@@ -5742,10 +5823,12 @@ function createVM(elm, def, options) {
     oar: create(null),
     cmpTemplate: null,
     renderMode: def.renderMode,
-    shadowMode,
+    shadowMode: null,
     context: {
-      hostAttribute: undefined,
-      shadowAttribute: undefined,
+      stylesheetToken: undefined,
+      hasTokenInClass: undefined,
+      hasTokenInAttribute: undefined,
+      hasScopedStyles: undefined,
       styleVNode: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
@@ -5758,26 +5841,87 @@ function createVM(elm, def, options) {
     setHook,
     getHook
   };
+  vm.shadowMode = computeShadowMode(vm);
   vm.tro = getTemplateReactiveObserver(vm);
 
   if (process.env.NODE_ENV !== 'production') {
     vm.toString = () => {
       return `[object:vm ${def.name} (${vm.idx})]`;
     };
-
-    assertNotSyntheticComposedWithinNative(vm);
   } // Create component instance associated to the vm and the element.
 
 
   invokeComponentConstructor(vm, def.ctor); // Initializing the wire decorator per instance only when really needed
 
-  if (isFalse(renderer.ssr) && hasWireAdapters(vm)) {
+  if (hasWireAdapters(vm)) {
     installWireAdapters(vm);
   }
 
   return vm;
 }
 
+function computeShadowMode(vm) {
+  const {
+    def,
+    renderer
+  } = vm;
+  const {
+    isNativeShadowDefined,
+    isSyntheticShadowDefined
+  } = renderer;
+  let shadowMode;
+
+  if (isSyntheticShadowDefined) {
+    if (def.renderMode === 0
+    /* Light */
+    ) {
+      // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
+      // everything defaults to native when the synthetic shadow polyfill is unavailable.
+      shadowMode = 0
+      /* Native */
+      ;
+    } else if (isNativeShadowDefined) {
+      if (def.shadowSupportMode === "any"
+      /* Any */
+      ) {
+        shadowMode = 0
+        /* Native */
+        ;
+      } else {
+        const shadowAncestor = getNearestShadowAncestor(vm);
+
+        if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
+        /* Native */
+        ) {
+          // Transitive support for native Shadow DOM. A component in native mode
+          // transitively opts all of its descendants into native.
+          shadowMode = 0
+          /* Native */
+          ;
+        } else {
+          // Synthetic if neither this component nor any of its ancestors are configured
+          // to be native.
+          shadowMode = 1
+          /* Synthetic */
+          ;
+        }
+      }
+    } else {
+      // Synthetic if there is no native Shadow DOM support.
+      shadowMode = 1
+      /* Synthetic */
+      ;
+    }
+  } else {
+    // Native if the synthetic shadow polyfill is unavailable.
+    shadowMode = 0
+    /* Native */
+    ;
+  }
+
+  return shadowMode;
+}
+
 function assertIsVM(obj) {
   if (isNull(obj) || !isObject(obj) || !('cmpRoot' in obj)) {
     throw new TypeError(`${obj} is not a VM.`);
@@ -6506,11 +6650,14 @@ function installWireAdapters(vm) {
       ArrayPush$1.call(wiredConnecting, () => {
         connector.connect();
 
-        if (hasDynamicParams) {
-          Promise.resolve().then(computeConfigAndUpdate);
-        } else {
-          computeConfigAndUpdate();
+        if (!runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+          if (hasDynamicParams) {
+            Promise.resolve().then(computeConfigAndUpdate);
+            return;
+          }
         }
+
+        computeConfigAndUpdate();
       });
       ArrayPush$1.call(wiredDisconnecting, () => {
         connector.disconnect();
@@ -6616,4 +6763,4 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentInternalDef, getUpgradableConstructor, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.3.4 */
+/* version: 2.5.1 */