Marks this element as the dominant content element of your application layout.
Unpoly will update a main element when no more specific render target is given.
Example
Many links simply replace the dominant content element in your application layout.
Unpoly lets you mark this elements as a default target using the [up-main] attribute:
<body>
<div class="layout">
<div class="layout--side">
...
</div>
<div class="layout--content" up-main>
...
</div>
</div>
</body>
Once a main target is configured, you no longer need [up-target] in a link.
Use [up-follow] and the [up-main] element will be replaced:
<a href="/foo" up-follow>...</a>
If you want to update something more specific, you can still use [up-target]:
<a href="/foo" up-target=".profile">...</a>
Overlays can use different main targets
Overlays often use a different default selector, e.g. to exclude a navigation bar.
To define a different main target for an overlay, set the layer mode as the
value of the [up-main] attribute:
<body>
<div class="layout" up-main="root">
<div class="layout--side">
...
</div>
<div class="layout--content" up-main="modal">
...
</div>
</div>
</body>
Using existing elements as main targets
Instead of the [up-main] attribute you may also use the standard <main> element.
You may also configure an existing selector in up.fragment.config.mainTargets:
up.fragment.config.mainTargets.push('.layout--content')
You may configure layer-specific targets in up.layer.config:
up.layer.config.popup.mainTargets.push('.menu') // for popup overlays
up.layer.config.drawer.mainTargets.push('.menu') // for drawer overlays
up.layer.config.overlay.mainTargets.push('.layout--content') // for all overlay modes
A space-separated list of layer modes for which to use this main target.
Omit the attribute value to define a main target for all layer modes.
To use a different main target for all overlays (but not the root layer), set [up-main=overlay].
