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

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

Child Component

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

js code here

    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:

Thanks for your patience