Me gustaría establecer el espacio de nombres html para el componente en la clase Base, pero parece que no puede hacer NavBar.ns sin crear una instancia, lo que hace que el componente web no se represente.
import Base from './Base.js'; class NavBar extends Base { constructor() { super(); } connectedCallback() { console.log('ns', this.ns); this.innerHTML = '...'; } } console.log('ns2', NavBar.ns); // undefined here customElements.define(`${NavBar.ns}-navbar`, NavBar);Base.js:
class Base extends HTMLElement { constructor() { super(); this.ns = 'wce'; } } export default Base;No puede acceder a Navbar.ns porque no está creando una instancia (objeto) de Navbar, y this.ns se aplicará para cada new llamada a navbar, por ejemplo, const navbar = new Navbar(); navbar.ns; // <-- wce . No está creando una instancia de Navbar , por lo que puede crear un campo estático , lo que le permite acceder a un campo sin crear una instancia de clase.
En base.js :
class Base extends HTMLElement { constructor() { super(); } static get ns() { return 'wce'; } } export default Base; static nos permite acceder a campos de clase sin, y solo sin crear una new instancia.
Ahora, cuando llame a NavBar.ns , devolverá "wce" usando un captador .
Sin embargo, también quería poder acceder a .ns cuando ( customElements.define ) crea una nueva instancia. Tendrás que establecer una adición a this llamada:
class Base extends HTMLElement { constructor() { super(); this.ns = 'hello'; } static get ns() { return 'world'; } } export default Base;En su caso, puede cambiar tanto "hola" como "mundo" a "wce" si desea que "funcionen de la misma manera".
Ahora, supongamos que desea acceder a ns , si no está creando una instancia, haría lo siguiente:
NavBar.ns; // <-- "world" Pero si estaba creando una instancia (como en customElements.define ), usa el operador new para acceder a this.ns :
const navbar = new NavBar(); navbar.ns; // "hello" (Utilicé "hola" y "mundo" en lugar de "wce" solo para la ilustración).
Ahora, con el código agregado, podría usarlo como en su ejemplo:
/* "wce-navbar" */ customElements.define(`${NavBar.ns}-navbar`, NavBar);