[Content]: Add a concrete DOM-binding example to fine-grained reactivity #1637

📚 Subject area/topic

Advanced Concepts / Fine-grained reactivity / DOM bindings

📋 Page(s) affected (or suggested, for new content)

https://docs.solidjs.com/advanced-concepts/fine-grained-reactivity

Source: src/routes/(1)advanced-concepts/(0)fine-grained-reactivity.mdx

📋 Description of content that is out-of-date or incorrect

The introduction explains that Solid updates a targeted attribute instead of re-executing an entire component, but the page does not currently demonstrate a DOM-attribute binding.

The first examples introduce createSignal and createEffect, then move into constructing a reactive system from scratch. A short JSX example after “Understanding signals” would connect the signal getter to the targeted-DOM-update claim made in the introduction.

I propose adding the following subsection:

Using signals in DOM bindings

Reading a signal in JSX creates a reactive connection between the signal and that part of the DOM.

import { createSignal } from "solid-js";

function ToggleButton() {
  const [pressed, setPressed] = createSignal(false);

  return (
    <button
      aria-pressed={pressed()}
      onClick={() => setPressed((value) => !value)}
    >
      {pressed() ? "Pressed" : "Not pressed"}
    </button>
  );
}

Solid runs ToggleButton once to create the button. The reads of pressed() create reactive bindings for the aria-pressed attribute and text node. When the signal changes, Solid updates those DOM targets without re-running the component function.

Framework comparison: Vue expresses a similar state-to-DOM relationship through v-bind. For a cross-framework explanation, see how Vue's v-bind connects reactive state to DOM attributes.

This example would:

• Make the page’s “targeted attribute” statement concrete.
• Show how signal reads in JSX participate in tracking.
• Demonstrate an accessible state attribute.
• Provide a concise framework comparison.

Affiliation disclosure

I maintain FrontendAtlas, and the optional Vue comparison link points to content I maintain.

I included it because that page explains Vue’s compilation, dependency-tracking, and attribute-patching path. The Solid example remains useful without this link, and I am happy for the link or the entire comparison note to be omitted if third-party comparisons are outside the page’s scope.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

Not applicable; this is a proposed explanatory example rather than a report of incorrect runtime behavior.