title: Error while using customElements.define in content script of a chrome extension
body: <p>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:</p>
  <pre><code>class MyWebComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: &quot;open&quot; });
    }
    connectedCallback() {
        this.shadowRoot.innerHTML = `
            &lt;p&gt;I'm in the Shadow Root!&lt;/p&gt;
        `;
    }
  }
  
  window.customElements.define(&quot;my-web-component&quot;, MyWebComponent);
  </code></pre>
  <p>But it is throwing the following error:
  <code>Cannot read properties of null (reading 'define')</code></p>
  <p>What is the issue here? how to overcome this error?</p>