[Blazor] Prevent unwanted DOM merging during enhanced page updates

[MackinnonBuck]

There might be times when an enhanced page update results in DOM elements getting merged/recycled in an undesirable manner. This is fine in many cases but can sometimes cause strange side effects (e.g., weird CSS animations playing on merged elements).

We should consider introducing a data-key attribute that can be used to manually indicate that a DOM element can only be merged with another element with a matching data-key attribute.

A current workaround is to wrap content in an element with a unique tag name to prevent it from getting merged. This could be an unresolved custom element tag name, e.g., <pricing-grid>.

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[SteveSandersonMS]

I had an issue with this yesterday:

• One page 1, I had an <input> element that was upgraded with special behaviors - an external JS library atteched JS event handlers that do stuff
• On page 2, I had a completely unrelated <input>
• When navigating from page 1 to page 2, I found the input on page 2 to have to special behaviors from page 1, even though they made no sense on page 2.
• I worked around it by putting data-permanent="something" on one of the <input> elements and not the other

Possible simplified solution

If the most common case with this issue (and with issue https://github.com/dotnet/aspnetcore/issues/54263) is when navigating from one page to another, we could solve it in a more automatic way by making the client-side DOM merging logic aware of the <Router> component, for example by having <Router> emit some boundary marker around its output and including a hash of the page type name. Then the client-side DOM merging logic could avoid recursing into the page content when the page type changes, while still retaining elements/components in the layout around it.