HTMX + Webcomponents 2 levels

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="module">
		import "./main.js";
	</script>
	<script src="https://unpkg.com/[email protected]"
		integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq"
		crossorigin="anonymous"></script>
	<title>Document</title>
</head>

<body onload="test()">
	<main>

	</main>
</body>

</html>

//main.js
import Component1 from './component_1.js';

window.test = () => {
	const main = document.querySelector('main');
	main.appendChild(new Component1());
}

//component_1.js
import Component2 from './component_2.js';

export default class Component1 extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		const shadow = this.attachShadow({ mode: 'open' });

		const h1 = document.createElement('h1');
		h1.textContent = 'Level 1';
		shadow.appendChild(h1);

		const button = document.createElement('button');
		button.textContent = 'Level 1';
		button.setAttribute('hx-get', '/test');
		shadow.appendChild(button);

		const level2 = new Component2();
		shadow.appendChild(level2);

		htmx.process(shadow);
	}
}
customElements.define('component-1', Component1);

//component_2.js
export default class Component2 extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		const shadow = this.attachShadow({ mode: 'open' });

		const h1 = document.createElement('h1');
		h1.textContent = 'Level 2';
		shadow.appendChild(h1);

		const button = document.createElement('button');
		button.textContent = 'Level 2';
		button.setAttribute('hx-get', '/test');
		shadow.appendChild(button);

		htmx.process(shadow);
	}
}
customElements.define('component-2', Component2);

//test
Potato