title: Get the element that triggered AOS custom event
body: <p>I have several elements that trigger a custom event when they are inview (entered the viewport) with the latest Animate On Scroll library (<a href="https://github.com/michalsnik/aos" rel="noreferrer">https://github.com/michalsnik/aos</a>). </p>
  
  <p><a href="https://codepen.io/anon/pen/vMGQEb" rel="noreferrer">https://codepen.io/anon/pen/vMGQEb</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="foo" data-aos data-aos-id="inview"&gt;
    Foo 1
  &lt;/div&gt;
  &lt;div class="foo" data-aos data-aos-id="inview"&gt;
    Foo 2
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>// Init AOS
  AOS.init();
  
  // Toggle red color    
  document.addEventListener('aos:in:inview', function(e) {
     e.detail.classList.add('text-red');
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.text-red {
    color: red !important;
  }
  </code></pre>
  
  <p>This simple script is suppposed to paint the <code>foo</code> elements red when they enter a viewport. It works just fine everywhere but Edge and IE. As far as I can tell, <code>e.detail</code> doesn't return a DOM element, but some object I have no idea what to do about.</p>
  
  <p>Any ideas?</p>