Is possible to open file editor in my custom widget's specific DOM?

Hello Friends,

I have developed widget(let call it “MyWidget”) to render the first-level of theia tab on right panel(see the attached picture, the “Data Types, 数据_设备应用” was rendered by “MyWidget”).
When end-user open a specific python file in workspace for editing. I want to open the editor area in my custom widget (“MyWidget”) ,a specific DOM element, instead of theia default layout.

I used the "EditorManager.open(uri: URI, options?: EditorOpenerOptions): Promise " API to open the file, But how to open it on my widget?
I checked the “EditorOpenerOptions”, There’s a “ref” attribute will effect the render area of the editor, But I still cannot specific a “DOM” element container to render the editor.

	const script4CustomScript = new URI('file:///c%3A/dev/fs3/test/script/script4/custom_script.py');

// const myCustomWidget = new MyWidgetWidget()
const openerOptions = {
	widgetOptions :{
		ref : this.myWidgetWidget
	}
};

this.editorManager.open(script4CustomScript, openerOptions).then

Could someone give some insight?
Thanks!