lwcでのページ内ジャンプ

今回は簡単な内容ですが、少しハマったので記事にします。
エクスペリエンスサイトで、lwcを複数配置した際にリンクを押下するとページ内の指定した場所にジャンプする処理です。
idが使えないってところが非常に厄介でした。

test1.HTML

<template>
    <div class="slds-m-around_large">
        <p>あいうえお</p>
        <a name="jumpLink"></a>
    </div>
</template>

test2.HTML

<template>
    <div class="slds-m-around_large">
        <p><a onclick={jump}>飛びます</a></p>
    </div>
</template>

test2.js

export default class test2 extends LightningElement {
    jump() {
        // 今のURLにジャンプ先の情報があるか確認
        if (window.location.href.includes('#jumpLink')) {
            // あればその情報をまた渡す（同じ画面で2回目以降リンク押下した場合）
            window.location.href = window.location.href;
        } else {
            // ない場合は情報を付けたす（初めてリンク押下した場合）
            window.location.href = window.location.href + '#jumpLink';
        }
    }
}

同じ画面にtest1,test2のlwcを配置していた場合、この方法でページ内ジャンプが可能です。
Experience側だと、id指定した場合に重複防止？の為か「-12」などの数字がくっついてしまいます。
ページ内ジャンプに限った話ではないですが、lwcでid指定はご法度なようなので今回はname指定しています。
nameである必要はないと思うので、分かりやすい属性を指定してあげればいいと思います。
jsの処理がイマイチイケてない感じもしますが、そもそも大した機能ではないのでこれくらいでいいかなって感じでした。
HTML周辺の知識が浅い私にとっては、id指定が出来ずに少しハマってしまいました。。。

もっとlwcについて勉強しないとですね！！