Native Slot - please explain how to use

[egucciar]

I am trying to pass in a slot via webcomponents but it appears as if the wbecomponent slot is ignored and Vue interprets it to be a Vue slot. I'd love to see an example of how this is supposed to work, given that right now it seems as though my slot is being picked up by vue and not the component-wrapper.

Something like
((in the dom)

<component-name>
Content
</component-name>

then

down the line:

i can see this is fully in shadowRoot and not even picked up as a 'slot' (which are rendered in litedom)

this is not even the content i am trying to pass from outside.

here's a bit of my chain:

<template>
  <div class="main">
    <content-header />
    <router-view>
      <slot>Default content 1</slot>
    </router-view>
  </div>
</template>

and the component from the router:

        <slot>
            <div>default content</div>
        </slot>

So passing in slot from router-view worked. but not in litedom. Also its ignoring content from the outer component.

[DebugIsFalse]

i also has problem;
now i resolve it that change his node_modules in @vue/web-component-wrapper

step 1

// 69 line funciton change
//his code
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
      }
}
//my code
function toVNode (h, node) {
    if (node.nodeType === 3) {
        return node.data.trim() ? node : null
      } else if (node.nodeType === 1) {
        const slotName = node.getAttribute('slot')
        return slotName ? h('slot',  {
          slot: slotName,
          attrs: { name: slotName }
        }) : node;
      } else {
        return null
      }
}

step 2:

// 195 line funciton change

// his code
if (hasChildrenChange) {
          wrapper.slotChildren = Object.freeze(toVNodes(
            wrapper.$createElement,
            this.childNodes
          ))
       }

//my code
if (hasChildrenChange) {
          wrapper.slotChildren = Object.freeze(toVNodes(
            wrapper.$createElement,
            this.childNodes
          ));
          if( wrapper.slotChildren.length > 0 ){
                wrapper.slotChildren.forEach((it)=>{
                    it !== null && wrapper.$el.appendChild(it);
                })
          }
        }

my project has no problem but I am not sure it has other problem in the future;

[LinusBorg]

It would be much easier to follow your report if you provided actual Dunn able code instead of short snippets.

[egucciar]

@LinusBorg I hope it is understandable that for the report, I have provided the code we use in our app as closely as possible to demonstrate that the vue web-component wrapper does not support native web component slots as one would expect.

I am not really well versed in Vue actually - I was just pitching in on a project where we needed to have an element accessible via document.getElementById and had we been using regular web components the slotting technique would have been sufficient. Instead we pivoted and overwrite document.getElementById to pierce the shadowRoots. Super gross.

I looked around for fiddles, demos, or anything with Vue Webcomponent wrapper + a simple Vue App + WebComponent Slots already implemented, but was unable to find. Even the documentation for this repository has a simple note, but not really elaborating on how it works / should be used / differs from actual WebComponent slots. I was able to find the test files, which showed how to use, but was not able to figure out how to reproduce those test files in a standalone runtime environment to show they did not meet expectation.

Anyway, if you can provide any sample / demo of "native" web component slots within the Vue Web Component, that would be helpful to get started in reproducing or showing where the issue lies.

[smallscript]

See the following links for a solution, and discussion of the design and implementation issue with slot and VueComponents as native DOM WebComponents supporting shadowRoot semantics.

• solution
• announced here in Vue Forum "Show and Tell"
• background-discussions here of activity that lead me to create solution above.

[LinusBorg]

We will check that out! :)

[smallscript]

Sounds good!

I hope my revised explanation clarifies the issues involved, and the ask from the Vue team to support a mechanism for honoring DOM slot element behavior in a #shadow-root context.

I have been using the plugin I built for a number of days and I am really pleased with the power and capabilities Vue enables for both user-land consumption, and developer authoring of easily and quickly created widget-libraries of WebComponents.

Thank you LinusBorg!

[Adam-RapidRTC]

I found a workaround for this that doesn't require any modifications to Vue or plug-ins and it appears to be working across all major browsers.

Basically, just wire up the $nexttick event to clear out the innerHTML of the parent of the slot element and insert a new slot. I answered my own question on StackOverflow so you can see the working example here: https://stackoverflow.com/questions/55169976/how-to-properly-use-slot-inside-of-vue-js-web-component-and-apply-styles/55712612#55712612