<p dir="auto">Edit:<br>
Issue has been exported to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="321564727" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/8156" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/8156/hovercard" href="https://github.com/vuejs/vue/issues/8156">#8156</a></p>
<p dir="auto">So I deleted content from here so that there is no duplication!</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codesandbox.io/s/epic-neumann-m8hqz" rel="nofollow">https://codesandbox.io/s/epic-neumann-m8hqz</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Open link</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Should display button under the text</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Button is not displayed</p>
<hr>
<p dir="auto">I try to add separate vue component in svg. This component has foreginObject tag as root and contains button, wich was inserted thorought slot in another component. It do not work, I mean button is hidden in browser. However the button exist in DOM, more over has sizes</p>
<p dir="auto">At the same time if forigenObject tag is declared in component with svg it is work. I can see button.<br>
example: <a href="https://codesandbox.io/s/inspiring-mclaren-t1z09" rel="nofollow">https://codesandbox.io/s/inspiring-mclaren-t1z09</a></p>
<p dir="auto">I supose, there is porblem with slot content rendering in foreginObject, when forigenObject is root tag of separate component</p>