IE11: Error in created hook: "TypeError: Object doesn't support property or method 'append'"

kspackman commented 5 years ago

I'm excited for this library, but it doesn't work in IE11. Do you plan to support IE?

LinusBorg commented 5 years ago

Pleae provide a concrete test case for me to check out. I don't see why it would not work in IE.

kspackman commented 5 years ago

Using a very slightly modified version of your example in the readme,

  <body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/@linusborg/vue-simple-portal"></script>
    <div id="app">
      <!-- your Vue app mounts to this element -->
    </div>

    <div id="portal-target">
      <!-- our `<portal>` should move stuff here -->
    </div>

    <script>
      new Vue({
        el: '#app',
        template: '<div><portal selector="#portal-target"><p>This will be mounted as a child element of div id="portal-parget" instead of somewhere inside the child tree of div id="app"</p></portal></div>'
      })
    </script>
  </body>

The error received is the one listed in the description of this issue: Object doesn't support property or method 'append' Which is in fact not supported by IE. https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

LinusBorg commented 5 years ago

Indeed. I'll document this and add a link to the polyfill.

https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Polyfill

tmorehouse commented 5 years ago

Why not just use parentNode.appendChild(el), which is cross browser? or is it because the content could be a plain DOM String?

LinusBorg commented 5 years ago

Because I so rarely touch the DOM that I don't have that information ready to access in my brain, I guess ^^

Didn't look up any solution so far, so thanks for that :)

LinusBorg commented 5 years ago

this was fixed in #18, released with v0.1.2

LinusBorg / vue-simple-portal

IE11: Error in created hook: "TypeError: Object doesn't support property or method 'append'" #15