DOM State

Dataset Status

A sync card stores status in dataset fields before CSS selectors and text updates show loading and ready states.

Program

The dataset API maps data-* attributes to JavaScript properties. It is useful for lightweight DOM state.

dataset_status.html
Visuals: captured from real browser rendering
<style>.card[data-state="ready"] { border-color: #16a34a; background: #f0fdf4; }</style>
<article class="card" data-state="idle">Idle</article>
<script>
  const card = document.querySelector(".card");
  card.dataset.state = "loading";
  card.textContent = "Loading";
  card.dataset.state = "ready";
  card.textContent = "Ready";
</script>

  1. Select the state card.

    The idle card is selected.
    The script needs a card reference before writing dataset fields.

  2. Set data-state to loading.

    The card keeps its text but has data-state=loading.
    dataset.state writes the data-state attribute.

  3. Update the loading text.

    The card text changes to Loading.
    Text and attributes can update independently.

  4. Set data-state to ready.

    The card turns green while the text still says Loading.
    CSS selectors can react to data-state immediately.

  5. Update the final ready text.

    The green card now reads Ready.
    The final text mutation aligns visible copy with state.
dataset dataset exposes data-* attributes as JavaScript properties.
attribute selector CSS can match state through selectors such as [data-state="ready"].