define attachChild method in component

web/static/src/ts/core/component.ts

@@ -121,6 +121,23 @@ export class Component<
   // Public
   //--------------------------------------------------------------------------
 
+  /**
+   * Attach a child widget to a given html element
+   *
+   * This is most of the time not necessary, since widgets should primarily be
+   * created/managed with the t-widget directive in a qweb template.  However,
+   * for the cases where we need more control, this method will do what is
+   * necessary to make sure all the proper hooks are called (for example,
+   * mounted/willUnmount)
+   *
+   * Note that this method makes a few assumptions:
+   * - the child widget is indeed a child of the current widget
+   * - the target is inside the dom of the current widget (typically a ref)
+   */
+  attachChild(child: Component<T, any, any>, target: HTMLElement) {
+    target.appendChild(child.el!);
+    child.__mount();
+  }
   async mount(target: HTMLElement): Promise<void> {
     const vnode = await this._start();
     if (this.__widget__.isDestroyed) {

web/static/src/ts/ui/root.ts

@@ -53,9 +53,7 @@ export class Root extends Widget<Store, State> {
   async applyController(controller: Controller) {
     const widget = await controller.create(this);
     if (widget) {
-      // to do: call some public method of widget instead...
-      (<HTMLElement>this.refs.content).appendChild(widget.el!);
-      widget.__mount();
+      this.attachChild(widget, <HTMLElement>this.refs.content);
       widget.el!.classList.add("o_action_controller");
       this.store.activateController(controller);
     }