lwc 2.3.4 → 2.5.1

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

@@ -29,7 +29,7 @@ var LWC = (function (exports) {
 
   function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf2(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf2(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
   function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -151,6 +151,10 @@ var LWC = (function (exports) {
     return obj === false;
   }
 
+  function isBoolean(obj) {
+    return typeof obj === 'boolean';
+  }
+
   function isFunction$1(obj) {
     return typeof obj === 'function';
   }
@@ -294,6 +298,7 @@ var LWC = (function (exports) {
   var KEY__SHADOW_RESOLVER = '$shadowResolver$';
   var KEY__SHADOW_TOKEN = '$shadowToken$';
   var KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
+  var KEY__SCOPED_CSS = '$scoped$';
   /**
    * Map composed of properties to attributes not following the HTML property to attribute mapping
    * convention.
@@ -342,7 +347,7 @@ var LWC = (function (exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.3.4 */
+  /** version: 2.5.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -445,19 +450,33 @@ var LWC = (function (exports) {
    */
 
 
+  var 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)
     });
   }
 
-  var runtimeFlags = _globalThis.lwcRuntimeFlags; // This function is not supported for use within components and is meant for
-  // configuring runtime feature flags during app initialization.
+  var 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) {
-    var isBoolean = isTrue(value) || isFalse(value);
-
-    if (!isBoolean) {
+    if (!isBoolean(value)) {
       var message = "Failed to set the value \"".concat(value, "\" for the runtime feature flag \"").concat(name, "\". Runtime feature flags can only be set to a boolean value.");
 
       if (process.env.NODE_ENV !== 'production') {
@@ -469,9 +488,12 @@ var LWC = (function (exports) {
       }
     }
 
-    if (isUndefined$1(featureFlagLookup[name])) {
-      // eslint-disable-next-line no-console
-      console.warn("Failed to set the value \"".concat(value, "\" for the runtime feature flag \"").concat(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])) {
+      var availableFlags = keys(features).map(function (name) {
+        return "\"".concat(name, "\"");
+      }).join(', '); // eslint-disable-next-line no-console
+
+      console.warn("Failed to set the value \"".concat(value, "\" for the runtime feature flag \"").concat(name, "\" because it is undefined. Available flags: ").concat(availableFlags, "."));
       return;
     }
 
@@ -488,37 +510,23 @@ var LWC = (function (exports) {
         return;
       }
 
-      Object.defineProperty(runtimeFlags, name, {
+      defineProperty(runtimeFlags, name, {
         value: 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);
     }
   }
-
-  var 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 */
 
@@ -529,6 +537,7 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+
   var nextTickCallbackQueue = [];
   var SPACE_CHAR = 32;
   var EmptyObject = seal(create(null));
@@ -2780,12 +2789,6 @@ var LWC = (function (exports) {
     associateVM(component, vm);
     associateVM(elm, vm);
 
-    if (!runtimeFlags.ENABLE_LIGHT_DOM_COMPONENTS) {
-      assert.isTrue(def.renderMode !== 0
-      /* Light */
-      , "".concat(def.name || 'Anonymous class', " is an invalid LWC component. Light DOM components are not available in this environment."));
-    }
-
     if (vm.renderMode === 1
     /* Shadow */
     ) {
@@ -2816,6 +2819,12 @@ var LWC = (function (exports) {
     if (process.env.NODE_ENV !== 'production') {
       patchShadowRootWithRestrictions(cmpRoot);
     }
+  }
+
+  function warnIfInvokedDuringConstruction(vm, methodName) {
+    if (isBeingConstructed(vm)) {
+      logError("this.".concat(methodName, "() should not be called during the construction of the custom element for ").concat(getComponentTag(vm), " because the element is not yet in the DOM or has no children yet."));
+    }
   } // @ts-ignore
 
 
@@ -2929,7 +2938,7 @@ var LWC = (function (exports) {
           getBoundingClientRect = vm.renderer.getBoundingClientRect;
 
       if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isBeingConstructed(vm), "this.getBoundingClientRect() should not be called during the construction of the custom element for ".concat(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);
@@ -2940,7 +2949,7 @@ var LWC = (function (exports) {
           querySelector = vm.renderer.querySelector;
 
       if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isBeingConstructed(vm), "this.querySelector() cannot be called during the construction of the custom element for ".concat(getComponentTag(vm), " because no children has been added to this element yet."));
+        warnIfInvokedDuringConstruction(vm, 'querySelector');
       }
 
       return querySelector(elm, selectors);
@@ -2951,7 +2960,7 @@ var LWC = (function (exports) {
           querySelectorAll = vm.renderer.querySelectorAll;
 
       if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isBeingConstructed(vm), "this.querySelectorAll() cannot be called during the construction of the custom element for ".concat(getComponentTag(vm), " because no children has been added to this element yet."));
+        warnIfInvokedDuringConstruction(vm, 'querySelectorAll');
       }
 
       return querySelectorAll(elm, selectors);
@@ -2962,7 +2971,7 @@ var LWC = (function (exports) {
           getElementsByTagName = vm.renderer.getElementsByTagName;
 
       if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isBeingConstructed(vm), "this.getElementsByTagName() cannot be called during the construction of the custom element for ".concat(getComponentTag(vm), " because no children has been added to this element yet."));
+        warnIfInvokedDuringConstruction(vm, 'getElementsByTagName');
       }
 
       return getElementsByTagName(elm, tagNameOrWildCard);
@@ -2973,7 +2982,7 @@ var LWC = (function (exports) {
           getElementsByClassName = vm.renderer.getElementsByClassName;
 
       if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isBeingConstructed(vm), "this.getElementsByClassName() cannot be called during the construction of the custom element for ".concat(getComponentTag(vm), " because no children has been added to this element yet."));
+        warnIfInvokedDuringConstruction(vm, 'getElementsByClassName');
       }
 
       return getElementsByClassName(elm, names);
@@ -3342,18 +3351,33 @@ var LWC = (function (exports) {
 
   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)) {
       var type = getClassDescriptorType(descriptor);
-      assert.fail("Invalid observed ".concat(fieldName, " field. Found a duplicate ").concat(type, " with the same name."));
+      var message = "Invalid observed ".concat(fieldName, " field. Found a duplicate ").concat(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);
+      }
     }
   }
 
@@ -3380,7 +3404,16 @@ var LWC = (function (exports) {
   function validateFieldDecoratedWithApi(Ctor, fieldName, descriptor) {
     if (!isUndefined$1(descriptor)) {
       var type = getClassDescriptorType(descriptor);
-      assert.fail("Invalid @api ".concat(fieldName, " field. Found a duplicate ").concat(type, " with the same name."));
+      var message = "Invalid @api ".concat(fieldName, " field. Found a duplicate ").concat(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);
+      }
     }
   }
 
@@ -3441,9 +3474,16 @@ var LWC = (function (exports) {
           // 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;
@@ -3523,9 +3563,16 @@ var LWC = (function (exports) {
 
         if (process.env.NODE_ENV !== 'production') {
           validateObservedField(Ctor, _fieldName2, 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[_fieldName2] = createObservedFieldPropertyDescriptor(_fieldName2);
+        var isDuplicatePublicProp = !isUndefined$1(publicProps) && _fieldName2 in publicProps;
+        var isDuplicateTrackedProp = !isUndefined$1(track) && _fieldName2 in track;
+
+        if (!isDuplicatePublicProp && !isDuplicateTrackedProp) {
+          observedFields[_fieldName2] = createObservedFieldPropertyDescriptor(_fieldName2);
+        }
       }
     }
 
@@ -4380,6 +4427,17 @@ var LWC = (function (exports) {
 
   function setElementShadowToken(elm, token) {
     elm.$shadowToken$ = token;
+  } // Set the scope token class for *.scoped.css styles
+
+
+  function setScopeTokenClassIfNecessary(elm, owner) {
+    var cmpTemplate = owner.cmpTemplate,
+        context = owner.context;
+    var 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) {
@@ -4443,12 +4501,13 @@ var LWC = (function (exports) {
 
   function fallbackElmHook(elm, vnode) {
     var owner = vnode.owner;
+    setScopeTokenClassIfNecessary(elm, owner);
 
     if (owner.shadowMode === 1
     /* Synthetic */
     ) {
       var context = vnode.data.context;
-      var shadowAttribute = owner.context.shadowAttribute;
+      var stylesheetToken = owner.context.stylesheetToken;
 
       if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
       /* manual */
@@ -4459,7 +4518,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') {
@@ -4538,14 +4597,15 @@ var LWC = (function (exports) {
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
+    setScopeTokenClassIfNecessary(elm, owner);
 
     if (owner.shadowMode === 1
     /* Synthetic */
     ) {
-      var shadowAttribute = owner.context.shadowAttribute; // when running in synthetic shadow mode, we need to set the shadowToken value
+      var stylesheetToken = owner.context.stylesheetToken; // 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);
     }
 
     var def = getComponentInternalDef(ctor);
@@ -4834,12 +4894,18 @@ var LWC = (function (exports) {
   };
 
   function linkNodeToShadow(elm, owner) {
-    var shadowMode = owner.shadowMode; // TODO [#1164]: this should eventually be done by the polyfill directly
+    var renderer = owner.renderer,
+        renderMode = owner.renderMode,
+        shadowMode = owner.shadowMode; // 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];
+      }
     }
   }
 
@@ -5176,13 +5242,10 @@ var LWC = (function (exports) {
     }
 
     var idx = vmBeingRendered.idx,
-        renderMode = vmBeingRendered.renderMode,
         shadowMode = vmBeingRendered.shadowMode;
 
     if (shadowMode === 1
     /* Synthetic */
-    && renderMode === 1
-    /* Shadow */
     ) {
       return StringReplace.call(id, /\S+/g, function (id) {
         return "".concat(id, "-").concat(idx);
@@ -5212,13 +5275,10 @@ var LWC = (function (exports) {
     }
 
     var idx = vmBeingRendered.idx,
-        renderMode = vmBeingRendered.renderMode,
         shadowMode = vmBeingRendered.shadowMode; // Apply transformation only for fragment-only-urls, and only in shadow DOM
 
     if (shadowMode === 1
     /* Synthetic */
-    && renderMode === 1
-    /* Shadow */
     && /^#/.test(url)) {
       return "".concat(url, "-").concat(idx);
     }
@@ -5319,6 +5379,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 "".concat(token, "-host");
+  }
+
   function createInlineStyleVNode(content) {
     return h('style', {
       key: 'style',
@@ -5328,55 +5392,92 @@ var LWC = (function (exports) {
     }, [t(content)]);
   }
 
-  function updateSyntheticShadowAttributes(vm, template) {
+  function updateStylesheetToken(vm, template) {
     var elm = vm.elm,
         context = vm.context,
         renderer = vm.renderer,
-        renderMode = vm.renderMode;
+        renderMode = vm.renderMode,
+        shadowMode = vm.shadowMode;
     var newStylesheets = template.stylesheets,
-        newStylesheetTokens = template.stylesheetTokens;
-    var newTokens; // Reset the styling token applied to the host element.
+        newStylesheetToken = template.stylesheetToken;
+    var isSyntheticShadow = renderMode === 1
+    /* Shadow */
+    && shadowMode === 1
+    /* Synthetic */
+    ;
+    var hasScopedStyles = context.hasScopedStyles;
+    var newToken;
+    var newHasTokenInClass;
+    var newHasTokenInAttribute; // Reset the styling token applied to the host element.
 
-    var oldHostAttribute = context.hostAttribute;
+    var oldToken = context.stylesheetToken,
+        oldHasTokenInClass = context.hasTokenInClass,
+        oldHasTokenInAttribute = context.hasTokenInAttribute;
 
-    if (!isUndefined$1(oldHostAttribute)) {
-      renderer.removeAttribute(elm, oldHostAttribute);
+    if (oldHasTokenInClass) {
+      renderer.getClassList(elm).remove(makeHostToken(oldToken));
+    }
+
+    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) {
     var content = [];
 
     for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
       var stylesheet = stylesheets[_i12];
 
       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`.
+
+
+        var isScopedCss = stylesheet[KEY__SCOPED_CSS];
+        var 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));
+        var scopeToken = isScopedCss || vm.shadowMode === 1
+        /* Synthetic */
+        && vm.renderMode === 1
+        /* Shadow */
+        ? stylesheetToken : undefined;
+        ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
       }
     }
 
@@ -5385,34 +5486,35 @@ var LWC = (function (exports) {
 
   function getStylesheetsContent(vm, template) {
     var stylesheets = template.stylesheets,
-        stylesheetTokens = template.stylesheetTokens;
-    var renderMode = vm.renderMode,
-        shadowMode = vm.shadowMode;
+        stylesheetToken = template.stylesheetToken;
     var content = [];
 
     if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-      var hostSelector;
-      var 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) {
+    var owner = vm;
+
+    while (!isNull(owner)) {
+      if (owner.renderMode === 1
       /* Shadow */
-      && shadowMode === 1
-      /* Synthetic */
-      && !isUndefined$1(stylesheetTokens)) {
-        hostSelector = "[".concat(stylesheetTokens.hostAttribute, "]");
-        shadowSelector = "[".concat(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) {
@@ -5428,13 +5530,26 @@ var LWC = (function (exports) {
       for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
         renderer.insertGlobalStylesheet(stylesheets[_i13]);
       }
-
-      return null;
-    } else {
-      // native shadow or light DOM
+    } else if (renderer.ssr) {
+      // native shadow or light DOM, SSR
       var combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
       return createInlineStyleVNode(combinedStylesheetContent);
+    } else {
+      // native shadow or light DOM, DOM renderer
+      var root = getNearestNativeShadowComponent(vm);
+      var isGlobal = isNull(root);
+
+      for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
+        if (isGlobal) {
+          renderer.insertGlobalStylesheet(stylesheets[_i14]);
+        } else {
+          // local level
+          renderer.insertStylesheet(stylesheets[_i14], root.cmpRoot);
+        }
+      }
     }
+
+    return null;
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5632,8 +5747,7 @@ var LWC = (function (exports) {
           context = vm.context,
           cmpSlots = vm.cmpSlots,
           cmpTemplate = vm.cmpTemplate,
-          tro = vm.tro,
-          shadowMode = vm.shadowMode;
+          tro = vm.tro;
       tro.observe(function () {
         // Reset the cache memoizer for template when needed.
         if (html !== cmpTemplate) {
@@ -5657,15 +5771,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.
 
           var stylesheetsContent = getStylesheetsContent(vm, html);
           context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
@@ -5705,6 +5816,20 @@ var LWC = (function (exports) {
 
     return vnodes;
   }
+
+  function computeHasScopedStyles(template) {
+    var stylesheets = template.stylesheets;
+
+    if (!isUndefined$1(stylesheets)) {
+      for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
+        if (isTrue(stylesheets[_i15][KEY__SCOPED_CSS])) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5927,8 +6052,8 @@ var LWC = (function (exports) {
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
 
-    for (var _i14 = 0; _i14 < hooks.length; ++_i14) {
-      var hookName = hooks[_i14];
+    for (var _i16 = 0; _i16 < hooks.length; ++_i16) {
+      var hookName = hooks[_i16];
 
       if (hookName in service) {
         var l = Services[hookName];
@@ -5951,8 +6076,8 @@ var LWC = (function (exports) {
         def = vm.def,
         context = vm.context;
 
-    for (var _i15 = 0, _len6 = cbs.length; _i15 < _len6; ++_i15) {
-      cbs[_i15].call(undefined, component, {}, def, context);
+    for (var _i17 = 0, _len6 = cbs.length; _i17 < _len6; ++_i17) {
+      cbs[_i17].call(undefined, component, {}, def, context);
     }
   }
   /*
@@ -5963,7 +6088,6 @@ var LWC = (function (exports) {
    */
 
 
-  var isNativeShadowRootDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   var idx = 0;
   /** The internal slot used to associate different objects the engine manipulates with the VM */
 
@@ -6069,50 +6193,11 @@ var LWC = (function (exports) {
     return ancestor;
   }
 
-  function assertNotSyntheticComposedWithinNative(vm) {
-    var isSynthetic = vm.renderMode === 1
-    /* Shadow */
-    && vm.shadowMode === 1
-    /* Synthetic */
-    ;
-
-    if (!isSynthetic) {
-      return;
-    }
-
-    var 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 */
-      , "".concat(getComponentTag(vm), " (synthetic shadow DOM) cannot be composed inside of ").concat(getComponentTag(ancestor), " (native shadow DOM), because synthetic-within-native composition is disallowed"));
-    }
-  }
-
   function createVM(elm, def, options) {
     var mode = options.mode,
         owner = options.owner,
         renderer = options.renderer,
         tagName = options.tagName;
-    var shadowMode;
-
-    if (renderer.syntheticShadow) {
-      shadowMode = def.shadowSupportMode === "any"
-      /* Any */
-      && isNativeShadowRootDefined ? 0
-      /* Native */
-      : 1
-      /* Synthetic */
-      ;
-    } else {
-      shadowMode = 0
-      /* Native */
-      ;
-    }
-
     var vm = {
       elm: elm,
       def: def,
@@ -6135,10 +6220,12 @@ var LWC = (function (exports) {
       oar: create(null),
       cmpTemplate: null,
       renderMode: def.renderMode,
-      shadowMode: shadowMode,
+      shadowMode: null,
       context: {
-        hostAttribute: undefined,
-        shadowAttribute: undefined,
+        stylesheetToken: undefined,
+        hasTokenInClass: undefined,
+        hasTokenInAttribute: undefined,
+        hasScopedStyles: undefined,
         styleVNode: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
@@ -6151,26 +6238,83 @@ var LWC = (function (exports) {
       setHook: setHook,
       getHook: getHook
     };
+    vm.shadowMode = computeShadowMode(vm);
     vm.tro = getTemplateReactiveObserver(vm);
 
     if (process.env.NODE_ENV !== 'production') {
       vm.toString = function () {
         return "[object:vm ".concat(def.name, " (").concat(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) {
+    var def = vm.def,
+        renderer = vm.renderer;
+    var isNativeShadowDefined = renderer.isNativeShadowDefined,
+        isSyntheticShadowDefined = renderer.isSyntheticShadowDefined;
+    var 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 {
+          var 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("".concat(obj, " is not a VM."));
@@ -6290,19 +6434,19 @@ var LWC = (function (exports) {
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i16 = 0, _len7 = vms.length; _i16 < _len7; _i16 += 1) {
-      var vm = vms[_i16];
+    for (var _i18 = 0, _len7 = vms.length; _i18 < _len7; _i18 += 1) {
+      var vm = vms[_i18];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i16 + 1 < _len7) {
+        if (_i18 + 1 < _len7) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i16 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i18 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -6406,8 +6550,8 @@ var LWC = (function (exports) {
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i17 = vCustomElementCollection.length - 1; _i17 >= 0; _i17 -= 1) {
-      var elm = vCustomElementCollection[_i17].elm; // There are two cases where the element could be undefined:
+    for (var _i19 = vCustomElementCollection.length - 1; _i19 >= 0; _i19 -= 1) {
+      var elm = vCustomElementCollection[_i19].elm; // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
       //   is not properly initialized, and therefore is should be ignored.
@@ -6441,8 +6585,8 @@ var LWC = (function (exports) {
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i18 = 0, _len8 = vnodes.length; _i18 < _len8; _i18 += 1) {
-      var vnode = vnodes[_i18];
+    for (var _i20 = 0, _len8 = vnodes.length; _i20 < _len8; _i20 += 1) {
+      var vnode = vnodes[_i20];
 
       if (!isNull(vnode) && isArray$1(vnode.children) && !isUndefined$1(vnode.elm)) {
         // vnode is a VElement with children
@@ -6466,8 +6610,8 @@ var LWC = (function (exports) {
         renderer = vm.renderer;
     var rootNode = getRenderRoot(vm);
 
-    for (var _i19 = 0, _len9 = children.length; _i19 < _len9; _i19++) {
-      var child = children[_i19];
+    for (var _i21 = 0, _len9 = children.length; _i21 < _len9; _i21++) {
+      var child = children[_i21];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
         renderer.remove(child.elm, rootNode);
@@ -6512,8 +6656,8 @@ var LWC = (function (exports) {
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i20 = 0, _len10 = children.length; _i20 < _len10; _i20 += 1) {
-      var vnode = children[_i20];
+    for (var _i22 = 0, _len10 = children.length; _i22 < _len10; _i22 += 1) {
+      var vnode = children[_i22];
 
       if (isNull(vnode)) {
         continue;
@@ -6543,8 +6687,8 @@ var LWC = (function (exports) {
         return;
       }
 
-      for (var _i21 = 0, _len11 = oldKeys.length; _i21 < _len11; _i21 += 1) {
-        var key = oldKeys[_i21];
+      for (var _i23 = 0, _len11 = oldKeys.length; _i23 < _len11; _i23 += 1) {
+        var key = oldKeys[_i23];
 
         if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
           markComponentAsDirty(vm);
@@ -6886,11 +7030,14 @@ var LWC = (function (exports) {
           ArrayPush$1.call(wiredConnecting, function () {
             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, function () {
             connector.disconnect();
@@ -6904,8 +7051,8 @@ var LWC = (function (exports) {
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i22 = 0, _len12 = wiredConnecting.length; _i22 < _len12; _i22 += 1) {
-      wiredConnecting[_i22]();
+    for (var _i24 = 0, _len12 = wiredConnecting.length; _i24 < _len12; _i24 += 1) {
+      wiredConnecting[_i24]();
     }
   }
 
@@ -6913,8 +7060,8 @@ var LWC = (function (exports) {
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i23 = 0, _len13 = wiredDisconnecting.length; _i23 < _len13; _i23 += 1) {
-        wiredDisconnecting[_i23]();
+      for (var _i25 = 0, _len13 = wiredDisconnecting.length; _i25 < _len13; _i25 += 1) {
+        wiredDisconnecting[_i25]();
       }
     }, noop);
   }
@@ -6989,7 +7136,7 @@ var LWC = (function (exports) {
 
     return reactiveMembrane.getReadOnlyProxy(obj);
   }
-  /* version: 2.3.4 */
+  /* version: 2.5.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7004,14 +7151,18 @@ var LWC = (function (exports) {
   if (process.env.NODE_ENV === 'development') {
     // @ts-ignore
     window.__lwcResetGlobalStylesheets = function () {
-      for (var _i24 = 0, _Object$keys = Object.keys(globalStylesheets); _i24 < _Object$keys.length; _i24++) {
-        var key = _Object$keys[_i24];
+      for (var _i26 = 0, _Object$keys = Object.keys(globalStylesheets); _i26 < _Object$keys.length; _i26++) {
+        var key = _Object$keys[_i26];
         delete globalStylesheets[key];
       }
     };
   }
 
   var globalStylesheetsParentElement = document.head || document.body || document;
+  var supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.replaceSync);
+  var styleElements = create(null);
+  var styleSheets = create(null);
+  var nodesToStyleSheets = new WeakMap();
   var getCustomElement, defineCustomElement, HTMLElementConstructor;
 
   function isCustomElementRegistryAvailable() {
@@ -7050,6 +7201,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.
+    var styleSheet = styleSheets[content];
+
+    if (isUndefined$1(styleSheet)) {
+      styleSheet = new CSSStyleSheet();
+      styleSheet.replaceSync(content);
+      styleSheets[content] = styleSheet;
+    }
+
+    if (!target.adoptedStyleSheets.includes(styleSheet)) {
+      target.adoptedStyleSheets = [].concat(_toConsumableArray(target.adoptedStyleSheets), [styleSheet]);
+    }
+  }
+
+  function insertStyleElement(content, target) {
+    // Avoid inserting duplicate `<style>`s
+    var 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.
+
+    var 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);
@@ -7093,7 +7290,8 @@ var LWC = (function (exports) {
 
   var 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: function createElement(tagName, namespace) {
       return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
     },
@@ -7190,6 +7388,14 @@ var LWC = (function (exports) {
       elm.textContent = content;
       globalStylesheetsParentElement.appendChild(elm);
     },
+    insertStylesheet: function insertStylesheet(content, target) {
+      if (supportsConstructableStyleSheets) {
+        insertConstructableStyleSheet(content, target);
+      } else {
+        // Fall back to <style> element
+        insertStyleElement(content, target);
+      }
+    },
     assertInstanceOfHTMLElement: function assertInstanceOfHTMLElement(elm, msg) {
       assert.invariant(elm instanceof HTMLElement, msg);
     },
@@ -7431,7 +7637,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.
@@ -7483,7 +7689,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.3.4 */
+  /* version: 2.5.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;