<p dir="auto">Hi,</p>
<p dir="auto">I have created a benchmark suite for Web Components librairies. Vue.js is implemented with his web component target feature, and you can see the raw results here : <a href="https://vogloblinsky.github.io/web-components-benchmark/" rel="nofollow">https://vogloblinsky.github.io/web-components-benchmark/</a></p>
<p dir="auto">I will release soon a blog post explaining in detail that, but i want a feedback of many librairies authors before, to be sure i am not wrong in my implementations.</p>
<p dir="auto">Source code here : <a href="https://github.com/vogloblinsky/web-components-benchmark">https://github.com/vogloblinsky/web-components-benchmark</a></p>
<p dir="auto">Can you have a look and give me some feedbacks ?</p>
<p dir="auto">Thanks</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.6</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="http://jsfiddle.net/bvjfa9xk/8/" rel="nofollow">http://jsfiddle.net/bvjfa9xk/8/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<h3 dir="auto">What is Expected? / What is actually happening?</h3>
<p dir="auto">Dragging list item from one bucket to another paints outer item red on a <code class="notranslate">dragenter</code> event.<br>
This is what the fiddle does as expected. I start to drag an item from the 3rd column to the 2nd, upon dragstart the 3rd gets the class immediately. The second gets it only when the mouse hovers over it. As I said this is what I expect to happen.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1974290/21194273/a00e52fc-c22f-11e6-8be5-0fb1650aa4b4.PNG"><img src="https://cloud.githubusercontent.com/assets/1974290/21194273/a00e52fc-c22f-11e6-8be5-0fb1650aa4b4.PNG" alt="jsfiddle" style="max-width: 100%;"></a></p>
<p dir="auto">But if I copy the exact same code from the fiddle and paste it in a local folder /index.html, main.js, also link to vue 2.1.6/ This happens:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1974290/21194356/f1d84354-c22f-11e6-9dcc-14e7a874189d.PNG"><img src="https://cloud.githubusercontent.com/assets/1974290/21194356/f1d84354-c22f-11e6-9dcc-14e7a874189d.PNG" alt="local" style="max-width: 100%;"></a></p>
<p dir="auto">Upon dragstart in the 3rd column, the 2nd one immediately gets the class as well.<br>
Same code, same versions, same browser /latest Chrome/</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  methods: {
    dragenter: function (ev) {
      debugger
      this.$el.classList.add('drop-target')
      console.log(this)
    }
  }"><pre class="notranslate"><code class="notranslate">  methods: {
    dragenter: function (ev) {
      debugger
      this.$el.classList.add('drop-target')
      console.log(this)
    }
  }
</code></pre></div>
<p dir="auto">If I place a debugger statement before the class addition, by the time it stops there I see that the column where I started to drag already got the class and <code class="notranslate">$el</code> now referring to the second column.</p>
<p dir="auto">Everything is the same, I don't know why it behaves different (I'm trying to develop a drag-and-drop application and I just bumped to this issue). First I thought it was webpack/node-module related, so I trashed all of these and started on a single html/js file.</p>