import { createRoot } from 'react-dom/client';
import { App } from './App';
import React from 'react';
import * as css from './styles/index.css';

export class DocRoot extends HTMLElement {
	private _uiContainer: HTMLDivElement = document.createElement( 'div' );
	// private _app: App;
	constructor() {
		super();
		const styles = new CSSStyleSheet();
		const shadowRoot = this.attachShadow( { mode: 'closed' } );
		const uiRoot = createRoot( this._uiContainer );
		shadowRoot.append( this._uiContainer );
		styles.replace( css.default.toString() );
		// this._app = new App();
		shadowRoot.adoptedStyleSheets = [ styles ];
		uiRoot.render( <App /> );
	}
}