カスタムデータ属性の使い方は理解したのですが、私は使い時を理解していないようでご質問させていただきました。
今回の場合、メニューのaタグとsectionを紐づけたいなら同じidにすればいいのでは、と一瞬考えてしまい
下記のようにaタグとsectionのidを同じにものにしてみました。
<index.html>

    <ul class="menu">
      <li><a href="#" class="active" id="about">サイトの概要</a></li>
      <li><a href="#" id="service">サービス内容</a></li>
      <li><a href="#" id="contact">お問い合わせ</a></li>
    </ul>

    <section class="content active" id="about">
      サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。
    </section>

<main.js>

document.getElementById(clickedItem.id).classList.add('active');

クリックするとsectionが真っ白になってしまいました。
これは、一つのhtml内で同じidは使えないからうまく動かないのでしょうか？
つまり同じidを回避するためにカスタムデータ属性を今回使用しているのでしょうか。