Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure it has not already been reported

Version (i.e. v2.x.x)

1.0.1

Node.js version (i.e. 18.x, or N/A)

N/A

Operating system

N/A

Operating system version (i.e. 20.04, 11.3, 10, or N/A)

N/A

Description

Given an anchor with a child web-component, like so:

<a href="whatever.com">
  <web-component></web-component>
</a>

where the web-component has some clickable content, e.g.

class WebComponent extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    const imageEl = document.createElement("img");
    const imageEl.setAttribute("src", "https://www.w3schools.com/images/w3schools_green.jpg");
    shadow.appendChild(imageEl);
  }
}
customElements.define("web-component", WebComponent);

Clicking on the element in the shadow-dom (in this case the imageEl) does not ultimately trigger a navigate event.

The issue stems from the fact that the matchesAncestor function (src) only searches ancestors up to the boundary of the shadow-root—and does not look for matching elements in the light dom.

Steps to Reproduce

1. Create a web-component that has some clickable content
2. Make that web-component a child of an anchor with href attribute
3. Click on the web-component
4. Observe that no "navigate" element is dispatched

Expected Behavior

Clicking on the content inside of the web-component should still trigger a navigate event if it is a child of an anchor—even if the anchor is a light-dom ancestor.