be-scoped (🎯)

1<table itemscope=national-medal-list>
2    <caption>Medal List Summer 2024</caption>
3    <thead>
4        <tr>
5            <th></th>
6            <th>Rank</th>
7            <th>NOC</th>
8            <th>Gold</th>
9            <th>Silver</th>
10            <th>Bronze</th>
11            <th>Total</th>
12        </tr>
13    </thead>
14    <tbody>
15        <template 
16            per-each="country-medal-count of national-medal-list"
17            per-each-map-idx-to="idx"
18            per-each-idx-start="1"
19        >
20            <tr -s=aria-rowindex>
21                <td><plus-minus></plus-minus></td>
22                <td itemprop=rank></td>
23                <td itemprop=noc></td>
24                <td itemprop=gold></td>
25                <td itemprop=silver></td>
26                <td itemprop=bronze></td>
27                <td><span itemprop=total></span> of <span -o=totalMedalCount></span></td>
28            </tr>
29            <template be-switched="on when ^({tr})~plusMinus?.isExpanded">
30                <tr be-scoped="country-medal-count national-medal-list">
31                    <td colspan=7>
32                        <medal-ment></medal-ment>
33                    </td>
34                </tr>
35            </template>
36
37        </template>
38    </tbody>
39</table>

What this does:

"Attaches itself" into the "ish" view models that are attached (by mount-observer) to the table and tr elements:

1if(!$0.id){
2    $0.id = 'be-scoped-' + counter++;
3    oTR.itemRef += ' ' + $0.id;
4}