Estoy desarrollando una extensión de Chrome para la que necesito implementar un shadowDOM en la página web. Aquí está el código que uso dentro del script de contenido:

 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);

Pero arroja el siguiente error: Cannot read properties of null (reading 'define')

Cuál es el problema aquí? ¿Cómo superar este error?