Slot content is cloned and doesn't use the existing element

[TomCaserta]

The slotted content appears to just be a clone of whatever is inside the web-components body. For example if I had:

<my-first-web-component>
      <button>Something</button>
</my-first-web-component>

If I created that button programatically and inserted it inside the wrapped web component then this wrapper will simply pick that up and create VNode out of it for Vue to render. This is bad because if I attach an event listener to this element then it simply wont ever be called as the element rendered is not the same as the one I'm attaching a listener to.

I'm not certain on a good solution though, I think this needs to be handled outside of Vue. Possibly instead of creating a VNode from the element itself we could render a native slot element here and leave the slot handling up to the browser/polyfill where this may not be a problem?

Modified toVNode method to understand the 'potential' solution above:

function toVNode (h, node) {
  if (node.nodeType === 3) {
    return node.data.trim() ? node.data : null
  } else if (node.nodeType === 1) {
    const slotName = node.getAttribute('slot')
    return h('slot', slotName ? {
      slot: slotName,
      attrs: { name: slotName }
    } : null)
  } else {
    return null
  }
}

[egucciar]

If I'm reading this correctly does this mean the vue-web-component-wrapper does not implement a native version of slots for webcomponents? I'm having difficulty even getting mine to show up, and this issue does raise concerns because for our use case we require native slot implementation, not a psudeo one which mimics how slots are supposed to work

[mdo2]

I think this is a duplicate of #49

[andreacampaci]

Here the same issue about event listeners attached to elements inside slots. Any update on that?
@TomCaserta I try your solution and it works well. Please, can you open a related pull request?

[dezmound]

This is really makes me sad. I think that it looks more like bug rather than enhancement. It's not possible to insert embedded content inside slot, because it duplicates iframes and sends several request to external source, but must only one. I have duplicated sound from to html element 😢

UPD:

As a workaround you may use this solution:

<my-player>
   <video src="https://some-video-source.com/1323edvv">
</my-player>

<template>
   <div class="my-player">
     <div ref="video" />
   </div>
</template>

<script>
export default {
  name: 'MyPLayer',
  mounted() {
    this.$nextTick(() => {
      const slot = document.createElement('slot');
      this.$refs.video.append(slot);
    });
  }
}
</script>
<style>
::slotted(video) {
  width: 100%;
}
<style>