lwc 2.3.4 → 2.5.1

package/dist/engine-dom/esm/es2017/engine-dom.js

@@ -104,6 +104,10 @@ function isFalse(obj) {
   return obj === false;
 }
 
+function isBoolean(obj) {
+  return typeof obj === 'boolean';
+}
+
 function isFunction$1(obj) {
   return typeof obj === 'function';
 }
@@ -246,6 +250,7 @@ const KEY__IS_NATIVE_SHADOW_ROOT_DEFINED = '$isNativeShadowRootDefined$';
 const KEY__SHADOW_RESOLVER = '$shadowResolver$';
 const KEY__SHADOW_TOKEN = '$shadowToken$';
 const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
+const KEY__SCOPED_CSS = '$scoped$';
 /**
  * Map composed of properties to attributes not following the HTML property to attribute mapping
  * convention.
@@ -294,7 +299,7 @@ function htmlPropertyToAttribute(propName) {
   CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
   return attributeName;
 }
-/** version: 2.3.4 */
+/** version: 2.5.1 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -399,19 +404,33 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
  */
 
 
+const features = {
+  ENABLE_REACTIVE_SETTER: null,
+  ENABLE_HMR: null,
+  ENABLE_INNER_OUTER_TEXT_PATCH: null,
+  ENABLE_ELEMENT_PATCH: null,
+  ENABLE_NODE_LIST_PATCH: null,
+  ENABLE_HTML_COLLECTIONS_PATCH: null,
+  ENABLE_NODE_PATCH: null,
+  ENABLE_NON_COMPOSED_EVENTS_LEAKAGE: null,
+  ENABLE_MIXED_SHADOW_MODE: null,
+  ENABLE_WIRE_SYNC_EMIT: null
+};
+
 if (!_globalThis.lwcRuntimeFlags) {
   Object.defineProperty(_globalThis, 'lwcRuntimeFlags', {
     value: create(null)
   });
 }
 
-const runtimeFlags = _globalThis.lwcRuntimeFlags; // This function is not supported for use within components and is meant for
-// configuring runtime feature flags during app initialization.
+const runtimeFlags = _globalThis.lwcRuntimeFlags;
+/**
+ * Set the value at runtime of a given feature flag. This method only be invoked once per feature
+ * flag. It is meant to be used during the app initialization.
+ */
 
 function setFeatureFlag(name, value) {
-  const isBoolean = isTrue(value) || isFalse(value);
-
-  if (!isBoolean) {
+  if (!isBoolean(value)) {
     const message = `Failed to set the value "${value}" for the runtime feature flag "${name}". Runtime feature flags can only be set to a boolean value.`;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -423,9 +442,10 @@ function setFeatureFlag(name, value) {
     }
   }
 
-  if (isUndefined$1(featureFlagLookup[name])) {
-    // eslint-disable-next-line no-console
-    console.warn(`Failed to set the value "${value}" for the runtime feature flag "${name}" because it is undefined. Possible reasons are that 1) it was misspelled or 2) it was removed from the @lwc/features package.`);
+  if (isUndefined$1(features[name])) {
+    const availableFlags = keys(features).map(name => `"${name}"`).join(', '); // eslint-disable-next-line no-console
+
+    console.warn(`Failed to set the value "${value}" for the runtime feature flag "${name}" because it is undefined. Available flags: ${availableFlags}.`);
     return;
   }
 
@@ -442,37 +462,23 @@ function setFeatureFlag(name, value) {
       return;
     }
 
-    Object.defineProperty(runtimeFlags, name, {
+    defineProperty(runtimeFlags, name, {
       value
     });
   }
-} // This function is exposed to components to facilitate testing so we add a
-// check to make sure it is not invoked in production.
+}
+/**
+ * Set the value at runtime of a given feature flag. This method should only be used for testing
+ * purposes. It is a no-op when invoked in production mode.
+ */
 
 
 function setFeatureFlagForTest(name, value) {
   if (process.env.NODE_ENV !== 'production') {
-    return setFeatureFlag(name, value);
+    setFeatureFlag(name, value);
   }
 }
-
-const featureFlagLookup = {
-  ENABLE_REACTIVE_SETTER: null,
-  ENABLE_HMR: null,
-  // Flag to toggle on/off the enforcement of innerText/outerText shadow dom semantic in elements when using synthetic shadow.
-  // Note: Once active, elements outside the lwc boundary are controlled by the ENABLE_ELEMENT_PATCH flag.
-  ENABLE_INNER_OUTER_TEXT_PATCH: null,
-  // Flags to toggle on/off the enforcement of shadow dom semantic in element/node outside lwc boundary when using synthetic shadow.
-  ENABLE_ELEMENT_PATCH: null,
-  ENABLE_NODE_LIST_PATCH: null,
-  ENABLE_HTML_COLLECTIONS_PATCH: null,
-  ENABLE_NODE_PATCH: null,
-  // Disables the fix for #2121 where non-composed events are visible outside of their shadow root.
-  ENABLE_NON_COMPOSED_EVENTS_LEAKAGE: null,
-  ENABLE_LIGHT_DOM_COMPONENTS: null,
-  ENABLE_MIXED_SHADOW_MODE: null
-};
-/** version: 2.3.4 */
+/** version: 2.5.1 */
 
 /* proxy-compat-disable */
 
@@ -483,6 +489,7 @@ const featureFlagLookup = {
  * 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 = seal(create(null));
@@ -2803,12 +2810,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 */
   ) {
@@ -2847,6 +2848,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
 
 
@@ -3005,7 +3012,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);
@@ -3021,7 +3028,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);
@@ -3037,7 +3044,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);
@@ -3053,7 +3060,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);
@@ -3069,7 +3076,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);
@@ -3442,18 +3449,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);
+    }
   }
 }
 
@@ -3480,7 +3502,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);
+    }
   }
 }
 
@@ -3543,9 +3574,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;
@@ -3625,9 +3663,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.
+
 
-      observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+      const isDuplicatePublicProp = !isUndefined$1(publicProps) && fieldName in publicProps;
+      const isDuplicateTrackedProp = !isUndefined$1(track) && fieldName in track;
+
+      if (!isDuplicatePublicProp && !isDuplicateTrackedProp) {
+        observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+      }
     }
   }
 
@@ -4479,6 +4524,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) {
@@ -4552,6 +4610,7 @@ function fallbackElmHook(elm, vnode) {
   const {
     owner
   } = vnode;
+  setScopeTokenClassIfNecessary(elm, owner);
 
   if (owner.shadowMode === 1
   /* Synthetic */
@@ -4562,7 +4621,7 @@ function fallbackElmHook(elm, vnode) {
       }
     } = vnode;
     const {
-      shadowAttribute
+      stylesheetToken
     } = owner.context;
 
     if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -4574,7 +4633,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') {
@@ -4663,16 +4722,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);
@@ -4972,13 +5032,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];
+    }
   }
 }
 
@@ -5324,14 +5390,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}`);
   }
@@ -5360,14 +5423,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}`;
   }
@@ -5468,6 +5528,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',
@@ -5477,59 +5541,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 {
+    stylesheetToken: oldToken,
+    hasTokenInClass: oldHasTokenInClass,
+    hasTokenInAttribute: oldHasTokenInAttribute
+  } = context;
 
-  const oldHostAttribute = context.hostAttribute;
+  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(newToken)) {
+    if (hasScopedStyles) {
+      renderer.getClassList(elm).add(makeHostToken(newToken));
+      newHasTokenInClass = true;
+    }
 
-  if (!isUndefined$1(newTokens)) {
-    renderer.setAttribute(elm, newTokens.hostAttribute, '');
+    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`.
+
 
-      ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
+      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.
+
+      const scopeToken = isScopedCss || vm.shadowMode === 1
+      /* Synthetic */
+      && vm.renderMode === 1
+      /* Shadow */
+      ? stylesheetToken : undefined;
+      ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
     }
   }
 
@@ -5539,37 +5644,36 @@ 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) {
@@ -5587,13 +5691,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;
 }
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5799,8 +5916,7 @@ function evaluateTemplate(vm, html) {
       context,
       cmpSlots,
       cmpTemplate,
-      tro,
-      shadowMode
+      tro
     } = vm;
     tro.observe(() => {
       // Reset the cache memoizer for template when needed.
@@ -5825,15 +5941,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);
@@ -5875,6 +5988,22 @@ 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.
  * All rights reserved.
@@ -6146,7 +6275,6 @@ function invokeServiceHook(vm, cbs) {
  */
 
 
-const isNativeShadowRootDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
 let idx = 0;
 /** The internal slot used to associate different objects the engine manipulates with the VM */
 
@@ -6255,29 +6383,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,
@@ -6285,22 +6390,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,
@@ -6323,10 +6412,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,
@@ -6339,26 +6430,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.`);
@@ -7100,11 +7252,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();
@@ -7211,7 +7366,7 @@ function readonly(obj) {
 
   return reactiveMembrane.getReadOnlyProxy(obj);
 }
-/* version: 2.3.4 */
+/* version: 2.5.1 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7233,6 +7388,10 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 const globalStylesheetsParentElement = document.head || document.body || document;
+const supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.replaceSync);
+const styleElements = create(null);
+const styleSheets = create(null);
+const nodesToStyleSheets = new WeakMap();
 let getCustomElement, defineCustomElement, HTMLElementConstructor;
 
 function isCustomElementRegistryAvailable() {
@@ -7259,6 +7418,52 @@ function isCustomElementRegistryAvailable() {
   }
 }
 
+function insertConstructableStyleSheet(content, target) {
+  // It's important for CSSStyleSheets to be unique based on their content, so that
+  // `shadowRoot.adoptedStyleSheets.includes(sheet)` works.
+  let styleSheet = styleSheets[content];
+
+  if (isUndefined$1(styleSheet)) {
+    styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(content);
+    styleSheets[content] = styleSheet;
+  }
+
+  if (!target.adoptedStyleSheets.includes(styleSheet)) {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, styleSheet];
+  }
+}
+
+function insertStyleElement(content, target) {
+  // Avoid inserting duplicate `<style>`s
+  let sheets = nodesToStyleSheets.get(target);
+
+  if (isUndefined$1(sheets)) {
+    sheets = create(null);
+    nodesToStyleSheets.set(target, sheets);
+  }
+
+  if (sheets[content]) {
+    return;
+  }
+
+  sheets[content] = true; // This `<style>` may be repeated multiple times in the DOM, so cache it. It's a bit
+  // faster to call `cloneNode()` on an existing node than to recreate it every time.
+
+  let elm = styleElements[content];
+
+  if (isUndefined$1(elm)) {
+    elm = document.createElement('style');
+    elm.type = 'text/css';
+    elm.textContent = content;
+    styleElements[content] = elm;
+  } else {
+    elm = elm.cloneNode(true);
+  }
+
+  target.appendChild(elm);
+}
+
 if (isCustomElementRegistryAvailable()) {
   getCustomElement = customElements.get.bind(customElements);
   defineCustomElement = customElements.define.bind(customElements);
@@ -7304,7 +7509,8 @@ if (isCustomElementRegistryAvailable()) {
 
 const renderer = {
   ssr: false,
-  syntheticShadow: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
+  isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
+  isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
 
   createElement(tagName, namespace) {
     return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
@@ -7427,6 +7633,15 @@ const renderer = {
     globalStylesheetsParentElement.appendChild(elm);
   },
 
+  insertStylesheet(content, target) {
+    if (supportsConstructableStyleSheets) {
+      insertConstructableStyleSheet(content, target);
+    } else {
+      // Fall back to <style> element
+      insertStyleElement(content, target);
+    }
+  },
+
   assertInstanceOfHTMLElement(elm, msg) {
     assert.invariant(elm instanceof HTMLElement, msg);
   },
@@ -7656,7 +7871,7 @@ function isNodeFromTemplate(node) {
     return false;
   }
 
-  if (renderer.syntheticShadow) {
+  if (renderer.isSyntheticShadowDefined) {
     // TODO [#1252]: old behavior that is still used by some pieces of the platform,
     // specifically, nodes inserted manually on places where `lwc:dom="manual"` directive is not
     // used, will be considered global elements.
@@ -7709,6 +7924,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.3.4 */
+/* version: 2.5.1 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };