lwc 2.5.10-alpha1 → 2.7.0

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

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.LWC = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
   function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf2(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
 
@@ -18,13 +18,13 @@
 
   function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-  function _get2(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get2 = Reflect.get; } else { _get2 = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get2(target, property, receiver || target); }
+  function _get2() { if (typeof Reflect !== "undefined" && Reflect.get) { _get2 = Reflect.get; } else { _get2 = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get2.apply(this, arguments); }
 
   function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf2(object); if (object === null) break; } return object; }
 
   function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
   function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -42,7 +42,7 @@
 
   function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
   function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -56,7 +56,7 @@
 
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
   /* proxy-compat-disable */
 
@@ -123,7 +123,7 @@
   var _Array$prototype = Array.prototype,
       ArrayIndexOf = _Array$prototype.indexOf,
       ArrayJoin = _Array$prototype.join,
-      ArrayMap$1 = _Array$prototype.map,
+      ArrayMap = _Array$prototype.map,
       ArrayPush$1 = _Array$prototype.push,
       ArraySlice = _Array$prototype.slice,
       ArraySplice = _Array$prototype.splice,
@@ -180,7 +180,7 @@
       // Array.prototype.toString directly will cause an error Iterate through
       // all the items and handle individually.
       if (isArray$1(obj)) {
-        return ArrayJoin.call(ArrayMap$1.call(obj, toString$1), ',');
+        return ArrayJoin.call(ArrayMap.call(obj, toString$1), ',');
       }
 
       return obj.toString();
@@ -344,7 +344,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.5.10-alpha1 */
+  /** version: 2.7.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -456,7 +456,6 @@
     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
   };
@@ -516,7 +515,7 @@
 
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.5.10-alpha1 */
+  /** version: 2.7.0 */
 
   /* proxy-compat-disable */
 
@@ -1497,7 +1496,8 @@
    */
 
   var isArray = Array.isArray;
-  var _getPrototypeOf = Object.getPrototypeOf,
+  var ObjectDotPrototype = Object.prototype,
+      _getPrototypeOf = Object.getPrototypeOf,
       ObjectCreate = Object.create,
       ObjectDefineProperty = Object.defineProperty,
       _isExtensible = Object.isExtensible,
@@ -1564,7 +1564,10 @@
         //       but it will always be compatible with the previous descriptor
         //       to preserve the object invariants, which makes these lines safe.
 
-        var originalDescriptor = _getOwnPropertyDescriptor(originalTarget, key);
+        var originalDescriptor = _getOwnPropertyDescriptor(originalTarget, key); // TODO: it should be impossible for the originalDescriptor to ever be undefined, this `if` can be removed
+
+        /* istanbul ignore else */
+
 
         if (!isUndefined(originalDescriptor)) {
           var wrappedDesc = this.wrapDescriptor(originalDescriptor);
@@ -1589,12 +1592,18 @@
 
         _preventExtensions(shadowTarget);
       } // Shared Traps
+      // TODO: apply() is never called
+
+      /* istanbul ignore next */
 
     }, {
       key: "apply",
       value: function apply(shadowTarget, thisArg, argArray) {
         /* No op */
-      }
+      } // TODO: construct() is never called
+
+      /* istanbul ignore next */
+
     }, {
       key: "construct",
       value: function construct(shadowTarget, argArray, newTarget) {
@@ -1699,8 +1708,8 @@
     return BaseProxyHandler;
   }();
 
-  var getterMap = new WeakMap();
-  var setterMap = new WeakMap();
+  var getterMap$1 = new WeakMap();
+  var setterMap$1 = new WeakMap();
   var reverseGetterMap = new WeakMap();
   var reverseSetterMap = new WeakMap();
 
@@ -1723,7 +1732,7 @@
     }, {
       key: "wrapGetter",
       value: function wrapGetter(originalGet) {
-        var wrappedGetter = getterMap.get(originalGet);
+        var wrappedGetter = getterMap$1.get(originalGet);
 
         if (!isUndefined(wrappedGetter)) {
           return wrappedGetter;
@@ -1736,14 +1745,14 @@
           return handler.wrapValue(originalGet.call(unwrap$1(this)));
         };
 
-        getterMap.set(originalGet, get);
+        getterMap$1.set(originalGet, get);
         reverseGetterMap.set(get, originalGet);
         return get;
       }
     }, {
       key: "wrapSetter",
       value: function wrapSetter(originalSet) {
-        var wrappedSetter = setterMap.get(originalSet);
+        var wrappedSetter = setterMap$1.get(originalSet);
 
         if (!isUndefined(wrappedSetter)) {
           return wrappedSetter;
@@ -1754,7 +1763,7 @@
           originalSet.call(unwrap$1(this), unwrap$1(v));
         };
 
-        setterMap.set(originalSet, set);
+        setterMap$1.set(originalSet, set);
         reverseSetterMap.set(set, originalSet);
         return set;
       }
@@ -1795,7 +1804,7 @@
           return unwrap$1(redGet.call(handler.wrapValue(this)));
         };
 
-        getterMap.set(get, redGet);
+        getterMap$1.set(get, redGet);
         reverseGetterMap.set(redGet, get);
         return get;
       }
@@ -1815,7 +1824,7 @@
           redSet.call(handler.wrapValue(this), handler.wrapValue(v));
         };
 
-        setterMap.set(set, redSet);
+        setterMap$1.set(set, redSet);
         reverseSetterMap.set(redSet, set);
         return set;
       }
@@ -1861,6 +1870,11 @@
           _preventExtensions(originalTarget); // if the originalTarget is a proxy itself, it might reject
           // the preventExtension call, in which case we should not attempt to lock down
           // the shadow target.
+          // TODO: It should not actually be possible to reach this `if` statement.
+          // If a proxy rejects extensions, then calling preventExtensions will throw an error:
+          // https://codepen.io/nolanlawson-the-selector/pen/QWMOjbY
+
+          /* istanbul ignore if */
 
 
           if (_isExtensible(originalTarget)) {
@@ -1903,8 +1917,8 @@
     return ReactiveProxyHandler;
   }(BaseProxyHandler);
 
-  var getterMap$1 = new WeakMap();
-  var setterMap$1 = new WeakMap();
+  var getterMap = new WeakMap();
+  var setterMap = new WeakMap();
 
   var ReadOnlyHandler = /*#__PURE__*/function (_BaseProxyHandler2) {
     _inherits(ReadOnlyHandler, _BaseProxyHandler2);
@@ -1925,7 +1939,7 @@
     }, {
       key: "wrapGetter",
       value: function wrapGetter(originalGet) {
-        var wrappedGetter = getterMap$1.get(originalGet);
+        var wrappedGetter = getterMap.get(originalGet);
 
         if (!isUndefined(wrappedGetter)) {
           return wrappedGetter;
@@ -1938,13 +1952,13 @@
           return handler.wrapValue(originalGet.call(unwrap$1(this)));
         };
 
-        getterMap$1.set(originalGet, get);
+        getterMap.set(originalGet, get);
         return get;
       }
     }, {
       key: "wrapSetter",
       value: function wrapSetter(originalSet) {
-        var wrappedSetter = setterMap$1.get(originalSet);
+        var wrappedSetter = setterMap.get(originalSet);
 
         if (!isUndefined(wrappedSetter)) {
           return wrappedSetter;
@@ -1953,18 +1967,22 @@
         var set = function set(v) {
         };
 
-        setterMap$1.set(originalSet, set);
+        setterMap.set(originalSet, set);
         return set;
       }
     }, {
       key: "set",
       value: function set(shadowTarget, key, value) {
+        /* istanbul ignore next */
+
 
         return false;
       }
     }, {
       key: "deleteProperty",
       value: function deleteProperty(shadowTarget, key) {
+        /* istanbul ignore next */
+
 
         return false;
       }
@@ -1975,12 +1993,16 @@
     }, {
       key: "preventExtensions",
       value: function preventExtensions(shadowTarget) {
+        /* istanbul ignore next */
+
 
         return false;
       }
     }, {
       key: "defineProperty",
       value: function defineProperty(shadowTarget, key, descriptor) {
+        /* istanbul ignore next */
+
 
         return false;
       }
@@ -1989,8 +2011,6 @@
     return ReadOnlyHandler;
   }(BaseProxyHandler);
 
-  var ObjectDotPrototype = Object.prototype;
-
   function defaultValueIsObservable(value) {
     // intentionally checking for null
     if (value === null) {
@@ -2019,64 +2039,54 @@
     /* do nothing */
   };
 
-  var defaultValueDistortion = function defaultValueDistortion(value) {
-    return value;
-  };
-
   function createShadowTarget(value) {
     return isArray(value) ? [] : {};
   }
 
-  var ReactiveMembrane = /*#__PURE__*/function () {
-    function ReactiveMembrane(options) {
-      _classCallCheck(this, ReactiveMembrane);
-
-      this.valueDistortion = defaultValueDistortion;
-      this.valueMutated = defaultValueMutated;
-      this.valueObserved = defaultValueObserved;
-      this.valueIsObservable = defaultValueIsObservable;
-      this.objectGraph = new WeakMap();
-
-      if (!isUndefined(options)) {
-        var _valueDistortion = options.valueDistortion,
-            _valueMutated = options.valueMutated,
-            _valueObserved = options.valueObserved,
-            valueIsObservable = options.valueIsObservable,
-            tagPropertyKey = options.tagPropertyKey;
-        this.valueDistortion = isFunction(_valueDistortion) ? _valueDistortion : defaultValueDistortion;
-        this.valueMutated = isFunction(_valueMutated) ? _valueMutated : defaultValueMutated;
-        this.valueObserved = isFunction(_valueObserved) ? _valueObserved : defaultValueObserved;
-        this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
-        this.tagPropertyKey = tagPropertyKey;
-      }
+  var ObservableMembrane = /*#__PURE__*/function () {
+    function ObservableMembrane() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      _classCallCheck(this, ObservableMembrane);
+
+      this.readOnlyObjectGraph = new WeakMap();
+      this.reactiveObjectGraph = new WeakMap();
+      var valueMutated = options.valueMutated,
+          valueObserved = options.valueObserved,
+          valueIsObservable = options.valueIsObservable,
+          tagPropertyKey = options.tagPropertyKey;
+      this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
+      this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
+      this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
+      this.tagPropertyKey = tagPropertyKey;
     }
 
-    _createClass(ReactiveMembrane, [{
+    _createClass(ObservableMembrane, [{
       key: "getProxy",
       value: function getProxy(value) {
         var unwrappedValue = unwrap$1(value);
-        var distorted = this.valueDistortion(unwrappedValue);
 
-        if (this.valueIsObservable(distorted)) {
-          var o = this.getReactiveState(unwrappedValue, distorted); // when trying to extract the writable version of a readonly
-          // we return the readonly.
+        if (this.valueIsObservable(unwrappedValue)) {
+          // When trying to extract the writable version of a readonly we return the readonly.
+          if (this.readOnlyObjectGraph.get(unwrappedValue) === value) {
+            return value;
+          }
 
-          return o.readOnly === value ? value : o.reactive;
+          return this.getReactiveHandler(unwrappedValue);
         }
 
-        return distorted;
+        return unwrappedValue;
       }
     }, {
       key: "getReadOnlyProxy",
       value: function getReadOnlyProxy(value) {
         value = unwrap$1(value);
-        var distorted = this.valueDistortion(value);
 
-        if (this.valueIsObservable(distorted)) {
-          return this.getReactiveState(value, distorted).readOnly;
+        if (this.valueIsObservable(value)) {
+          return this.getReadOnlyHandler(value);
         }
 
-        return distorted;
+        return value;
       }
     }, {
       key: "unwrapProxy",
@@ -2084,48 +2094,40 @@
         return unwrap$1(p);
       }
     }, {
-      key: "getReactiveState",
-      value: function getReactiveState(value, distortedValue) {
-        var objectGraph = this.objectGraph;
-        var reactiveState = objectGraph.get(distortedValue);
-
-        if (reactiveState) {
-          return reactiveState;
+      key: "getReactiveHandler",
+      value: function getReactiveHandler(value) {
+        var proxy = this.reactiveObjectGraph.get(value);
+
+        if (isUndefined(proxy)) {
+          // caching the proxy after the first time it is accessed
+          var handler = new ReactiveProxyHandler(this, value);
+          proxy = new Proxy(createShadowTarget(value), handler);
+          registerProxy(proxy, value);
+          this.reactiveObjectGraph.set(value, proxy);
         }
 
-        var membrane = this;
-        reactiveState = {
-          get reactive() {
-            var reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue); // caching the reactive proxy after the first time it is accessed
-
-            var proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
-            registerProxy(proxy, value);
-            ObjectDefineProperty(this, 'reactive', {
-              value: proxy
-            });
-            return proxy;
-          },
-
-          get readOnly() {
-            var readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue); // caching the readOnly proxy after the first time it is accessed
-
-            var proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
-            registerProxy(proxy, value);
-            ObjectDefineProperty(this, 'readOnly', {
-              value: proxy
-            });
-            return proxy;
-          }
+        return proxy;
+      }
+    }, {
+      key: "getReadOnlyHandler",
+      value: function getReadOnlyHandler(value) {
+        var proxy = this.readOnlyObjectGraph.get(value);
+
+        if (isUndefined(proxy)) {
+          // caching the proxy after the first time it is accessed
+          var handler = new ReadOnlyHandler(this, value);
+          proxy = new Proxy(createShadowTarget(value), handler);
+          registerProxy(proxy, value);
+          this.readOnlyObjectGraph.set(value, proxy);
+        }
 
-        };
-        objectGraph.set(distortedValue, reactiveState);
-        return reactiveState;
+        return proxy;
       }
     }]);
 
-    return ReactiveMembrane;
+    return ObservableMembrane;
   }();
-  /** version: 1.0.0 */
+  /** version: 2.0.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2136,15 +2138,9 @@
 
 
   var lockerLivePropertyKey = Symbol.for('@@lockerLiveValue');
-
-  function valueDistortion(value) {
-    return value;
-  }
-
-  var reactiveMembrane = new ReactiveMembrane({
+  var reactiveMembrane = new ObservableMembrane({
     valueObserved: valueObserved,
     valueMutated: valueMutated,
-    valueDistortion: valueDistortion,
     tagPropertyKey: lockerLivePropertyKey
   });
   /**
@@ -2153,16 +2149,9 @@
    * change or being removed.
    */
 
-  var unwrap = function unwrap(value) {
-    var unwrapped = reactiveMembrane.unwrapProxy(value);
-
-    if (unwrapped !== value) {
-      // if value is a proxy, unwrap to access original value and apply distortion
-      return valueDistortion(unwrapped);
-    }
-
-    return value;
-  };
+  function unwrap(value) {
+    return reactiveMembrane.unwrapProxy(value);
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -3014,7 +3003,7 @@
           return _super4.apply(this, arguments);
         }
 
-        return HTMLBridgeElement;
+        return _createClass(HTMLBridgeElement);
       }(SuperClass);
     } else {
       HTMLBridgeElement = function HTMLBridgeElement() {
@@ -3467,12 +3456,14 @@
   }
 
   function updateChildrenHook(oldVnode, vnode) {
-    var children = vnode.children,
-        owner = vnode.owner;
-    var fn = hasDynamicChildren(children) ? updateDynamicChildren : updateStaticChildren;
-    runWithBoundaryProtection(owner, owner.owner, noop, function () {
-      fn(vnode.elm, oldVnode.children, children);
-    }, noop);
+    var elm = vnode.elm,
+        children = vnode.children;
+
+    if (hasDynamicChildren(children)) {
+      updateDynamicChildren(elm, oldVnode.children, children);
+    } else {
+      updateStaticChildren(elm, oldVnode.children, children);
+    }
   }
 
   function allocateChildrenHook(vnode, vm) {
@@ -3660,7 +3651,7 @@
         return _this4;
       }
 
-      return LWCUpgradableElement;
+      return _createClass(LWCUpgradableElement);
     }(renderer.HTMLElement);
 
     renderer.defineCustomElement(tagName, CE);
@@ -4347,6 +4338,7 @@
 
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     var content = [];
+    var root;
 
     for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
       var stylesheet = stylesheets[_i16];
@@ -4354,22 +4346,45 @@
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
       } else {
-        // native shadow DOM. Synthetic shadow DOM never uses `:host`.
 
+        var isScopedCss = stylesheet[KEY__SCOPED_CSS]; // 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; // 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.
+        ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+        // we use an attribute selector on the host to simulate :dir().
 
-        var scopeToken = isScopedCss || vm.shadowMode === 1
-        /* Synthetic */
-        && vm.renderMode === 1
+        var useNativeDirPseudoclass = void 0;
+
+        if (vm.renderMode === 1
         /* Shadow */
-        ? stylesheetToken : undefined;
-        ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
+        ) {
+          useNativeDirPseudoclass = vm.shadowMode === 0
+          /* Native */
+          ;
+        } else {
+          // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+          // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+          if (isUndefined$1(root)) {
+            // Only calculate the root once as necessary
+            root = getNearestShadowComponent(vm);
+          }
+
+          useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
+          /* Native */
+          ;
+        }
+
+        ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
       }
     }
 
@@ -4391,14 +4406,12 @@
   // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 
 
-  function getNearestNativeShadowComponent(vm) {
+  function getNearestShadowComponent(vm) {
     var owner = vm;
 
     while (!isNull(owner)) {
       if (owner.renderMode === 1
       /* Shadow */
-      && owner.shadowMode === 0
-      /* Native */
       ) {
         return owner;
       }
@@ -4409,6 +4422,20 @@
     return owner;
   }
 
+  function getNearestNativeShadowComponent(vm) {
+    var owner = getNearestShadowComponent(vm);
+
+    if (!isNull(owner) && owner.shadowMode === 1
+    /* Synthetic */
+    ) {
+      // Synthetic-within-native is impossible. So if the nearest shadow component is
+      // synthetic, we know we won't find a native component if we go any further.
+      return null;
+    }
+
+    return owner;
+  }
+
   function createStylesheet(vm, stylesheets) {
     var renderer = vm.renderer,
         renderMode = vm.renderMode,
@@ -4476,7 +4503,7 @@
     if (isProfilerEnabled) {
       currentDispatcher(opId, 0
       /* Start */
-      , vm.tagName, vm.idx);
+      , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
 
@@ -4485,7 +4512,7 @@
     if (isProfilerEnabled) {
       currentDispatcher(opId, 1
       /* Stop */
-      , vm.tagName, vm.idx);
+      , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
 
@@ -4494,7 +4521,7 @@
     if (isProfilerEnabled) {
       currentDispatcher(opId, 0
       /* Start */
-      , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx);
+      , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx, vm === null || vm === void 0 ? void 0 : vm.renderMode, vm === null || vm === void 0 ? void 0 : vm.shadowMode);
     }
   }
 
@@ -4503,7 +4530,7 @@
     if (isProfilerEnabled) {
       currentDispatcher(opId, 1
       /* Stop */
-      , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx);
+      , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx, vm === null || vm === void 0 ? void 0 : vm.renderMode, vm === null || vm === void 0 ? void 0 : vm.shadowMode);
     }
   }
   /*
@@ -5542,7 +5569,7 @@
       return _this5;
     }
 
-    return WireContextRegistrationEvent;
+    return _createClass(WireContextRegistrationEvent);
   }( /*#__PURE__*/_wrapNativeSuper(CustomEvent));
 
   function createFieldDataCallback(vm, name) {
@@ -5876,7 +5903,7 @@
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.5.10-alpha1 */
+  /* version: 2.7.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5923,7 +5950,7 @@
           return _super7.apply(this, arguments);
         }
 
-        return clazz;
+        return _createClass(clazz);
       }(HTMLElementAlias);
 
       customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
@@ -6506,7 +6533,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.5.10-alpha1 */
+  /* version: 2.7.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -6537,4 +6564,4 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));