up.fragment
:layer
Target selector
Your target selectors may use this pseudo-selector to replace the layer's topmost swappable element.
What is targeted
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 without an explicit target, Unpoly will create a main fragment. This main fragment becomes the topmost swappable target.
Use :layer to replace all visible elements of a layer. To only update a layer's main fragment
while keeping static layout elements around it, see :main.
Example
We open an overlay with a target selector #foo:
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 :layer depends on the targeted layer. For example, when rendering in
the root layer, :layer will resolve to the <body>:
// targets the body
up.render({ target: ':layer', layer: 'root', url: '/page2' })