data-ref

Store the element itself in a signal, so other expressions can call its methods or read its properties.

Syntax

data-ref:dialog
data-ref="dialog"

part
key	or value: the signal path
value	or key

Modifiers

modifier	effect
`__case.kebab`	keep the key kebab-cased

Call a method on another element

focus and select

<div class="row">
  <input data-ref:field value="select me">
  <button data-on:click="$field.focus(); $field.select()">Focus and select</button>
</div>

Native dialogs

<dialog> gives you a modal with focus trapping and an inert page for free; data-ref is how the buttons reach it.

showModal()

<div>
  <button data-on:click="$dlg.showModal()">Open dialog</button>
  <dialog data-ref:dlg style="border:1px solid var(--sl-color-hairline);border-radius:.5rem;padding:1rem"><p>Tab cycles inside; Escape closes.</p><button data-on:click="$dlg.close()">Close</button></dialog>
</div>

Read properties reactively

The signal holds the element, not its state; read live values inside an event or effect, not as a dependency.

scroll position

scroll me

scrollTop =

<div data-signals="{ pos: 0 }">
  <div data-ref:pane data-on:scroll="$pos = Math.round($pane.scrollTop)" style="height:4rem;overflow:auto;border:1px solid var(--sl-color-hairline)"><div style="height:16rem;padding:.5rem">scroll me</div></div>
  <p>scrollTop = <b data-text="$pos"></b></p>
</div>

Notes

The signal is removed when the element leaves the document. Refs are stored in the same store as everything else, so keep them out of server requests with a _ prefix (data-ref:_dialog) or a filter.

Register

import { ref } from 'sigmx/plugins'

Registering ref adds 155 bytes brotli (171 gzip, 361 minified) on top of the core. See bundle sizes.