I'm developing a chrome extenion for which I need to implement a shadowDOM into the web page. Here is the code I use inside the content script:

class MyWebComponent extends HTMLElement {
  constructor() {
      super();
      this.attachShadow({ mode: "open" });
  }
  connectedCallback() {
      this.shadowRoot.innerHTML = `
          <p>I'm in the Shadow Root!</p>
      `;
  }
}

window.customElements.define("my-web-component", MyWebComponent);

But it is throwing the following error: Cannot read properties of null (reading 'define')

What is the issue here? how to overcome this error?