Javascript 标记的自定义 Vaadin 组件未添加到 MainView 布局

我正在try 将我的自定义VIS组件添加到MainView VerticalLayout.但是它被呈现在布局的上方，并且布局本身包含一个空的组件标记.

Custom component code

这里，我将我的组件标记为"div"

@JsModule("./visjs-test.js")
@NpmPackage(value = "vis", version = "0.110.0")
@Tag("div")
public class VisJs extends Component {

    public VisJs(List<VisJsEdge> edges, List<VisJsNode> nodes) throws JsonProcessingException {
        ObjectWriter owForEdges = new ObjectMapper().writer().withDefaultPrettyPrinter();
        ObjectWriter owForNodes = new ObjectMapper().writer().withDefaultPrettyPrinter();

        String jsonEdges = owForEdges.writeValueAsString(edges);
        String jsonNodes = owForNodes.writeValueAsString(nodes);

        getElement().executeJs("window.initThree($0, $1, $2)", this, jsonEdges, jsonNodes);
    }
}

visjs-test.js:

在这里，我填充了future 网络的 node 和边缘，并试图渲染它

import {DataSet, Network} from "vis";

class VisJsTest {
    init(element, edges, nodes) {
        this.element = element;

        var loadedNodes = JSON.parse(nodes);
        
        var _this = this;
        var step;
        for (step = 0; step < loadedNodes.length; step++) {
            loadedNodes[step] = this.fillNode(loadedNodes[step]);
        }
        this.nodes = new DataSet(loadedNodes);
        
        var loadedEdges = JSON.parse(edges);
        for (step = 0; step < loadedEdges.length; step++) {
            loadedEdges[step] = this.fillEdge(loadedEdges[step]);
        }
        this.edges = new DataSet(loadedEdges);

        this.container = document.getElementById("outlet");
        
        this.data = {
            nodes: this.nodes,
            edges: this.edges,
        };
        var options = {};
        this.network = new Network(this.container, this.data, options);
}

Rendered HTML

<div id="outlet">
   <!-- Network is here, but not must be -->
   <div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
      <canvas style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;" width="1260" height="563"></canvas>
   </div>
   <flow-container-root-2521314 id="ROOT-2521314" style="">
      <vaadin-vertical-layout theme="padding spacing" id="mainview" style="width: 100%;">
         ...
         <vaadin-button tabindex="0" role="button">Add node</vaadin-button>
         <vaadin-horizontal-layout theme="spacing">
            <vaadin-upload target="VAADIN/dynamic/resource/3/c968ce30-4fc1-4e36-8d06-ddba9ecfbfd1/upload"></vaadin-upload>
            <vaadin-button disabled="" tabindex="-1" aria-disabled="true" role="button">Load data to XML</vaadin-button>
         </vaadin-horizontal-layout>
         ... 
         <div></div> <!-- Network must be here -->
         ...
      </vaadin-vertical-layout>
   </flow-container-root-2521314>
</div>