Keep a loop item's property from being read as a prop of the same name

A component that renders a list, such as FeatureGrid, passes each item
into a child: title={item.title || item.label || "Feature"}. The
compiler decided whether that attribute needed a client binding by
searching the expression for each prop name, so `item.label` matched the
grid's own `label` prop and a binding was emitted.

On hydration the binding is re-evaluated where the loop item is out of
scope, so the expression fell through to its default and replaced the
server's value: every card's title became "Feature". A name after a dot
belongs to whatever precedes it, so it no longer counts as a reference.

Timeline headings follow the same idea: its items were always h4, which
skipped a level and broke the heading order of a page that gives the
timeline no title of its own. They now take h3 in that case.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5 committed 2026-09-18 12:09:28 +05:30
1 parent a4a31032b9
commit a154e6c26e
3 files changed
+57 -10

No files matched your search

+11 -1
View File
@@ -58,7 +58,17 @@ component Timeline {
>
<div class="wrn-timeline__card-header">
<div>
<h4 class="wrn-timeline__item-title">{item.title || item.label}</h4>
<!--
Items sit under this component's own title when it has one.
Without that title they are the first heading here, so they
take its level instead of skipping one and leaving a gap in
the page's heading order.
-->
{#if title}
<h4 class="wrn-timeline__item-title">{item.title || item.label}</h4>
{:else}
<h3 class="wrn-timeline__item-title">{item.title || item.label}</h3>
{/if}
{#if item.subtitle}
<p class="wrn-timeline__subtitle">{item.subtitle}</p>
{/if}