How do I extract the input from a color picker custom element using Wix Velo?

I'm trying to get a colorpicker to work for a test project. I've made it so that end users are able to set the color picker value, but I'm unable to get the value of the color picker box from outside of the custom element. I've tried various ways to get the value but it doesn't print in Velo

This is the value I'm trying to capture:

https://i.stack.imgur.com/qWqUd.pngtax

This is the code for the custom element:

const createScript = () => {

const scriptElement = document.createElement('script');

scriptElement.src = "https://unpkg.com/vanilla-colorful?module";

scriptElement.defer = true;

scriptElement.async = true;

return scriptElement;

}

const createScript1 = () => {

const scriptElement1 = document.createElement('script');

scriptElement1.src = "https://cdn.skypack.dev/vanilla-colorful/rgba-color-picker.js";


scriptElement1.type = "module";

scriptElement1.defer = true;

scriptElement1.async = true;

return scriptElement1;

}

const createScript2 = () => {

const scriptElement2 = document.createElement('script');

scriptElement2.src = 'https://cdn.skypack.dev/vanilla-colorful';


scriptElement2.type = "module";

scriptElement2.defer = true;

scriptElement2.async = true;

return scriptElement2;

}

const createScript3 = () => {

const scriptElement3 = document.createElement('script');

scriptElement3.src = 'https://cdn.skypack.dev/vanilla-colorful/hex-input.js';


scriptElement3.type = "module";

scriptElement3.defer = true;

scriptElement3.async = true;

return scriptElement3;

}





class ColorfulImp extends HTMLElement {

    constructor() {

const template = document.createElement('template');
template.innerHTML = `
    <style>
        body {
            margin: 0;
            padding: 50px;
            font: normal 16px/1.4 "PT Mono", monospace;
        }

        hex-input::part(input) {
            display: block;
            box-sizing: border-box;
            width: 90px;
            margin: 20px 55px 0;
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #eee;
            outline: none;
            font: inherit;
            text-transform: uppercase;
            text-align: center;
        }

        hex-input::part(input):focus {
            border-color: #4298ef;
        }
    </style>


    
    <section>
    <hex-color-picker id="colorPick"class="custom-pointers"></hex-color-picker>
    
    <hex-input  id="colorInput"></hex-input>
        
    </section>


`




    super(); // always call super() first in the constructor.var script = document.createElement('script');
script.innerHTML = `<script src="https://unpkg.com/vanilla-colorful?module"></script>;`;
document.body.appendChild(script);

    //this.attachShadow({mode: 'open'});this.appendChild(createScript());
    this.appendChild(createScript1());
    this.appendChild(createScript2());
    this.appendChild(createScript3());
    this.appendChild(template.content.cloneNode(true));
    this.num = this.querySelector('hex-color-picker');
    this.num1 = this.querySelector('hex-input');
     //this.querySelector('hex-input').color = "fcba03";//this.num = input.color;// create custom eventsconst colorFound = new CustomEvent('color-found', {
  detail: {
    name: 'color'
  }
});

    
    }    
    connectedCallback() {

        const picker = this.querySelector('hex-color-picker');
        const input = this.querySelector('hex-input');
        //input.color = "fcba03";

        picker.addEventListener('color-changed', (event) => {
            input.color = event.detail.value;
            //input.color = num
                        

            
        });

        input.addEventListener('color-changed', (event) => {
            picker.color = event.detail.value;
            //picker.color = num1
        });         

  input.addEventListener('color-found', (e) => console.log(e.detail.value));
  input.dispatchEvent('color-changed');


    }  

  
  get num() { return this.querySelector('hex-color-picker').color }
  set num(val) {this.querySelector('hex-color-picker').color = val }

  get num1() { return this.querySelector('hex-input').color;  }
  set num1(val) { this.querySelector('hex-input').color  = val; }
 static get observedAttributes() {
    return ['num','num1'];
  }
  
  attributeChangedCallback(attr, oldVal, newVal) {
    if (oldVal === newVal) return; // nothing to do, no change
    switch (attr) {
      case 'num': this.num = newVal ?? 0; break;
      case 'num1': this.num = newVal ?? 1; break;

    }
    this.getElementById("colorPick").color = num
    this.getElementById("colorInput").color = num1

    
    }                 

             

  
}

window.customElements.define('color-ful-03', ColorfulImp);

and this is the code I put on the plain page in Velo:

$w('#colorPicker').on('color-changed', (event) => {
 
    console.log('The event triggered successfully.')
 
});

Any help is appreciated, this issue has me stumped