Attributes & Data — Passing Configuration

The data-* contract

DevinimJS components read their configuration from this.dataset. The HTML (or PHP template) provides values:

<dv-counter
  data-start="10"
  data-step="5"
  data-label="Quantity"
  data-disabled="false"
></dv-counter>

Four attribute helpers

str() — string values

initialState() {
  return {
    label: this.str('label', 'Submit'),
    placeholder: this.str('placeholder', 'Enter value...'),
  };
}

num() — numeric values

Returns a finite number. Non-numeric values fall back to the default:

initialState() {
  return {
    min: this.num('min', 0),
    max: this.num('max', 100),
    step: this.num('step', 1),
  };
}
// data-min="0" data-max="100" data-step="5"
// If data-step is missing or "abc", returns 1 (the fallback)

bool() — boolean values

Understands 'false' and '0' as false. Everything else is true:

initialState() {
  return {
    disabled: this.bool('disabled', false),
    required: this.bool('required', false),
    autofocus: this.bool('autofocus', false),
  };
}
// data-disabled  → true  (present with any value except 'false'/'0')
// data-disabled="false" → false
// no attribute   → false (the fallback)

json() — structured data

Pass arrays and objects from the server. Use single quotes in HTML attributes:

<!-- HTML -->
<dv-product-list data-items='[{"id":1,"name":"Widget"},{"id":2,"name":"Gadget"}]'></dv-product-list>

initialState() {
  return {
    items: this.json('items', []),
  };
}

Live attribute changes with observedAttributes

If an attribute changes after the component is connected (e.g., via setAttribute), the component can react:

static observedAttributes = ['data-start'];

onAttribute(name, newValue, oldValue) {
  if (name === 'data-start') {
    this.state.count = Number(newValue) || 0;
  }
}

Note: observedAttributes only works with the exact attribute name including the data- prefix.

Live demo: Configurable badge

Recap