Illegal Invocation when calling super methods of subclass ancestors

[shennan]

It seems the context of the object is lost somewhere in calling an ancestor's methods.

class A extends HTMLElement {
  empty () {
    while (this.hasChildNodes()) {
      this.removeChild(this.lastChild)
    }
  }
}
class B extends A {
  constructor () {
    super()
    this.empty()
  }
}

customElements.define('b-element', B)

fixBabelClass(A)
fixBabelClass(B)

let b = new B()

As an illustration, note how Chrome prints my b custom element when transpiling/fixing-class, as opposed to native ES6 Chrome.

Babel + Fix-Babel-Class

Native ES6

[WebReflection]

try this instead:

class B extends A {
  constructor () {
    super().empty();
  }
}

[WebReflection]

actually, no.

There are few things here that could go wrong.

To start with the first one, you cannot patch after registering the class, it's impossible to overwrite the registry.

this is upside down

customElements.define('b-element', B)

fixBabelClass(A)
fixBabelClass(B)

do this instead

fixBabelClass(A)
fixBabelClass(B)

customElements.define('b-element', B)

Secondly, if you are not using a polyfill upfront nothing will ever work.

You need document-register-element or any other polyfill that works to use Babel and custom elements because these need to patch HTMLElement.

If you have done both things and you still have problems please let me know.