lwc 2.3.3 → 2.5.0

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

@@ -107,6 +107,10 @@ var LWC = (function (exports) {
     return obj === false;
   }
 
+  function isBoolean(obj) {
+    return typeof obj === 'boolean';
+  }
+
   function isFunction$1(obj) {
     return typeof obj === 'function';
   }
@@ -249,6 +253,7 @@ var LWC = (function (exports) {
   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.
@@ -297,7 +302,7 @@ var LWC = (function (exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.3.3 */
+  /** version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -402,19 +407,33 @@ var LWC = (function (exports) {
    */
 
 
+  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') {
@@ -426,9 +445,10 @@ var LWC = (function (exports) {
       }
     }
 
-    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;
     }
 
@@ -445,37 +465,23 @@ var LWC = (function (exports) {
         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.3 */
+  /** version: 2.5.0 */
 
   /* proxy-compat-disable */
 
@@ -486,6 +492,7 @@ var LWC = (function (exports) {
    * 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));
@@ -2806,12 +2813,6 @@ var LWC = (function (exports) {
     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 */
     ) {
@@ -2850,6 +2851,12 @@ var LWC = (function (exports) {
     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
 
 
@@ -3008,7 +3015,7 @@ var LWC = (function (exports) {
       } = 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);
@@ -3024,7 +3031,7 @@ var LWC = (function (exports) {
       } = 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);
@@ -3040,7 +3047,7 @@ var LWC = (function (exports) {
       } = 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);
@@ -3056,7 +3063,7 @@ var LWC = (function (exports) {
       } = 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);
@@ -3072,7 +3079,7 @@ var LWC = (function (exports) {
       } = 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);
@@ -4482,6 +4489,19 @@ var LWC = (function (exports) {
 
   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) {
@@ -4555,6 +4575,7 @@ var LWC = (function (exports) {
     const {
       owner
     } = vnode;
+    setScopeTokenClassIfNecessary(elm, owner);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -4565,7 +4586,7 @@ var LWC = (function (exports) {
         }
       } = vnode;
       const {
-        shadowAttribute
+        stylesheetToken
       } = owner.context;
 
       if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -4577,7 +4598,7 @@ var LWC = (function (exports) {
       // into each element from the template, so they can be styled accordingly.
 
 
-      setElementShadowToken(elm, shadowAttribute);
+      setElementShadowToken(elm, stylesheetToken);
     }
 
     if (process.env.NODE_ENV !== 'production') {
@@ -4666,16 +4687,17 @@ var LWC = (function (exports) {
       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);
@@ -4975,13 +4997,19 @@ var LWC = (function (exports) {
 
   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];
+      }
     }
   }
 
@@ -5327,14 +5355,11 @@ var LWC = (function (exports) {
 
     const {
       idx,
-      renderMode,
       shadowMode
     } = vmBeingRendered;
 
     if (shadowMode === 1
     /* Synthetic */
-    && renderMode === 1
-    /* Shadow */
     ) {
       return StringReplace.call(id, /\S+/g, id => `${id}-${idx}`);
     }
@@ -5363,14 +5388,11 @@ var LWC = (function (exports) {
 
     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}`;
     }
@@ -5471,6 +5493,10 @@ var LWC = (function (exports) {
    * 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',
@@ -5480,59 +5506,100 @@ var LWC = (function (exports) {
     }, [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(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));
       }
     }
 
@@ -5542,37 +5609,36 @@ var LWC = (function (exports) {
   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) {
@@ -5590,13 +5656,26 @@ var LWC = (function (exports) {
       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.
@@ -5802,8 +5881,7 @@ var LWC = (function (exports) {
         context,
         cmpSlots,
         cmpTemplate,
-        tro,
-        shadowMode
+        tro
       } = vm;
       tro.observe(() => {
         // Reset the cache memoizer for template when needed.
@@ -5828,15 +5906,12 @@ var LWC = (function (exports) {
 
           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);
@@ -5878,6 +5953,22 @@ var LWC = (function (exports) {
 
     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.
@@ -5918,12 +6009,9 @@ var LWC = (function (exports) {
       callHook,
       owner
     } = vm;
-    let result;
     runWithBoundaryProtection(vm, owner, noop, () => {
-      // job
-      result = callHook(component, fn, args);
+      callHook(component, fn, args);
     }, noop);
-    return result;
   }
 
   function invokeComponentConstructor(vm, Ctor) {
@@ -5997,33 +6085,6 @@ var LWC = (function (exports) {
     return renderInvocationSuccessful ? evaluateTemplate(vm, html) : [];
   }
 
-  function invokeComponentRenderedCallback(vm) {
-    const {
-      def: {
-        renderedCallback
-      },
-      component,
-      callHook,
-      owner
-    } = vm;
-
-    if (!isUndefined$1(renderedCallback)) {
-      runWithBoundaryProtection(vm, owner, () => {
-        logOperationStart(4
-        /* RenderedCallback */
-        , vm);
-      }, () => {
-        // job
-        callHook(component, renderedCallback);
-      }, () => {
-        // post
-        logOperationEnd(4
-        /* RenderedCallback */
-        , vm);
-      });
-    }
-  }
-
   function invokeEventListener(vm, fn, thisValue, event) {
     const {
       callHook,
@@ -6179,7 +6240,6 @@ var LWC = (function (exports) {
    */
 
 
-  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 */
 
@@ -6288,29 +6348,6 @@ var LWC = (function (exports) {
     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,
@@ -6318,22 +6355,6 @@ var LWC = (function (exports) {
       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,
@@ -6356,10 +6377,12 @@ var LWC = (function (exports) {
       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,
@@ -6372,26 +6395,87 @@ var LWC = (function (exports) {
       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.`);
@@ -6473,7 +6557,14 @@ var LWC = (function (exports) {
   }
 
   function runRenderedCallback(vm) {
-    if (isTrue(vm.renderer.ssr)) {
+    const {
+      renderer,
+      def: {
+        renderedCallback
+      }
+    } = vm;
+
+    if (isTrue(renderer.ssr)) {
       return;
     }
 
@@ -6485,7 +6576,15 @@ var LWC = (function (exports) {
       invokeServiceHook(vm, rendered);
     }
 
-    invokeComponentRenderedCallback(vm);
+    if (!isUndefined$1(renderedCallback)) {
+      logOperationStart(4
+      /* RenderedCallback */
+      , vm);
+      invokeComponentCallback(vm, renderedCallback);
+      logOperationEnd(4
+      /* RenderedCallback */
+      , vm);
+    }
   }
 
   let rehydrateQueue = [];
@@ -7118,11 +7217,14 @@ var LWC = (function (exports) {
         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();
@@ -7229,7 +7331,7 @@ var LWC = (function (exports) {
 
     return reactiveMembrane.getReadOnlyProxy(obj);
   }
-  /* version: 2.3.3 */
+  /* version: 2.5.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7251,6 +7353,10 @@ var LWC = (function (exports) {
   }
 
   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() {
@@ -7277,6 +7383,52 @@ var LWC = (function (exports) {
     }
   }
 
+  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);
@@ -7322,7 +7474,8 @@ var LWC = (function (exports) {
 
   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);
@@ -7445,6 +7598,15 @@ var LWC = (function (exports) {
       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);
     },
@@ -7674,7 +7836,7 @@ var LWC = (function (exports) {
       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.
@@ -7727,7 +7889,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.3.3 */
+  /* version: 2.5.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;