virtualstate / navigation

Native JavaScript navigation [web api] implementation
MIT License
77 stars 5 forks source link

Shadow-dom descendents of light-dom anchors do not trigger navigate events #29

Closed iandeboisblanc closed 4 months ago

iandeboisblanc commented 4 months ago

Prerequisites

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.

fabiancook commented 4 months ago

This should now be fixed with version 1.0.1-alpha.202 as per the associated PR.

https://github.com/virtualstate/navigation/actions/runs/8653498819/job/23728780215#step:12:353