lwc 2.3.4 → 2.5.1

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

@@ -27,7 +27,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; }
 
@@ -149,6 +149,10 @@ var LWC = (function (exports) {
     return obj === false;
   }
 
+  function isBoolean(obj) {
+    return typeof obj === 'boolean';
+  }
+
   function isFunction$1(obj) {
     return typeof obj === 'function';
   }
@@ -288,6 +292,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.
@@ -336,7 +341,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.
@@ -439,19 +444,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.");
 
       {
@@ -461,9 +480,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;
     }
 
@@ -477,34 +499,20 @@ 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) {
   }
-
-  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 */
 
@@ -515,6 +523,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));
@@ -2210,12 +2219,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 */
     ) {
@@ -2236,7 +2239,7 @@ var LWC = (function (exports) {
     var cmpRoot = renderer.attachShadow(elm, (_renderer$attachShado = {}, _defineProperty(_renderer$attachShado, KEY__SYNTHETIC_MODE, shadowMode === 1), _defineProperty(_renderer$attachShado, "delegatesFocus", Boolean(ctor.delegatesFocus)), _defineProperty(_renderer$attachShado, "mode", mode), _renderer$attachShado));
     vm.cmpRoot = cmpRoot;
     associateVM(cmpRoot, vm);
-  } // @ts-ignore
+  }
 
 
   LightningElement.prototype = {
@@ -2690,8 +2693,15 @@ var LWC = (function (exports) {
 
           descriptor = createPublicAccessorDescriptor(fieldName, descriptor);
         } else {
+          // 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;
@@ -2752,8 +2762,15 @@ var LWC = (function (exports) {
       for (var _i9 = 0, n = fields.length; _i9 < n; _i9++) {
         var _fieldName2 = fields[_i9];
         descriptor = getOwnPropertyDescriptor$1(proto, _fieldName2);
+        // tracked property. This is only here for backward compatibility purposes.
+
+
+        var isDuplicatePublicProp = !isUndefined$1(publicProps) && _fieldName2 in publicProps;
+        var isDuplicateTrackedProp = !isUndefined$1(track) && _fieldName2 in track;
 
-        observedFields[_fieldName2] = createObservedFieldPropertyDescriptor(_fieldName2);
+        if (!isDuplicatePublicProp && !isDuplicateTrackedProp) {
+          observedFields[_fieldName2] = createObservedFieldPropertyDescriptor(_fieldName2);
+        }
       }
     }
 
@@ -3293,6 +3310,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) {
@@ -3333,12 +3361,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 */
@@ -3349,7 +3378,7 @@ var LWC = (function (exports) {
       // into each element from the template, so they can be styled accordingly.
 
 
-      setElementShadowToken(elm, shadowAttribute);
+      setElementShadowToken(elm, stylesheetToken);
     }
   }
 
@@ -3414,14 +3443,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);
@@ -3698,12 +3728,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];
+      }
     }
   }
 
@@ -3931,13 +3967,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);
@@ -3962,13 +3995,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);
     }
@@ -4061,6 +4091,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',
@@ -4070,49 +4104,86 @@ 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 {
-
-        ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
+        // 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.
+
+        var scopeToken = isScopedCss || vm.shadowMode === 1
+        /* Synthetic */
+        && vm.renderMode === 1
+        /* Shadow */
+        ? stylesheetToken : undefined;
+        ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
       }
     }
 
@@ -4121,34 +4192,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
+
+
+  function getNearestNativeShadowComponent(vm) {
+    var owner = vm;
 
-      if (renderMode === 1
+    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) {
@@ -4164,13 +4236,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;
   }
   /** Indicates if operations should be logged by the profiler. */
 
@@ -4287,8 +4372,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) {
@@ -4310,15 +4394,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);
@@ -4349,6 +4430,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.
@@ -4542,8 +4637,8 @@ var LWC = (function (exports) {
 
   function register(service) {
 
-    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];
@@ -4563,8 +4658,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);
     }
   }
   /*
@@ -4575,7 +4670,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 */
 
@@ -4658,27 +4752,23 @@ var LWC = (function (exports) {
     resetComponentStateWhenRemoved(vm);
   }
 
+  function getNearestShadowAncestor(vm) {
+    var ancestor = vm.owner;
+
+    while (!isNull(ancestor) && ancestor.renderMode === 0
+    /* Light */
+    ) {
+      ancestor = ancestor.owner;
+    }
+
+    return ancestor;
+  }
+
   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,
@@ -4701,10 +4791,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,
@@ -4717,18 +4809,77 @@ var LWC = (function (exports) {
       setHook: setHook,
       getHook: getHook
     };
+    vm.shadowMode = computeShadowMode(vm);
     vm.tro = getTemplateReactiveObserver(vm);
 
 
     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 associateVM(obj, vm) {
     ViewModelReflection.set(obj, vm);
   }
@@ -4828,19 +4979,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.
 
 
@@ -4939,8 +5090,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.
@@ -4974,8 +5125,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
@@ -4999,8 +5150,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);
@@ -5045,8 +5196,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;
@@ -5076,8 +5227,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);
@@ -5395,11 +5546,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();
@@ -5413,8 +5567,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]();
     }
   }
 
@@ -5422,8 +5576,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);
   }
@@ -5492,7 +5646,7 @@ var LWC = (function (exports) {
 
     return reactiveMembrane.getReadOnlyProxy(obj);
   }
-  /* version: 2.3.4 */
+  /* version: 2.5.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5505,6 +5659,10 @@ var LWC = (function (exports) {
   var globalStylesheets = create(null);
 
   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() {
@@ -5543,6 +5701,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);
@@ -5586,7 +5790,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);
     },
@@ -5677,6 +5882,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);
     },
@@ -5911,7 +6124,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.
@@ -5963,7 +6176,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;