HTML Attributes

Rivet connects to the DOM exclusively through three data- attributes.

Attribute	Purpose
`data-rivet`	Marks the root of a component and names its type
`data-rivet-part`	Marks a named element or `<template>` inside
`data-rivet-id`	Assigns an ID through which the public API is retrievable

data-rivet

Marks the root element and names the component. The value must match the name registered with app.component(name, …).

<div data-rivet="disclosure">…</div>

On mount() all [data-rivet] elements are found. If no registered component matches the name, the element is skipped.

data-rivet-part

Marks child elements the component can address via part(name) / parts(name). For <template> elements it is also the anchor for template(name).

<div data-rivet="disclosure">
  <button data-rivet-part="button">Toggle</button>
  <div data-rivet-part="panel">Content</div>
</div>

part("button") → exactly one element (throws if absent)
parts("item") → all matching elements as an array
template("item") → factory for <template data-rivet-part="item">

Part names are guarded with CSS.escape when querying — special characters are not a problem.

data-rivet-id

Assigns a unique ID. Only components with an ID expose their returned API via app.get(id) / app.require(id).

<div data-rivet="disclosure" data-rivet-id="main-menu">…</div>

app.require("main-menu").hide();

Components without an ID still work — their behaviour runs, only their API is not reachable from the outside.

Complete example

<div data-rivet="toast" data-rivet-id="toaster">
  <template data-rivet-part="item">
    <div class="toast" role="status">
      <span data-rivet-part="message"></span>
      <button type="button">Close</button>
    </div>
  </template>
</div>