Can't portal content from svg

[wolandec]

https://codesandbox.io/s/strange-keldysh-7pwk1

I expect to window appears, but it's not.

If I move <component :is="Second"></component> outside the svg tag, everything is ok then.

[LinusBorg]

Well, the portal content is moved to the portal-target:

As I'm not familiar with that window library that you are using, someone would have to guide me about why the dom is there but the window is not showing.

If that info can be provided we can judge wether/how this is related to portal-vue

[LinusBorg]

Edit: this seems to be related: #287

[wolandec]

Hello! Thank you for your time. I make it simpler and it doesn't work either, so as I see you've mentioned that #287 issue, guess that problem is the same as mine.

https://codesandbox.io/s/beautiful-bogdan-gucj4

[wolandec]

https://codesandbox.io/s/ecstatic-mclaren-u45lb

Even more simpler: with no component tag.

[wolandec]

I've got another interesting stuff. If I add anything in body tag using Chrome devtools, then ported content shows up.

https://youtu.be/TxL5olpWqT4

[LinusBorg]

Okay, this is getting weirder by the minute 🧐

Maybe a Chrome bug? Need to test other browsers...

[wolandec]

I've already tested in Firefox. The same result.

[LinusBorg]

Weird. Just - weird.

[wolandec]

May it be a Vue bug?

I remove portal-vue and just leave div inside svg in vue applcation. Div is invisible.
https://codesandbox.io/s/prod-violet-4f5be

Dynamically create the same html with no Vue using. Div is visible.
https://codesandbox.io/s/jovial-violet-qbok9

[hamish-milne]

Getting this issue as well. Static content in the SVG portaled outside of it works fine. Static content inside a transition-group (?) causes the :not(svg) CSS condition to be permanently applied to the element. Dynamic content shows up in the devtools but isn't visible unless I "Edit HTML", then it shows up but isn't bound to the VM anymore (presumably because it's a new/different Element object).

[LinusBorg]

It seems that Vue's h() is aware that it's curently in an SVG element and thus creates the HTML elements differently before they are portaled to outside of the SVG. There, the browser gets a hickup as the element looks like it belongs inside of an SVG,but it isn't - and after being nudged to update the page, the browser "realizes" that it's actually a normal HTML element.

I can't tell wether this is a browser bug, Vue bug or portal-vue issue, and have no idea how it could be fixed.

Will rate this a wontfix caveat.