Dataset Status - JavaScript Client

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

<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>

dataset dataset exposes data-* attributes as JavaScript properties.

attribute selector CSS can match state through selectors such as [data-state="ready"].