タイトル及び表現修正について
記事内にスクレイピングという言葉を使っていてコメントよりyoutubeの規約に違反してるという趣旨、及び私が違和感を持った所も「そもそもcustom elementだから問題ない」という指摘もいただきました。
スクレイピングに関しては実際にやった作業に修正、また記事内にcustom elementsを記載していながらそれに気づいていない自分の愚かさを鑑みてタイトルも修正いたしました。
以下を読まれる方は上記を踏まえて一読下さい。
idって重複していいの？
タイトルにネタバレを持ってきましたが、まぁその通りです。
だってソース見たら
<div id="content" class="style-scope ytd-app">
//略
<div id="content" class="style-scope ytd-comments-entry-point-header-renderer">
//略
<div id="content" class="style-scope ytd-expander">
//略
<div id="content" class="style-scope ytd-ads-engagement-panel-content-renderer">
って記述にと
<div id="content" class="style-scope ytd-engagement-panel-section-list-renderer">
が複数あるんですよ…
SPAであってもHTML5でもHTMLのidって複数持っちゃダメなはずですよね。
Chromeでdebugツールで見てる時に困った
なんで泣いた(嘘)か？ってChromeのdebugツールでdomを見ている時で、ctrl+fを使った時でした。(当初スクレイピングというワードを使っていましたが規約で禁止されているのと実際の作業と乖離があったため表現を修正します。)
検索ワードに「div#content」ってやって予想以上の数が返ってきて「あれ？」って感覚に陥ったのです。
ちょっと面白くなってローカルにhtmlをDLしてRubyのnokogiriのxpathでやってみたり色々やって遊んだりしたんですが、「何が怖いか？」ってhtmlをパースするライブラリによっては配列じゃなく最初や最後のだけが返ってくる可能性も捨てきれません。
(人的ミスでidが重複する可能性がある以上可能性はかなり低いと思います。)
レイアウトには問題ない
前述したように、html4の時代から今までも人が作成したサイトでidが重複していることもあれば、ライブラリによって意図せずidが複数になることもあったでしょう。
何よりブラウザがちゃんと?解釈してくれているので問題ないんでしょう。
ただYoutubeって天下の検索エンジンのGoogle傘下のサービスなのになぁ…（最初から開発したわけじゃなく買い取ったわけですし、昨今はchat GPTが〜みたいな話もありますけど）という感情があったので「おい！」となったの事実です。
もちろん検索エンジンのサービスを作っている会社のwebサービスのHTMLタグ厳格でなければならいということもないと思います。
細かいことはどうでもいい(んだろうな)
まぁ、世の中のwebサイトを閲覧している人の90%以上はマークアップなんて気にしてないわけでidが重複しようがどうでもいい話ですし、ブラウザが解釈して意図した通りにレンダリング&動作してくれれば目的は達成できていると言えると思います。
ブラウザの性能が上がり、virtual DOMやCustom elementsが普通に使えるようになっている2023年においてHTMLをLintにかけて「idが重複していますよー」というのにどれくらい意味があるのか？と言われると私も「まぁ、そこまで厳密にしなくてもいいんだろうなぁ」まして「正しくないから表示させないよ」ってのはナンセンスだしユーザーの不利益になる場合もあると思います。
電子書籍で使われているEpubとかの需要度を見るともしかしたら…（こちらは流石になさそうですけど。）
まとめ
実装中に「え？」となった感情だけで記事を書きましたがHTMLの歴史を見ると割と柔軟に変わってると思うので、近い将来idの重複をOKとする仕様になるのかもなぁと思っています。
そうなると「classとの線引きどうなるの？」とか「labelは流石に重複しちゃダメじゃない？」というのはあると思いますが、そうなったらそうなったで対応するしかないんで頑張ってアップデートしていかなければと思った次第でした。