diff --git a/patterns/handlers_lists.go b/patterns/handlers_lists.go
index a4e6a2e..08130c1 100644
--- a/patterns/handlers_lists.go
+++ b/patterns/handlers_lists.go
@@ -147,7 +147,7 @@ func valueSelectHandler(baseOpts []livetemplate.Option) http.Handler {
 type InfiniteScrollController struct{}
 
 // LoadMore is dispatched by the client-side IntersectionObserver when
-// <div id="scroll-sentinel"> becomes visible. Uses the larger
+// <div lvt-scroll-sentinel> becomes visible. Uses the larger
 // infiniteScrollDataset (100 items) so the auto-pagination cascade is
 // actually visible during the demo; ClickToLoad uses the 25-item
 // listDataset which only needs a couple of clicks.
diff --git a/patterns/patterns_test.go b/patterns/patterns_test.go
index 1e181b9..44c158e 100644
--- a/patterns/patterns_test.go
+++ b/patterns/patterns_test.go
@@ -1345,7 +1345,7 @@ func TestURLFilters(t *testing.T) {
 
 // --- Pattern #10: Infinite Scroll ---
 
-// TestInfiniteScroll verifies the #scroll-sentinel IntersectionObserver
+// TestInfiniteScroll verifies the [lvt-scroll-sentinel] IntersectionObserver
 // wiring and the loadMorePending throttle. In headless Chrome the short
 // first page keeps the sentinel intersecting, so page 2 auto-advances;
 // subsequent pages require an explicit scroll because the sentinel has
@@ -1416,7 +1416,7 @@ func TestInfiniteScroll(t *testing.T) {
 		// Scroll once
 		err := chromedp.Run(ctx,
 			chromedp.Evaluate(`(() => {
-				const s = document.getElementById('scroll-sentinel');
+				const s = document.querySelector('[lvt-scroll-sentinel]');
 				if (s) s.scrollIntoView({ block: 'center' });
 			})()`, nil),
 			e2etest.WaitFor(`document.querySelectorAll('tbody tr[data-key]').length > `+fmt.Sprintf("%d", baseline), 5*time.Second),
@@ -1429,7 +1429,7 @@ func TestInfiniteScroll(t *testing.T) {
 		_ = chromedp.Run(ctx, chromedp.Evaluate(`document.querySelectorAll('tbody tr[data-key]').length`, &afterFirstScroll))
 		err = chromedp.Run(ctx,
 			chromedp.Evaluate(`(() => {
-				const s = document.getElementById('scroll-sentinel');
+				const s = document.querySelector('[lvt-scroll-sentinel]');
 				if (s) s.scrollIntoView({ block: 'center' });
 			})()`, nil),
 			e2etest.WaitFor(`document.querySelectorAll('tbody tr[data-key]').length > `+fmt.Sprintf("%d", afterFirstScroll), 5*time.Second),
diff --git a/patterns/templates/lists/infinite-scroll.tmpl b/patterns/templates/lists/infinite-scroll.tmpl
index 3979de1..1fc630c 100644
--- a/patterns/templates/lists/infinite-scroll.tmpl
+++ b/patterns/templates/lists/infinite-scroll.tmpl
@@ -1,7 +1,7 @@
 {{define "content"}}
 <article>
     <h3>Infinite Scroll</h3>
-    <p><small>A single <code>&lt;div id="scroll-sentinel"&gt;</code> at the end of the list is watched by the client's IntersectionObserver. When it enters the viewport, the client dispatches <code>load_more</code> automatically — no client JS to wire up. Dataset has 100 items; scroll to watch pages append.</small></p>
+    <p><small>A single <code>&lt;div lvt-scroll-sentinel&gt;</code> at the end of the list is watched by the client's IntersectionObserver. When it enters the viewport, the client dispatches <code>load_more</code> automatically — no client JS to wire up. Dataset has 100 items; scroll to watch pages append.</small></p>
     <table>
         <thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead>
         <tbody>
@@ -15,7 +15,7 @@
         </tbody>
     </table>
     {{if .HasMore}}
-    <div id="scroll-sentinel"><small aria-busy="true">Loading more…</small></div>
+    <div lvt-scroll-sentinel><small aria-busy="true">Loading more…</small></div>
     {{else}}
     <p><small>End of list.</small></p>
     {{end}}