e.pathの代替

Question

これは、ただ単にボタンが押されたときにイベントが発生した要素をコンソールに書き出すコードです。

<button id="btn">click me</button>

document.getElementById("button").addEventLisner("click",
(e)=>{
      console.log(e.path[0]);
});

ところが、ここで使っているe.pathが廃止されるそうです。調べてみると、代替としてe.composedPathが用意されているそうですが、コンソールでe.pathとe.composedPathを見てみると、
e.path

e.composedPath

e.pathは配列の0番目に要素の内容が記述されているわかりやすいインターフェイスなのに対し、e.composedPathでは中身が見えません。e.pathが廃止された後にもクリックされた要素を取得する方法はありますか?(document.getElementByIdやdocument.querySelectorを使う方法は自分の目的に合っていないので投稿しないでください)

Answer 1

composedPath はプロパティではなく関数なので、使うには () を付ける必要があります。
e.composedPath()[0] でもいいでしょうが、イベントが起きたノードを得るには普通は e.target を使いますね。

Answer 2

上位にむけて保持する必要が本当にあるのか疑問です
すでに回答があるようにe.targetがイベントの発生した要素です

<script>
document.addEventListener('click',e=>{
  let target=e.target;
  const res=[target];
  while(target=target.parentNode){
    res.push(target);
  }
  res.push(this);
  console.log(res);
  console.log(e.composedPath());

});
</script>
<button id="btn">click me</button>