Custom web Component forced render

Question

import ComponentFactoryInstance from "../../ui/componentFactory";
import notifier from "../../utils/notifier";


export default class AppUiComponent {

  constructor() {

  }

  static build() {

    const appRoot = document.createElement('div');

    const toolBar = ComponentFactoryInstance.create('girovo-tool-bar');

    const toolBarEditingPan = document.createElement("div");

    toolBarEditingPan.setAttribute("style", "display:flex;");

    const _toolBar = toolBarEditingPan.appendChild(toolBar)

    notifier.subscribe("build_tool_ui", data => {

      (_toolBar as iToolBar).buildTool({icon: data!.icon});

      //                    or
      // (toolBar as iToolBar).buildTool({icon: data!.icon});
      
    });
      appRoot.appendChild(toolBarEditingPan)
      return appRoot
  }

}

The provided code defines a class that includes a build method. Within this method, a component factory class is employed to generate a new instance of a specific custom web component. This instance is then appended to the DOM, and concurrently, modifications are applied to the custom component by adding children to it.

However, there is an issue as it appears challenging to obtain the precise reference to the created component. While appending a child does not reflect in the DOM, console logging reveals the component. Furthermore, the logged custom component possesses a distinct _id property compared to the component rendered in the DOM. This inconsistency is observed when using a reference to the component after it has been appended to the DOM, making it seem like a different instance is being worked with. The concern is how to ensure the utilization of the same instance.

To address this challenge, it is essential to ensure that the reference to the custom component is correctly captured after it has been appended to the DOM. Confirm that the reference used for subsequent manipulations, such as adding children, corresponds to the instance actually rendered in the DOM. Additionally, ensure that any asynchronous operations or updates to the component's state are properly handled to maintain synchronization between the instance and its representation in the DOM. for clarification this my code for the custom component

import ComponentFactoryInstance from "./componentFactory";
import idGenerator from "../utils/idGenerator";




export default class ToolBar extends HTMLElement {

  shadow: ShadowRoot
  _id: string | void
  parent: any

  constructor() {

    super();

    this._id = idGenerator().next().value;
    
    this.shadow = this.attachShadow({ mode: "open" });

  }

  connectedCallback() {

  }

  buildTool(toolData: Record<string, any>){

    const tool = ComponentFactoryInstance.create("girovo-toolicon", {
      width: "25px",
      height: "25px",
      src: toolData.icon
    })

    this.shadow.appendChild(tool)

  }
  
}

when logging the component inside the connectedCallback method