up.reload does not seem to respect mainTarget for layers

[foobear]

Bug description

When reloading the current (non-root) layer, and when when the response contains another element with the same class as the <main> element before <main> in the DOM, that element will be rendered instead of the main target.

Reproduction project

https://glitch.com/edit/#!/noon-funky-rhodium

Steps to reproduce the behavior:

1. Go to reproduction project linked above
2. Click on "open layer"
3. Click on "reload layer" inside the new layer
4. See that the layer's contents were replaced with the other element.

Expected behavior

The <main> element inside the layer should have been replaced with the <main> element from the reload response.

Browser version

• OS: Linux
• Browser Chrome
• Version 96

Additional context

• Adding a distinct up-id to the <main> element resolves the issue.

[triskweline]

This is really a limitation of the :layer pseudo-selector. It takes the topmost swappable element in your overlay and derives a selector from it. Since we're preferring class names before tag names, the derived selector is .foo instead of main.

Things you could do instead:

• up.reload('main') if you want to explicitly reload the <main> element.
• up.reload(':main') to reload whatever is configured as main target in this layer. This is the same as up.reload().
• Tell Unpoly to ignore the .foo class when deriving a selector: up.fragment.config.badTargetClasses.push('foo')

[foobear]

Thanks for clarifying; I assumed that was what's going on.

I had overlooked the possibility of not specifying a target for up.reload or just using :main. That is exactly what I need in my case.

However, I'm wondering if reloading :layer should try and prefer main targets if possible (i.e. compare if the element matches a configured main target first), and only fall back to deriving selectors when that layer was not populated using a main target.

If you don't feel that makes sense, feel free to close the issue. 👍

[triskweline]

In Unpoly 3+ a <main> element will derive to the selector main, regardless of any class names set on the element.