Use dataset API for interacting with data- attrs

jakobsen · jakobsen · commit 97a433dcb79d · 2026-07-16T18:11:50.000+02:00
Please consider this PR only a suggestion.

There is no functional difference between

```js
const isRevealed = el.getAttribute("data-revealed");
```

and

```js
const isRevealed = el.dataset.revealed;
```

but to me the latter reads a little neater.

Another nice feature is that `dataset.multipleWords` in JS translates to
`data-multiple-words` in HTML.
diff --git a/src/components/home/UseElixirFor.astro b/src/components/home/UseElixirFor.astro
@@ -732,9 +732,9 @@ const starConfig = JSON.stringify(
         const activeStar = stars[catId] ?? "#746284";
 
         tabs.forEach((t) => {
-          const match = t.getAttribute("data-tab") === catId;
+          const match = t.dataset.tab === catId;
           if (match) {
-            t.setAttribute("data-active", "");
+            t.dataset.active = "";
             t.setAttribute("aria-pressed", "true");
           } else {
             t.removeAttribute("data-active");
@@ -743,7 +743,7 @@ const starConfig = JSON.stringify(
         });
 
         cards.forEach((c, i) => {
-          if (i === activeRow) c.setAttribute("data-active", "");
+          if (i === activeRow) c.dataset.active = "";
           else c.removeAttribute("data-active");
           const starPaths = c.querySelectorAll("[data-star] path");
           starPaths.forEach((path) => {
@@ -754,7 +754,7 @@ const starConfig = JSON.stringify(
         panels.forEach((p) => {
           const panel = p.querySelector("[data-panel-cat]");
           if (!panel) return;
-          const match = panel.getAttribute("data-panel-cat") === catId;
+          const match = panel.dataset.panelCat === catId;
           panel.toggleAttribute("data-active", match);
           panel.setAttribute("aria-hidden", match ? "false" : "true");
         });
@@ -774,7 +774,7 @@ const starConfig = JSON.stringify(
 
       tabs.forEach((t) => {
         t.addEventListener("click", () => {
-          const cat = t.getAttribute("data-tab");
+          const cat = t.dataset.tab;
           if (!cat) return;
           suppressSpyUntil = performance.now() + 1000;
           setActive(cat);
diff --git a/src/components/ui/FilteredListing.astro b/src/components/ui/FilteredListing.astro
@@ -96,7 +96,7 @@ const config = JSON.stringify({
     };
 
     connectedCallback() {
-      const raw = this.getAttribute("data-config");
+      const raw = this.dataset.config;
       if (!raw) return;
       this.config = JSON.parse(raw) as Config;
       this.activeTab = this.config.defaultTab;
@@ -176,14 +176,14 @@ const config = JSON.stringify({
 
     private refreshChildren() {
       if (this.tabFilter) {
-        this.tabFilter.setAttribute("data-active", this.activeTab);
+        this.tabFilter.dataset.active = this.activeTab;
       }
       if (this.pagination) {
         this.pagination.setAttribute(
           "data-total",
           String(this.totalPages(this.activeTab)),
         );
-        this.pagination.setAttribute("data-page", String(this.activePage));
+        this.pagination.dataset.page = String(this.activePage);
       }
     }
 
diff --git a/src/components/ui/Pagination.astro b/src/components/ui/Pagination.astro
@@ -136,13 +136,13 @@ const {
     }
 
     private getTotalPages(): number {
-      const n = Number(this.getAttribute("data-total") ?? 1);
-      return Number.isFinite(n) && n > 0 ? n : 1;
+      const n = Number(this.dataset.total ?? 1);
+      return Number.isInteger(n) && n > 0 ? n : 1;
     }
 
     private getActivePage(): number {
-      const n = Number(this.getAttribute("data-page") ?? 1);
-      return Number.isFinite(n) && n > 0 ? n : 1;
+      const n = Number(this.dataset.page ?? 1);
+      return Number.isInteger(n) && n > 0 ? n : 1;
     }
 
     private dispatchPageChange(page: number) {
diff --git a/src/components/ui/TabFilter.astro b/src/components/ui/TabFilter.astro
@@ -94,9 +94,9 @@ const {
       this.querySelectorAll<HTMLButtonElement>("button[data-id]").forEach(
         (btn) => {
           btn.addEventListener("click", () => {
-            const id = btn.getAttribute("data-id");
-            if (!id || id === this.getAttribute("data-active")) return;
-            this.setAttribute("data-active", id);
+            const id = btn.dataset.id;
+            if (!id || id === this.dataset.active) return;
+            this.dataset.active = id;
             this.dispatchEvent(
               new CustomEvent("change", {
                 detail: { id },
@@ -121,12 +121,11 @@ const {
     }
 
     private syncActiveStyling() {
-      const active = this.getAttribute("data-active");
+      const active = this.dataset.active;
       this.querySelectorAll<HTMLButtonElement>("button[data-id]").forEach(
         (btn) => {
-          const match = btn.getAttribute("data-id") === active;
-          if (match) btn.setAttribute("data-active", "");
-          else btn.removeAttribute("data-active");
+          const match = btn.dataset.id === active;
+          btn.toggleAttribute("data-active", match);
           btn.setAttribute("aria-selected", match ? "true" : "false");
         },
       );
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -142,7 +142,7 @@ const seo = {
 
     const posts = root.querySelectorAll("[data-post]");
     const emptyState = root.querySelector("[data-empty-state]");
-    const config = JSON.parse(root.getAttribute("data-config") || "{}");
+    const config = JSON.parse(root.dataset.config || "{}");
     const pageSize = config.pageSize || 5;
     const counts = config.counts || {};
 
@@ -153,7 +153,7 @@ const seo = {
       const end = start + pageSize;
       let matchIdx = 0;
       posts.forEach((el) => {
-        const cat = el.getAttribute("data-category");
+        const cat = el.dataset.category;
         const match = activeTab === "All" || cat === activeTab;
         if (!match) {
           el.classList.add("hidden");
@@ -162,7 +162,7 @@ const seo = {
         const visible = matchIdx >= start && matchIdx < end;
         el.classList.toggle("hidden", !visible);
         if (!firstRender && visible && !el.hasAttribute("data-revealed")) {
-          el.setAttribute("data-revealed", "true");
+          el.dataset.revealed = "true";
         }
         matchIdx++;
       });
diff --git a/src/pages/cases/index.astro b/src/pages/cases/index.astro
@@ -113,11 +113,11 @@ const seo = {
     if (!root) return;
 
     const caseLists = root.querySelectorAll("[data-case-list]");
-    const config = JSON.parse(root.getAttribute("data-config") || "{}");
+    const config = JSON.parse(root.dataset.config || "{}");
 
     function renderCases(activeTab) {
       caseLists.forEach((list) => {
-        const match = list.getAttribute("data-category") === activeTab;
+        const match = list.dataset.category === activeTab;
         list.classList.toggle("hidden", !match);
         list.classList.toggle("grid", match);
       });
diff --git a/src/pages/install/index.astro b/src/pages/install/index.astro
@@ -274,9 +274,9 @@ const seo = {
 
       function setActive(id) {
         tabs.forEach((t) => {
-          const match = t.getAttribute("data-tab") === id;
+          const match = t.dataset.tab === id;
           if (match) {
-            t.setAttribute("data-active", "");
+            t.dataset.active = "";
             t.setAttribute("aria-pressed", "true");
           } else {
             t.removeAttribute("data-active");
@@ -298,7 +298,7 @@ const seo = {
       let suppressSpyUntil = 0;
       tabs.forEach((t) => {
         t.addEventListener("click", () => {
-          const id = t.getAttribute("data-tab");
+          const id = t.dataset.tab;
           if (!id) return;
           suppressSpyUntil = performance.now() + 1000;
           setActive(id);
diff --git a/src/pages/learning/index.astro b/src/pages/learning/index.astro
@@ -255,7 +255,7 @@ const seo = {
     const resources = root.querySelectorAll("[data-resource]");
     const bookHeadings = root.querySelectorAll("[data-book-heading]");
     const emptyState = root.querySelector("[data-empty-state]");
-    const config = JSON.parse(root.getAttribute("data-config") || "{}");
+    const config = JSON.parse(root.dataset.config || "{}");
     const counts = config.counts || {};
 
     let firstRender = true;
@@ -266,7 +266,7 @@ const seo = {
         heading.classList.toggle("hidden", activeTab !== "books");
       });
       resources.forEach((el) => {
-        const category = el.getAttribute("data-category");
+        const category = el.dataset.category;
         const match =
           category === activeTab ||
           (activeTab === "books" && category === "in-depth-books");
@@ -277,7 +277,7 @@ const seo = {
         }
         el.classList.remove("hidden");
         if (!firstRender && !el.hasAttribute("data-revealed")) {
-          el.setAttribute("data-revealed", "true");
+        el.dataset.revealed = "true";
         }
         el.classList.toggle("xl:flex-row-reverse", matchIdx % 2 === 1);
         matchIdx++;
diff --git a/src/scripts/reveal.ts b/src/scripts/reveal.ts
@@ -59,7 +59,7 @@ if (document.readyState === "loading") {
 }
 
 document.addEventListener("astro:before-swap", () => {
-  document.documentElement.setAttribute("data-spa-nav", "");
+  document.documentElement.dataset.spaNav = "";
 });
 
 document.addEventListener("astro:page-load", () => {
diff --git a/tests/filter.spec.ts b/tests/filter.spec.ts
@@ -25,7 +25,7 @@ function visiblePosts(page: Page) {
 /** Assert every visible post belongs to `category`. */
 async function expectAllVisibleInCategory(page: Page, category: string) {
   const cats = await visiblePosts(page).evaluateAll((els) =>
-    els.map((e) => e.getAttribute("data-category")),
+    els.map((e) => e.dataset.category),
   );
   expect(cats.length).toBeGreaterThan(0);
   for (const c of cats) expect(c).toBe(category);
@@ -137,7 +137,7 @@ test.describe("Learning filtering", () => {
     ).toBeVisible();
     const cats = await page
       .locator("[data-resource]:not(.hidden)")
-      .evaluateAll((els) => els.map((e) => e.getAttribute("data-category")));
+      .evaluateAll((els) => els.map((e) => e.dataset.category));
     expect(cats.length).toBeGreaterThan(0);
     for (const c of cats) expect(c).toBe("courses");
   });

Original file line number	Diff line number	Diff line change
`@@ -136,13 +136,13 @@ const {`
`136`	`136`	`}`
`137`	`137`
`138`	`138`	`private getTotalPages(): number {`
`139`		`- const n = Number(this.getAttribute("data-total") ?? 1);`
`140`		`- return Number.isFinite(n) && n > 0 ? n : 1;`
	`139`	`+ const n = Number(this.dataset.total ?? 1);`
	`140`	`+ return Number.isInteger(n) && n > 0 ? n : 1;`
`141`	`141`	`}`
`142`	`142`
`143`	`143`	`private getActivePage(): number {`
`144`		`- const n = Number(this.getAttribute("data-page") ?? 1);`
`145`		`- return Number.isFinite(n) && n > 0 ? n : 1;`
	`144`	`+ const n = Number(this.dataset.page ?? 1);`
	`145`	`+ return Number.isInteger(n) && n > 0 ? n : 1;`
`146`	`146`	`}`
`147`	`147`
`148`	`148`	`private dispatchPageChange(page: number) {`
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ if (document.readyState === "loading") {`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`document.addEventListener("astro:before-swap", () => {`
`62`		`- document.documentElement.setAttribute("data-spa-nav", "");`
	`62`	`+ document.documentElement.dataset.spaNav = "";`
`63`	`63`	`});`
`64`	`64`
`65`	`65`	`document.addEventListener("astro:page-load", () => {`