ts-req-selector

Selects only a portion of returned HTML to update a page fragment. Deals with only a single element, so is an equivalent of document.querySelector (it’s actually used for finding the element).

This can be a bit surprising at the start, but results in a much more controlled situation, given that [ts-swap-push][../ts-swap-push/] exists.

Modifier children can be used when you need to put more than one element in page.

Notes

• Uses regular CSS selector syntax
• Selects only single element
• children <selector> selects children of the first element matched by <selector>

Examples

Use only part of the response #

Server returns more HTML than we need - maybe a full template is rendered, maybe something else is going on - and we need to use just a part of it.

Multiple Children #

If you look how endless scrolling is implemented in HTML, it's usually a long list of elements inside some other element - so you have to deal with several elements being appended to a parent. For this and similar use cases there is a modifier children in ts-req-selector.

<p class="list2">
  <span class="chip">Element 1</span>
  <span class="chip">Element 2</span>
  <button class="btn"
          ts-req="/children"
          ts-req-selector="children .list"
          ts-target="sibling .chip:last-of-type"
          ts-swap="morph">Morph last</button>
</p>