search

vuejs / vue-web-component-wrapper

(Vue 2 only) Wrap a Vue component as a web component / custom element.
1.05k stars 99 forks source link

How can I nest web component in vue-web-component-wrapper?? #94

Closed AlpacaBi closed 3 years ago

AlpacaBi commented 3 years ago

I use ElementUI Vue Component,such like this

<el-dropdown>
  <span class="el-dropdown-link">
    Menu <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>apple</el-dropdown-item>
    <el-dropdown-item>banana</el-dropdown-item>
    <el-dropdown-item>pineapple</el-dropdown-item>
    <el-dropdown-item disabled>peach</el-dropdown-item>
    <el-dropdown-item divided>other</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

so now I convert some Vue Component to Web Component 

window.customElements.define('wb-dropdown', wrapVueWebComponent(Vue, ELEMENT.Dropdown))
window.customElements.define('wb-dropdown-menu', wrapVueWebComponent(Vue, ELEMENT.DropdownMenu))
window.customElements.define('wb-dropdown-item', wrapVueWebComponent(Vue, ELEMENT.DropdownItem))
<wb-dropdown>
  <span class="el-dropdown-link">
    Menu <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <wb-dropdown-menu slot="dropdown">
    <wb-dropdown-item>apple</wb-dropdown-item>
    <wb-dropdown-item>banana</wb-dropdown-item>
    <wb-dropdown-item>pineapple</wb-dropdown-item>
    <wb-dropdown-item disabled>peach</wb-dropdown-item>
    <wb-dropdown-item divided>other</wb-dropdown-item>
  </wb-dropdown-menu>
</wb-dropdown>

it‘s not working in nest Web Component(but it working fine in some simple ElementUI Component like Button、Switch)...

LinusBorg commented 3 years ago

That won't work. These nested components need to be within one Vue app / virtual DOM in order to e.g. receive injections from their parent etc.

As web components, they are mounted as independent little Vue instances, so they don't have knowlegde of or access to their parent components.

AlpacaBi commented 3 years ago

That won't work. These nested components need to be within one Vue app / virtual DOM in order to e.g. receive injections from their parent etc.

As web components, they are mounted as independent little Vue instances, so they don't have knowlegde of or access to their parent components.

Thanks, i get it