:layer

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' })