3.15
Search docs… /
Menu
Skill

up.fragment [up-keep]
HTML attribute

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

Basic example

A common use case is to keep 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 Keeping 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 keep 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 default), 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 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.