Edit this page

up.fragment [up-keep]
HTML selector

Elements with an [up-keep] attribute will be persisted when rendering.

Preserving elements

Basic example

A common use case is to preserve the playback state of media elements:

<article>
  <p>Content</p>
  <audio id="player" up-keep src="song.mp3"></audio>
</article>

When targeting the <article> fragment, the <audio> element and its playback state will be the same before and after the update. All other elements (like the <p>) will be updated with new content.

See Preserving elements for elaborate examples.

Limitations

  • The [up-keep] attribute is only supported for elements within the <body>.
  • If an <audio up-keep> or <video up-keep> element is a direct child of the <body>, it will lose its playback state during a fragment update. To preserve its playback state in all browsers, insert a container element between the <body> and the media element.

Modifying attributes

[up-keep='true']
optional

How long to keep the element.

When set to 'true' (the deferred), the element is kept as long as its derived target can be correlated in both the old and new content.

When set to 'same-html', the element is kept as long as its outer HTML does not change between versions. See Keeping an element until its HTML changes.

When set to 'same-data', the element is kept as long as its [data}(/data) does not change between versions. See Keeping an element until its data changes.

When set to 'false' the element is never kept. A new element with [up-keep="false"] will always replace an existing element, even if that existing element has [up-keep="true"]. See Forcing an update.

[up-on-keep]
optional

Code to run before an existing element is kept during a page update.

Calling event.preventDefault() will prevent the element from being kept. It will then be swapped with newFragment.

The code may use the variables event (of type up:fragment:keep), this (the old fragment), newFragment and newData.