up.fragment [up-id]

HTML attribute

Sets a unique identifier for this element.

This identifier is used in target derivation to create a CSS selector that matches this element precisely. If the element already has other attributes that make a good identifier, like a good [id] or [class] attribute, it is not necessary to also set [up-id].

Example

Take this element:

<section>
  <h2>Latest news</h2>
</section>

Unpoly cannot generate a good CSS selector for this element:

up.fragment.toTarget(element)
// throws error: up.CannotTarget

We can improve this by assigning an [up-id]:

<section up-id="latest-news">
  <h2>Latest news</h2>
</section>

The attribute value is used to create a better selector:

up.fragment.toTarget(element)
// returns '[up-id="latest-news"]'