lwc 2.3.4 → 2.5.1

package/dist/engine-dom/umd/es2017/engine-dom_debug.js

@@ -110,6 +110,10 @@
     return obj === false;
   }
 
+  function isBoolean(obj) {
+    return typeof obj === 'boolean';
+  }
+
   function isFunction$1(obj) {
     return typeof obj === 'function';
   }
@@ -248,6 +252,7 @@
   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.
@@ -296,7 +301,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.3.4 */
+  /** version: 2.5.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -401,19 +406,33 @@
    */
 
 
+  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.`;
 
       {
@@ -423,9 +442,10 @@
       }
     }
 
-    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;
     }
 
@@ -439,34 +459,20 @@
         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) {
   }
-
-  const featureFlagLookup = {
-    ENABLE_REACTIVE_SETTER: null,
-    ENABLE_HMR: null,
-    // Flag to toggle on/off the enforcement of innerText/outerText shadow dom semantic in elements when using synthetic shadow.
-    // Note: Once active, elements outside the lwc boundary are controlled by the ENABLE_ELEMENT_PATCH flag.
-    ENABLE_INNER_OUTER_TEXT_PATCH: null,
-    // Flags to toggle on/off the enforcement of shadow dom semantic in element/node outside lwc boundary when using synthetic shadow.
-    ENABLE_ELEMENT_PATCH: null,
-    ENABLE_NODE_LIST_PATCH: null,
-    ENABLE_HTML_COLLECTIONS_PATCH: null,
-    ENABLE_NODE_PATCH: null,
-    // Disables the fix for #2121 where non-composed events are visible outside of their shadow root.
-    ENABLE_NON_COMPOSED_EVENTS_LEAKAGE: null,
-    ENABLE_LIGHT_DOM_COMPONENTS: null,
-    ENABLE_MIXED_SHADOW_MODE: null
-  };
-  /** version: 2.3.4 */
+  /** version: 2.5.1 */
 
   /* proxy-compat-disable */
 
@@ -477,6 +483,7 @@
    * 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));
@@ -2195,12 +2202,6 @@
     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 */
     ) {
@@ -2229,7 +2230,7 @@
     });
     vm.cmpRoot = cmpRoot;
     associateVM(cmpRoot, vm);
-  } // @ts-ignore
+  }
 
 
   LightningElement.prototype = {
@@ -2758,8 +2759,15 @@
 
           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;
@@ -2820,8 +2828,15 @@
       for (let i = 0, n = fields.length; i < n; i++) {
         const fieldName = fields[i];
         descriptor = getOwnPropertyDescriptor$1(proto, fieldName);
+        // tracked property. This is only here for backward compatibility purposes.
 
-        observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+
+        const isDuplicatePublicProp = !isUndefined$1(publicProps) && fieldName in publicProps;
+        const isDuplicateTrackedProp = !isUndefined$1(track) && fieldName in track;
+
+        if (!isDuplicatePublicProp && !isDuplicateTrackedProp) {
+          observedFields[fieldName] = createObservedFieldPropertyDescriptor(fieldName);
+        }
       }
     }
 
@@ -3367,6 +3382,19 @@
 
   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) {
@@ -3417,6 +3445,7 @@
     const {
       owner
     } = vnode;
+    setScopeTokenClassIfNecessary(elm, owner);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -3427,7 +3456,7 @@
         }
       } = vnode;
       const {
-        shadowAttribute
+        stylesheetToken
       } = owner.context;
 
       if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
@@ -3439,7 +3468,7 @@
       // into each element from the template, so they can be styled accordingly.
 
 
-      setElementShadowToken(elm, shadowAttribute);
+      setElementShadowToken(elm, stylesheetToken);
     }
   }
 
@@ -3510,16 +3539,17 @@
       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);
@@ -3807,13 +3837,19 @@
 
   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];
+      }
     }
   }
 
@@ -4048,14 +4084,11 @@
 
     const {
       idx,
-      renderMode,
       shadowMode
     } = vmBeingRendered;
 
     if (shadowMode === 1
     /* Synthetic */
-    && renderMode === 1
-    /* Shadow */
     ) {
       return StringReplace.call(id, /\S+/g, id => `${id}-${idx}`);
     }
@@ -4079,14 +4112,11 @@
 
     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}`;
     }
@@ -4179,6 +4209,10 @@
    * 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',
@@ -4188,53 +4222,94 @@
     }, [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 {
-
-        ArrayPush$1.call(content, stylesheet(hostSelector, shadowSelector, nativeShadow));
+        // 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.
+
+        const scopeToken = isScopedCss || vm.shadowMode === 1
+        /* Synthetic */
+        && vm.renderMode === 1
+        /* Shadow */
+        ? stylesheetToken : undefined;
+        ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
       }
     }
 
@@ -4244,37 +4319,36 @@
   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) {
@@ -4292,13 +4366,26 @@
       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;
   }
   /** Indicates if operations should be logged by the profiler. */
 
@@ -4420,8 +4507,7 @@
         context,
         cmpSlots,
         cmpTemplate,
-        tro,
-        shadowMode
+        tro
       } = vm;
       tro.observe(() => {
         // Reset the cache memoizer for template when needed.
@@ -4444,15 +4530,12 @@
 
           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);
@@ -4485,6 +4568,22 @@
 
     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.
@@ -4725,7 +4824,6 @@
    */
 
 
-  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 */
 
@@ -4811,6 +4909,18 @@
     resetComponentStateWhenRemoved(vm);
   }
 
+  function getNearestShadowAncestor(vm) {
+    let ancestor = vm.owner;
+
+    while (!isNull(ancestor) && ancestor.renderMode === 0
+    /* Light */
+    ) {
+      ancestor = ancestor.owner;
+    }
+
+    return ancestor;
+  }
+
   function createVM(elm, def, options) {
     const {
       mode,
@@ -4818,22 +4928,6 @@
       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,
@@ -4856,10 +4950,12 @@
       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,
@@ -4872,18 +4968,81 @@
       setHook,
       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) {
+    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 associateVM(obj, vm) {
     ViewModelReflection.set(obj, vm);
   }
@@ -5578,11 +5737,14 @@
         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();
@@ -5683,7 +5845,7 @@
 
     return reactiveMembrane.getReadOnlyProxy(obj);
   }
-  /* version: 2.3.4 */
+  /* version: 2.5.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5696,6 +5858,10 @@
   const globalStylesheets = create(null);
 
   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() {
@@ -5722,6 +5888,52 @@
     }
   }
 
+  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);
@@ -5767,7 +5979,8 @@
 
   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);
@@ -5884,6 +6097,15 @@
       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);
     },
@@ -6106,7 +6328,7 @@
       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.
@@ -6159,7 +6381,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.3.4 */
+  /* version: 2.5.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;