Cannot get my Javascript objects to load into post edit page

I am trying to make a plugin on the edit-post page in WordPress. Basically, I’m have written an custom HTML element that uses clicking it grabs data in other custom elements that do show up, and logs to the console, as well as fills values in instances of objects that clicking it creates. But the element does not show up in the meta box at all; the tag shows up in the DOM tree, but thats it. Here’s what I got:

Here is submitButton.js – a button that gets data from a text box and a number box and passes it to a ControllerObject instance. It imports the class ModelObject as well as a function from a javascript file that only has a function

import ModelObject from '../model/modelobject.js'
export var c = new ModelObject();

var theJson;
var data;

import {CO} from '../Controller/controllerobject.js';

export class SubmitButton extends HTMLElement{

    constructor(){
        super();            
    }

    connectedCallback(){
        var data;
        const submitbutton = document.createElement('button');
        submitbutton.setAttribute('type','submit');
        submitbutton.setAttribute('id','submitButton');
        submitbutton.innerHTML = "Submit Test";

        submitbutton.addEventListener('click',this.gatherBucketData.bind(this));
        submitbutton.addEventListener('click',()=>{
            document.getElementsByName('URL box')[0].value = ""
            var buckets = document.getElementById("buckets").children;
            for(var i = 0; i < buckets.length; i++){
                document.getElementById("buckets").children[i].children[0].childNodes[0].value = '';
                document.getElementById("buckets").children[i].children[0].childNodes[1].value = 1;     
            }

        });
        submitbutton.addEventListener('click',()=>{
            CO.updateModelData();
            grabExperimentForSending();
        })
        this.appendChild(submitbutton);
    }
    gatherBucketData(){
        var enteredURL = document.getElementsByName('URL box')[0].value;
        var bucketAmount = document.getElementById('buckets').children.length;
        var bucketObject = {
            articleURL : enteredURL,
            headlineBuckets: {}
        }
        var individualBuckets = [];
        for (var i = 0; i < bucketAmount; i++){
            individualBuckets[i] = {
                bucket: document.getElementById("buckets").children[i].children[0].childNodes[0].value,
                weight: document.getElementById("buckets").children[i].children[0].childNodes[1].value
            }
        }
        bucketObject.headlineBuckets = individualBuckets;
        var bucketObjectJSON = JSON.stringify(bucketObject,null,2);
        theJson = bucketObjectJSON;
        return theJson;
    }

}
export {theJson, CO};
customElements.define('submit-button', SubmitButton)

Here is modelobject.js

 class ModelObject{
    constructor(){
        this.exps = [];
    }    
    addExp(exp){
        this.exps.push(exp);
    }    
    get showData(){
        return this.exps;
    }    
}     
export default ModelObject;

Here is controllerobject.js, which is to update the model

import ModelObject from '../model/modelobject.js'

import {c} from '../submitButton.js';
import {theJson} from '../submitButton.js';

class ControllerObject{

    constructor(){

    }
    updateModelData(){
        var explist = document.getElementById('ExperimentList'); 
        var newExpToAdd = document.createElement("li");
        c.addExp(theJson); 
        newExpToAdd.appendChild(document.createTextNode(c.showData)); 
        explist.appendChild(newExpToAdd)
        console.log(c.showData);
    }

}

export var CO = new ControllerObject();

Inside my metabox, the files whose custom HTML elements DO show up are:

class NewBucket extends HTMLElement{

    constructor(){
        super();
    }

    connectedCallback(){
        const addBucketButton = document.createElement('button');
        addBucketButton.setAttribute('type','button');
        addBucketButton.innerHTML = "Add Bucket";
        addBucketButton.addEventListener("click", this.newbucketonclick.bind(this))
        this.appendChild(addBucketButton);
    }

    newbucketonclick(){
        var bucketlist = document.getElementById("buckets");
        var newBucket = document.createElement('experiment-bucket')
        bucketlist.appendChild(newBucket);
    }

}

customElements.define('plus-button', NewBucket);

class ArticleLink extends HTMLElement{

    constructor(){
        super();
    }

    connectedCallback(){
        const addr = document.createElement('input');
        addr.setAttribute('type','text');
        addr.setAttribute('name',<code>URL box</code>);
        addr.setAttribute('placeholder','Article URL');
        this.appendChild(addr)
    }
}
customElements.define('article-link', ArticleLink);

class ExperBucket extends HTMLElement{

    constructor() {
      super();      
    }

    connectedCallback(){
      const li = document.createElement('li');

      const newHL = document.createElement('input');
      newHL.setAttribute('type','text');
      newHL.setAttribute('name',<code>title box</code>);
      newHL.setAttribute('placeholder',<code>Test Headline</code>);

      const deleteButton = document.createElement('button');
      deleteButton.setAttribute('type','button');
      deleteButton.innerHTML = "-";
      deleteButton.addEventListener("click",function(){
        li.parentNode.remove();
      })

      const amount = document.createElement('input');
      amount.setAttribute('type','number');
      amount.setAttribute('name',<code>weightnum</code>);
      amount.setAttribute('min',1);
      amount.setAttribute('max',10);
      amount.setAttribute('value',1);

      li.appendChild(newHL);
      li.appendChild(amount);
      li.appendChild(deleteButton);

      this.appendChild(li);
    }
  }
customElements.define('experiment-bucket',ExperBucket);

As of now, the HTML elements tree is:

<ul id="buckets">
 <experiment-bucket></experiment-bucket>
 </ul>
 <plus-button></plus-button>
 <br>
<submit-button></submit-button> //THIS needs to show up