javascript - AOS カスタム イベントをトリガーした要素を取得する

Question

最新の Animate On Scroll ライブラリ ( https://github.com/michalsnik/aos ) を使用して、ビューポートに入ったときにカスタム イベントをトリガーする要素がいくつかあります。

https://codepen.io/anon/pen/vMGQEb

HTML:

<div class="foo" data-aos data-aos-id="inview">
  Foo 1
</div>
<div class="foo" data-aos data-aos-id="inview">
  Foo 2
</div>

JS:

// Init AOS
AOS.init();

// Toggle red color    
document.addEventListener('aos:in:inview', function(e) {
   e.detail.classList.add('text-red');
});

CSS:

.text-red {
  color: red !important;
}

fooこの単純なスクリプトは、要素がビューポートに入ったときに要素を赤くペイントすることになっています。Edge と IE を除いて、どこでも問題なく動作します。私が知る限りe.detail、DOM要素は返されませんが、何をすべきかわからないオブジェクトがあります。

何か案は？