OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Vuejs: insert <slot> inside the foreignObject in SVG

  • Thread starter Thread starter Rduan
  • Start date Start date
R

Rduan

Guest
I'm using v-slot to put html code into an SVG element of a child element via JS.

But when I run the code. I found that the slot element is empty. It seems that slot does not inherit Parent's html. Do I make any mistake?

Here is part of my code:

Parent​


Code:
<template>
<div>
    <NumberLine>
    <template v-slot>
        <div>Sth here ...</div>
    </template>
    </NumberLine>
</div>
</template>

Child Component​


Code:
<template>
<div class="OutterContainer">
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="svg">
  </svg>
</div>
</template>

js code here

Code:
    SvgAddComponent(x, y) {
      let component = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
      component.setAttribute('x', x);
      component.setAttribute('y', y);
      component.setAttribute('width', 30);
      component.setAttribute('height', 30);
      let slot = document.createElementNS('http://www.w3.org/2000/svg', 'slot');
      component.appendChild(slot);
      return component;
    }

Here is the Dev Tool info:

enter image description here

Thanks for your patience

<p>I'm using v-slot to put html code into an SVG element of a child element via JS.</p>
<p>But when I run the code. I found that the slot element is empty. It seems that slot does not inherit Parent's html. Do I make any mistake?</p>
<p>Here is part of my code:</p>
<h2>Parent</h2>
<pre class="lang-html prettyprint-override"><code><template>
<div>
<NumberLine>
<template v-slot>
<div>Sth here ...</div>
</template>
</NumberLine>
</div>
</template>
</code></pre>
<h2>Child Component</h2>
<pre class="lang-html prettyprint-override"><code><template>
<div class="OutterContainer">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="svg">
</svg>
</div>
</template>
</code></pre>
<p>js code here</p>
<pre class="lang-html prettyprint-override"><code> SvgAddComponent(x, y) {
let component = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
component.setAttribute('x', x);
component.setAttribute('y', y);
component.setAttribute('width', 30);
component.setAttribute('height', 30);
let slot = document.createElementNS('http://www.w3.org/2000/svg', 'slot');
component.appendChild(slot);
return component;
}
</code></pre>
<p>Here is the Dev Tool info:</p>
<p><a href="https://i.sstatic.net/J1DwOh2C.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/J1DwOh2C.png" alt="enter image description here" /></a></p>
<p><strong>Thanks for your patience</strong></p>
 

Latest posts

H
Replies
0
Views
1
Hür Doğan ÜNLÜ
H
Top