Skip to content

Traverse shadowRoots when binding links #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
markcellus opened this issue Nov 10, 2018 · 5 comments
Closed

Traverse shadowRoots when binding links #10

markcellus opened this issue Nov 10, 2018 · 5 comments

Comments

@markcellus
Copy link
Owner

markcellus commented Nov 10, 2018 •
edited
Loading

When hitting a route, the current implementation binds relative links to prevent full page reloads, but does not do this for links that are nested within shadowRoot of route elements.

Unfortunately, there is currently no way to easily traverse all shadow roots within a route element. But there are discussions about adding this functionality to the spec. In the meantime it may make sense for us to just do this manually.
@ernsheong
Copy link

pwa-helpers does it by listening to clicks in the body

https://github.com/Polymer/pwa-helpers/blob/master/src/router.ts#L47

Does this circumvent the need to traverse and bind?

@markcellus
Copy link
Owner Author

markcellus commented Nov 17, 2018 •
edited
Loading

Oh sure! I didn't realize that clicks registered on the <body> element still fire when <a> elements are nested inside of shadow DOM. I see that it also even works if the propagation is stopped beforehand.

I don't believe this works for all elements though, which kind of surprises me. Do you know if this is clearly defined in the spec somewhere? I just wanna make sure that all browsers adhere to this same behavior.

@markcellus
Copy link
Owner Author

markcellus commented Nov 18, 2018 •
edited
Loading

After looking at this a little more closely, it looks like, anytime any <a> is clicked, they are looping through all of the elements in the compose path to find the clicked <a> element, which isn't very good for performance 😞 . Also, looks like composed paths don't work for clicks inside of closed shadow DOMs. Their method is a great temporary solution, but may be best to avoid using composed paths and only set listeners where necessary.

@markcellus
Copy link
Owner Author

markcellus commented Jul 29, 2019 •
edited
Loading

We can possibly use the query-selector-shadow-dom package that can pierce nested Shadow DOM roots to find elements.

@markcellus
Copy link
Owner Author

The original issue has been fixed in 0393f44 and has since been available in version 0.4.0 of the package. Closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ernsheong @markcellus