@lwc/synthetic-shadow 2.5.11 → 2.6.3

package/dist/synthetic-shadow.js

@@ -194,7 +194,7 @@ const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
 
 
 const hasNativeSymbolSupport = /*@__PURE__*/(() => Symbol('x').toString() === 'Symbol(x)')();
-/** version: 2.5.11 */
+/** version: 2.6.3 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -301,6 +301,7 @@ const {
   getElementsByClassName: getElementsByClassName$1
 } = HTMLElement.prototype;
 const shadowRootGetter = hasOwnProperty.call(Element.prototype, 'shadowRoot') ? getOwnPropertyDescriptor(Element.prototype, 'shadowRoot').get : () => null;
+const assignedSlotGetter$1 = hasOwnProperty.call(Element.prototype, 'assignedSlot') ? getOwnPropertyDescriptor(Element.prototype, 'assignedSlot').get : () => null;
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -515,19 +516,6 @@ function arrayFromCollection(collection) {
   return cloned;
 }
 
-/**
- * Copyright (C) 2018 salesforce.com, inc.
- */
-
-if (!_globalThis.lwcRuntimeFlags) {
-  Object.defineProperty(_globalThis, 'lwcRuntimeFlags', {
-    value: create(null)
-  });
-}
-
-const runtimeFlags = _globalThis.lwcRuntimeFlags;
-/** version: 2.5.11 */
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -587,19 +575,9 @@ function getEventListenerWrapper(fnOrObj) {
         assert.invariant(isFalse(isSyntheticShadowHost(currentTarget)), 'This routine should not be used to wrap event listeners for host elements and shadow roots.');
       }
 
-      const {
-        composed
-      } = event;
-      let shouldInvoke;
-
-      if (runtimeFlags.ENABLE_NON_COMPOSED_EVENTS_LEAKAGE) {
-        shouldInvoke = !(eventToShadowRootMap.has(event) && isFalse(composed));
-      } else {
-        const actualTarget = getActualTarget(event);
-        shouldInvoke = shouldInvokeListener(event, actualTarget, currentTarget);
-      }
+      const actualTarget = getActualTarget(event);
 
-      if (!shouldInvoke) {
+      if (!shouldInvokeListener(event, actualTarget, currentTarget)) {
         return;
       }
 
@@ -619,25 +597,6 @@ function getEventListenerWrapper(fnOrObj) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const eventToContextMap = new WeakMap();
-
-function isChildNode(root, node) {
-  return !!(compareDocumentPosition.call(root, node) & DOCUMENT_POSITION_CONTAINED_BY);
-}
-
-const GET_ROOT_NODE_CONFIG_FALSE = {
-  composed: false
-};
-
-function getRootNodeHost(node, options) {
-  let rootNode = node.getRootNode(options);
-
-  if (isSyntheticShadowRoot(rootNode)) {
-    rootNode = getHost(rootNode);
-  }
-
-  return rootNode;
-}
-
 const customElementToWrappedListeners = new WeakMap();
 
 function getEventMap(elm) {
@@ -681,16 +640,9 @@ function getWrappedShadowRootListener(listener) {
         currentTarget = getShadowRoot(currentTarget);
       }
 
-      let shouldInvoke;
+      const actualTarget = getActualTarget(event);
 
-      if (runtimeFlags.ENABLE_NON_COMPOSED_EVENTS_LEAKAGE) {
-        shouldInvoke = shouldInvokeShadowRootListener(event);
-      } else {
-        const actualTarget = getActualTarget(event);
-        shouldInvoke = shouldInvokeListener(event, actualTarget, currentTarget);
-      }
-
-      if (shouldInvoke) {
+      if (shouldInvokeListener(event, actualTarget, currentTarget)) {
         listener.call(currentTarget, event);
       }
     };
@@ -717,16 +669,9 @@ function getWrappedCustomElementListener(listener) {
     customElementWrappedListener = function (event) {
       // currentTarget is always defined inside an event listener
       const currentTarget = eventCurrentTargetGetter.call(event);
-      let shouldInvoke;
+      const actualTarget = getActualTarget(event);
 
-      if (runtimeFlags.ENABLE_NON_COMPOSED_EVENTS_LEAKAGE) {
-        shouldInvoke = shouldInvokeCustomElementListener(event);
-      } else {
-        const actualTarget = getActualTarget(event);
-        shouldInvoke = shouldInvokeListener(event, actualTarget, currentTarget);
-      }
-
-      if (shouldInvoke) {
+      if (shouldInvokeListener(event, actualTarget, currentTarget)) {
         listener.call(currentTarget, event);
       }
     };
@@ -847,70 +792,6 @@ function detachDOMListener(elm, type, wrappedListener) {
   }
 }
 
-function shouldInvokeCustomElementListener(event) {
-  const {
-    composed
-  } = event;
-
-  if (isTrue(composed)) {
-    // Listeners on host elements should always be invoked for {composed: true} events.
-    return true;
-  } // If this {composed: false} event was dispatched on any root.
-
-
-  if (eventToShadowRootMap.has(event)) {
-    return false;
-  }
-
-  const target = eventTargetGetter.call(event);
-  const currentTarget = eventCurrentTargetGetter.call(event); // If this {composed: false} event was dispatched on the current target host.
-
-  if (target === currentTarget) {
-    return true;
-  } // At this point the event must be {bubbles: true, composed: false} and was dispatched from a
-  // shadow-excluding descendant node. In this case, we only invoke the listener if the target
-  // host was assigned to a slot in the composed subtree of the current target host.
-
-
-  const targetHost = getRootNodeHost(target, GET_ROOT_NODE_CONFIG_FALSE);
-  const currentTargetHost = currentTarget;
-  return isChildNode(targetHost, currentTargetHost);
-}
-
-function shouldInvokeShadowRootListener(event) {
-  const {
-    composed
-  } = event;
-  const target = eventTargetGetter.call(event);
-  const currentTarget = eventCurrentTargetGetter.call(event); // If the event was dispatched on the host or its root.
-
-  if (target === currentTarget) {
-    // Invoke the listener if the event was dispatched directly on the root.
-    return eventToShadowRootMap.get(event) === getShadowRoot(target);
-  } // At this point the event is {bubbles: true} and was dispatched from a shadow-including descendant node.
-
-
-  if (isTrue(composed)) {
-    // Invoke the listener if the event is {composed: true}.
-    return true;
-  } // At this point the event must be {bubbles: true, composed: false}.
-
-
-  if (isTrue(eventToShadowRootMap.has(event))) {
-    // Don't invoke the listener because the event was dispatched on a descendant root.
-    return false;
-  }
-
-  const targetHost = getRootNodeHost(target, GET_ROOT_NODE_CONFIG_FALSE);
-  const currentTargetHost = currentTarget;
-  const isCurrentTargetSlotted = isChildNode(targetHost, currentTargetHost); // At this point the event must be {bubbles: true, composed: false} and was dispatched from a
-  // shadow-excluding descendant node. In this case, we only invoke the listener if the target
-  // host was assigned to a slot in the composed subtree of the current target host, or the
-  // descendant node is in the shadow tree of the current root.
-
-  return isCurrentTargetSlotted || targetHost === currentTargetHost;
-}
-
 function addCustomElementEventListener(type, listener, _options) {
   if (process.env.NODE_ENV !== 'production') {
     if (!isFunction(listener)) {
@@ -1019,6 +900,14 @@ function getNodeKey(node) {
 function isNodeShadowed(node) {
   return !isUndefined(getNodeOwnerKey(node));
 }
+/**
+ * Returns true if this node is a shadow host, is in a shadow host, or contains a shadow host
+ * anywhere in its tree.
+ */
+
+function isNodeOrDescendantsShadowed(node) {
+  return isNodeShadowed(node) || isSyntheticShadowHost(node) || containsHost(node);
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -1632,6 +1521,19 @@ function getOuterHTML(node) {
   }
 }
 
+/**
+ * Copyright (C) 2018 salesforce.com, inc.
+ */
+
+if (!_globalThis.lwcRuntimeFlags) {
+  Object.defineProperty(_globalThis, 'lwcRuntimeFlags', {
+    value: create(null)
+  });
+}
+
+const runtimeFlags = _globalThis.lwcRuntimeFlags;
+/** version: 2.6.3 */
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1723,7 +1625,9 @@ function parentElementGetterPatched() {
 }
 
 function compareDocumentPositionPatched(otherNode) {
-  if (this.getRootNode() === otherNode) {
+  if (this === otherNode) {
+    return 0;
+  } else if (this.getRootNode() === otherNode) {
     // "this" is in a shadow tree where the shadow root is the "otherNode".
     return 10; // Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING
   } else if (getNodeOwnerKey(this) !== getNodeOwnerKey(otherNode)) {
@@ -1769,7 +1673,7 @@ function cloneNodePatched(deep) {
 function childNodesGetterPatched() {
   if (isSyntheticShadowHost(this)) {
     const owner = getNodeOwner(this);
-    const childNodes = isNull(owner) ? [] : getAllMatches(owner, getFilteredChildNodes(this));
+    const childNodes = isNull(owner) ? getFilteredChildNodes(this) : getAllMatches(owner, getFilteredChildNodes(this));
 
     if (process.env.NODE_ENV !== 'production' && isFalse(hasNativeSymbolSupport) && isExternalChildNodeAccessorFlagOn()) {
       // inserting a comment node as the first childNode to trick the IE11
@@ -1880,7 +1784,8 @@ defineProperties(_Node.prototype, {
   textContent: {
     get() {
       if (!runtimeFlags.ENABLE_NODE_PATCH) {
-        if (isNodeShadowed(this) || isSyntheticShadowHost(this)) {
+        // See note on get innerHTML in faux-shadow/element.ts
+        if (isNodeOrDescendantsShadowed(this)) {
           return textContentGetterPatched.call(this);
         }
 
@@ -2114,7 +2019,22 @@ function getAllRootNodes(node) {
   }
 
   return rootNodes;
-}
+} // Keep searching up the host tree until we find an element that is within the immediate shadow root
+
+
+const findAncestorHostInImmediateShadowRoot = (rootNode, targetRootNode) => {
+  let host;
+
+  while (!isUndefined(host = rootNode.host)) {
+    const thisRootNode = host.getRootNode();
+
+    if (thisRootNode === targetRootNode) {
+      return host;
+    }
+
+    rootNode = thisRootNode;
+  }
+};
 
 function fauxElementsFromPoint(context, doc, left, top) {
   const elements = elementsFromPoint.call(doc, left, top);
@@ -2128,8 +2048,28 @@ function fauxElementsFromPoint(context, doc, left, top) {
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
 
-      if (rootNodes.indexOf(element.getRootNode()) !== -1 && !isSyntheticSlotElement(element)) {
-        result.push(element);
+      if (isSyntheticSlotElement(element)) {
+        continue;
+      }
+
+      const elementRootNode = element.getRootNode();
+
+      if (ArrayIndexOf.call(rootNodes, elementRootNode) !== -1) {
+        ArrayPush.call(result, element);
+        continue;
+      } // In cases where the host element is not visible but its shadow descendants are, then
+      // we may get the shadow descendant instead of the host element here. (The
+      // browser doesn't know the difference in synthetic shadow DOM.)
+      // In native shadow DOM, however, elementsFromPoint would return the host but not
+      // the child. So we need to detect if this shadow element's host is accessible from
+      // the context's shadow root. Note we also need to be careful not to add the host
+      // multiple times.
+
+
+      const ancestorHost = findAncestorHostInImmediateShadowRoot(elementRootNode, rootNodes[0]);
+
+      if (!isUndefined(ancestorHost) && ArrayIndexOf.call(elements, ancestorHost) === -1 && ArrayIndexOf.call(result, ancestorHost) === -1) {
+        ArrayPush.call(result, ancestorHost);
       }
     }
   }
@@ -2203,6 +2143,28 @@ function isSyntheticShadowHost(node) {
 function isSyntheticShadowRoot(node) {
   const shadowRootRecord = InternalSlot.get(node);
   return !isUndefined(shadowRootRecord) && node === shadowRootRecord.shadowRoot;
+} // Return true if any descendant is a host element
+
+function containsHost(node) {
+  // IE11 complains with "Unexpected call to method or property access." when calling walker.nextNode().
+  // The fix for this is to only walk trees for nodes that are Node.ELEMENT_NODE.
+  if (node.nodeType !== _Node.ELEMENT_NODE) {
+    return false;
+  } // IE requires all four arguments, even though the fourth is deprecated
+  // https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker#browser_compatibility
+  // @ts-ignore
+
+
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, null, false);
+  let descendant;
+
+  while (!isNull(descendant = walker.nextNode())) {
+    if (isSyntheticShadowHost(descendant)) {
+      return true;
+    }
+  }
+
+  return false;
 }
 let uid = 0;
 function attachShadow(elm, options) {
@@ -2250,6 +2212,12 @@ const SyntheticShadowRootDescriptors = {
       return `[object ShadowRoot]`;
     }
 
+  },
+  synthetic: {
+    writable: false,
+    enumerable: false,
+    configurable: false,
+    value: true
   }
 };
 const ShadowRootDescriptors = {
@@ -4078,6 +4046,14 @@ retargetRelatedTarget(FocusEvent);
  */
 retargetRelatedTarget(MouseEvent);
 
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const assignedSlotGetter = hasOwnProperty.call(Text.prototype, 'assignedSlot') ? getOwnPropertyDescriptor(Text.prototype, 'assignedSlot').get : () => null;
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -4131,10 +4107,22 @@ function getFilteredSlotFlattenNodes(slot) {
 }
 
 function assignedSlotGetterPatched() {
-  const parentNode = parentNodeGetter.call(this);
+  const parentNode = parentNodeGetter.call(this); // use original assignedSlot if parent has a native shdow root
+
+  if (parentNode instanceof Element) {
+    const sr = shadowRootGetter.call(parentNode);
+
+    if (isInstanceOfNativeShadowRoot(sr)) {
+      if (this instanceof Text) {
+        return assignedSlotGetter.call(this);
+      }
+
+      return assignedSlotGetter$1.call(this);
+    }
+  }
   /**
    * The node is assigned to a slot if:
-   *  - it has a parent and it parent its parent is a slot element
+   *  - it has a parent and its parent is a slot element
    *  - and if the slot owner key is different than the node owner key.
    *
    * When the slot and the slotted node are 2 different shadow trees, the owner keys will be
@@ -4143,6 +4131,7 @@ function assignedSlotGetterPatched() {
    * different than the node owner key (always `undefined`).
    */
 
+
   if (!isNull(parentNode) && isSlotElement(parentNode) && getNodeOwnerKey(parentNode) !== getNodeOwnerKey(this)) {
     return parentNode;
   }
@@ -4359,7 +4348,10 @@ defineProperties(Element.prototype, {
   innerHTML: {
     get() {
       if (!runtimeFlags.ENABLE_ELEMENT_PATCH) {
-        if (isNodeShadowed(this) || isSyntheticShadowHost(this)) {
+        // If this element is in synthetic shadow, if it's a synthetic shadow host,
+        // or if any of its descendants are synthetic shadow hosts, then we can't
+        // use the native innerHTML because it would expose private node internals.
+        if (isNodeOrDescendantsShadowed(this)) {
           return innerHTMLGetterPatched.call(this);
         }
 
@@ -4384,7 +4376,8 @@ defineProperties(Element.prototype, {
   outerHTML: {
     get() {
       if (!runtimeFlags.ENABLE_ELEMENT_PATCH) {
-        if (isNodeShadowed(this) || isSyntheticShadowHost(this)) {
+        // See notes above on get innerHTML
+        if (isNodeOrDescendantsShadowed(this)) {
           return outerHTMLGetterPatched.call(this);
         }
 
@@ -5757,4 +5750,4 @@ defineProperty(Element.prototype, '$domManual$', {
 
   configurable: true
 });
-/** version: 2.5.11 */
+/** version: 2.6.3 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/synthetic-shadow",
-    "version": "2.5.11",
+    "version": "2.6.3",
     "description": "Synthetic Shadow Root for LWC",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -36,8 +36,8 @@
         "access": "public"
     },
     "devDependencies": {
-        "@lwc/features": "2.5.11",
-        "@lwc/shared": "2.5.11"
+        "@lwc/features": "2.6.3",
+        "@lwc/shared": "2.6.3"
     },
-    "gitHead": "2e72bcacbf105ef92277372bb4e52f8280d7fa72"
+    "gitHead": "1fdd835243eed190b8ab9ca61ae7eae9f9a4073d"
 }