ref Element

[DrSensor]

/// module.ts -> module.js
export default class {
  readonly static many = [] as readonly HTMLElement[] // several elements across <render-scope>
  accessor button: HTMLElementButton
  accessor host: HTMLElement
}

<render-scope>
  <link href=module.js>

  <button :="button ^many" />
  <label :=^many />
</render-scope>

<render-scope :=host>
  <link href=module.js>

  <span :=^many />
</render-scope>

The rule is simple. Any attribute name that equal to colon : are reference to that Element. You can also bind one attribute to many properties

It also possible to use it as custom directive alike by passing a method instead of undefined property or array.

/// module.ts -> module.js
import { current } from "nusa/std"

export default class {
  get host(): HTMLElement { // it's also possible to use plain getter/setter
    console.debug("🤗")
    return current.element!
  }
  button() {
    const btn: HTMLElementButton = current.element!
    console.debug(this.host, btn)
  }
}

<render-scope :=host>
  <link href=module.js>

  <button :=button />
</render-scope>