Update aria-current="page" using custom element

Author: RoyalIcing

assets/js/app.js

@@ -11,6 +11,7 @@ import topbar from "../vendor/topbar";
 
 import "./customElements/enhanced-navigation";
 import "./customElements/filter-items";
+import "./customElements/phx-current-page";
 import "./customElements/wasm-simple-html";
 import "./customElements/wasm-chunked-html";
 import "./customElements/wasm-state-machine";

assets/js/customElements/filter-items.js

@@ -14,7 +14,6 @@ customElements.define('filter-items', class extends HTMLElement {
   }
 
   connectedCallback() {
-    console.log(this);
     const aborter = new AbortController();
     const signal = aborter.signal;
     const id = this.id || `filter-items-${crypto.randomUUID()}`;

assets/js/customElements/phx-current-page.js

@@ -0,0 +1,37 @@
+customElements.define('phx-current-page', class extends HTMLElement {
+  linksWithHref(href) {
+    return Array.from(this.querySelectorAll("a[href]"))
+      .filter(a => a.href === href);
+  }
+  linksWithCurrentPage() {
+    return Array.from(this.querySelectorAll("a[aria-current=page]"));
+  }
+
+  connectedCallback() {
+    const aborter = new AbortController();
+    const signal = aborter.signal;
+
+    const update = () => {
+      for (const el of this.linksWithCurrentPage()) {
+        el.removeAttribute("aria-current");
+      }
+      for (const el of this.linksWithHref(window.location.href)) {
+        el.setAttribute("aria-current", "page");
+      }
+    }
+
+    requestAnimationFrame(update);
+    window.addEventListener("phx:page-loading-stop", update, { signal });
+
+    this.disconnectedCallback = () => {
+      aborter.abort();
+    }
+  }
+
+  // disconnectedCallback() {
+  //   if (this.aborter) {
+  //     this.aborter.abort();
+  //     this.aborter = undefined;
+  //   }
+  // }
+});

lib/components_guide_web/components/browser_compat_components.ex

@@ -132,15 +132,16 @@ defmodule ComponentsGuideWeb.BrowserCompatComponents do
     ~H"""
     <div class="relative grid grid-cols-[max-content_auto] not-prose bg-white/5">
       <nav class="flex flex-col text-left bg-white/5">
-        <filter-items class="contents">
+        <filter-items class="contents" id={@id <> "-filter-items"} phx-update="ignore">
           <input
             type="search"
             placeholder="Filter"
             class="bg-black text-white border-0 px-4 font-mono"
             id={@id <> "-search"}
-            phx-update="ignore"
           />
-          <%= render_slot(@nav_items) %>
+          <phx-current-page class="contents">
+            <%= render_slot(@nav_items) %>
+          </phx-current-page>
         </filter-items>
       </nav>
       <article class="">