My custom component

class MyElement {

    onRender() {
        return /*html*/`
            <div id="firstName"></div>
            <div id="lastName"></div>
        `;
    }

    onInit() {
        this.firstName = this.get('#firstName');
        this.lastName = this.get('#lastName');
    }

    onUpdate(state) {
        this.firstName.innerText = state.firstName;
        this.lastName.innerText = state.lastName;
    }

}

class MyParent {

    onRender() {
        return /*html*/`
            <div id="myElement"></div>
            <button id="btnChangeName">Change name</button>
            <input id="txtFirstName">
        `;
    }

    onInit() {
        this.myElement = this.get('#myElement');
        this.btnChangeName = this.get('#btnChangeName');
        this.txtFirstName = this.get('#txtFirstName');

        const myElement = new MyElement();

        myElement.attachTo(this.myElement);
        myElement.setState({ firstName: 'Pero', lastName: 'Perić' });

        this.btnChangeName.addEventListener('click', () => this.changeName());
    }

    onUpdate(state) {

    }

    changeName() {
        const firstName = this.txtFirstName.value;
        this.myElement.setState({ firstName });
    }

}