vuejs/vue-web-component-wrapper

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

AlpacaBi opened this issue · 2 comments

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)...

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.

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