Your target selectors may use this pseudo-selector
to replace the layer's topmost swappable element.
The topmost swappable element is the first child of the layer's container element:
- For the root layer it is the
<body> element.
- For an overlay it is the
{ target } that the overlay was opened with.
- If an overlay was opened with an explicit target, Unpoly will create a main element.
This main element becomes the topmost swappable target.
Use :layer to replace all visible elements of a layer. To only update a layer's main content area
while keeping static layout elements around it, see :main.
Example
We open an overlay with a target selector #target:
up.layer.open({ target: '#foo', content: 'Hello from overlay' })
The topmost swappable element is now #foo, which we can select with :layer:
// targets '#foo`'
up.render({ target: ':layer', url: '/page2' })
The resolution of :target depends on the targeted layer. For example, when rendering in
the root layer, :target will resolve to the <body>:
// targets the body
up.render({ target: ':layer', layer: 'root', url: '/page2' })
