Skip to content

Fix link click interception in shadow roots #27587

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.

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

Merged

Conversation

SteveSandersonMS
Copy link
Member

@SteveSandersonMS SteveSandersonMS commented Nov 6, 2020

This is a fix for #27070, which we should consider for a patch.

Description

HTML <a> elements within shadow roots are invisible to the link click interception code. So when an end user clicks on a link that's inside the shadow root of a custom element, it triggers a full page load instead of a client-side navigation.

Customer Impact

Reported by a customer at #27070. There's no reasonable workaround (besides not using custom elements and shadow DOM).

The impact is that if you're using a library of custom HTML elements, which typically use ShadowDOM to render, then if you use them to produce any links, then those links will seem broken to the end user (as in, they trigger a full-page reload, destroying any app state in WebAssembly memory or discarding the Blazor Server circuit).

Regression?

No, this has always been the case. However, the use of custom elements and ShadowDOM is a growing area, especially as we try to guide customers to use custom elements like the FAST components.

The fact that this use case is growing in importance makes it relevant to consider patching rather than waiting a full year for 6.0.

We don't have to ship this in 5.0.1, but we should be prepared to ship it in a patch reasonably soon.

Risk

This changes the logic for processing clicks on all links, not just the ones in shadow roots. Although I'm not aware of any cases where the new logic might fail, and all our E2E tests pass, maybe I missed some case. It's unfortunate we don't have any opportunity to put this in front of customers any any preview form.

One possible mitigation would be putting this in master right away, and waiting until 5.0.2 (or later) to ship it as a patch, just in case anybody discovers problems in a 6.0 preview.

@ghost ghost added the area-blazor Includes: Blazor, Razor Components label Nov 6, 2020
@SteveSandersonMS SteveSandersonMS requested a review from a team November 6, 2020 18:00
// Since we're adding use of composedPath in a patch, retain compatibility with any
// legacy browsers that don't support it by falling back on the older logic, even
// though it won't work properly with ShadowDOM. This can be removed in the next
// major release.
Copy link
Member Author

@SteveSandersonMS SteveSandersonMS Nov 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK there aren't any supported browsers that don't support Event.composedPath.

The only reason I'm keeping the older logic as fallback is in case someone has somehow polyfilled enough to make Blazor Server 5.0 run on IE11/legacy-Edge, in which case we don't want this patch to create the need to add yet another polyfill. I doubt anyone is in that situation, but this is being super-cautious because patch.

@SteveSandersonMS SteveSandersonMS force-pushed the stevesa/fix-link-click-interception-in-shadow-roots branch 2 times, most recently from 2ca2197 to 519c564 Compare November 9, 2020 13:10
@SteveSandersonMS SteveSandersonMS marked this pull request as ready for review November 9, 2020 13:12
@mkArtakMSFT mkArtakMSFT added the Servicing-consider Shiproom approval is required for the issue label Nov 11, 2020
@ghost
Copy link

ghost commented Nov 11, 2020

Hello human! Please make sure you've included the Shiproom Template in a comment or (preferably) the PR description. Also, make sure this PR is not marked as a draft and is ready-to-merge.

@mkArtakMSFT mkArtakMSFT added this to the 5.0.1 milestone Nov 11, 2020
Copy link
Member

@captainsafia captainsafia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@leecow leecow added Servicing-approved Shiproom has approved the issue and removed Servicing-consider Shiproom approval is required for the issue labels Nov 12, 2020
@mkArtakMSFT
Copy link
Contributor

@SteveSandersonMS let me know if you want me to merge this (in case you don't have permissions to do so).

@SteveSandersonMS
Copy link
Member Author

SteveSandersonMS commented Nov 13, 2020

@mkArtakMSFT Would it work OK if we chose not to merge this for 5.0.1, but instead hold it back until a later patch?

Update: we discussed and decided it's better to merge now.

@SteveSandersonMS SteveSandersonMS force-pushed the stevesa/fix-link-click-interception-in-shadow-roots branch from 519c564 to 04b9940 Compare November 13, 2020 19:12
@mkArtakMSFT mkArtakMSFT merged commit fc1ebaa into release/5.0 Nov 13, 2020
@mkArtakMSFT mkArtakMSFT deleted the stevesa/fix-link-click-interception-in-shadow-roots branch November 13, 2020 20:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-blazor Includes: Blazor, Razor Components Servicing-approved Shiproom has approved the issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Blazor <a href> link in ShadowDOM causes page reload, correct way to redirect from href="javascript:"?
4 participants