Updates this element when no other render target is given.
Example
Many links simply replace the main 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>
Instead of assigning [up-main] you may also configure an existing selector in up.fragment.config.mainTargets:
up.fragment.config.mainTargets.push('.layout--content')
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>
Instead of assigning [up-main] you may also 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].
