Vanilla JS in Vite can not detect web components

I’ve used npm create vite to create a vanilla JS project. I want to implement web components. This is my instruction as follow:

export class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const template = document.getElementById(
      "headerComponent"
    ) as HTMLTemplateElement;
    if (template) {
      const content = template.content.cloneNode(true);
      this?.appendChild(content);
    }
  }
}

customElements.define("my-header", Header);

I have imported this class in main.ts:

import { Header } from "./components/Header";

And this is index.html:

<template id="headerComponent">
  <h1>Header</h1>
  <p>Header is a component.</p>
</template>

<my-header></my-header>

But after opening the console, nothing is being shown in <my-header></my-header> tag.

What is the problem? What should I do?

Any help will be appreciated!