How do I access a property on a base class that is for a web component?-CodePudding

I would like to set the html namespace for the component on the Base class, but it seems you can't do NavBar.ns without creating an instance, which makes the web component not render.

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;

CodePudding user response：

You can't access Navbar.ns because you aren't creating an instance (object) of Navbar, and this.ns will be applied for each new call to navbar, e.g. const navbar = new Navbar(); navbar.ns; // <-- wce. You aren't creating an instance of Navbar, so you can create a static field, which allows you to access a field without creating a class instance.

In base.js:

class Base extends HTMLElement {
  constructor() {
    super();
  }
  static get ns() {
    return 'wce';
  }
}

export default Base;

static allows us to access class fields without, and only without creating a new instance.
Now, when you call NavBar.ns it will return "wce" using a getter.

However, you also wanted to be able to access .ns when you (customElements.define) create a new instance. You'll have to set an addition this call:

class Base extends HTMLElement {
  constructor() {
    super();
    this.ns = 'hello';
  }
  static get ns() {
    return 'world';
  }
}

export default Base;

In your case you can change both "hello" and "world" to "wce" if you want them to "work the same way."

Now, let's say you want to access ns, if you aren't creating an instance you would do:

NavBar.ns; // <-- "world"

But if you were creating an instance (like in customElements.define), you use the new operator to access this.ns:

const navbar = new NavBar();
navbar.ns; // "hello"

(I used "hello" and "world" instead of "wce" just for the illustration.)
Now with the added code you could use it as in your example:

                       /*  "wce-navbar"  */
customElements.define(`${NavBar.ns}-navbar`, NavBar);

Some docs about static.