久々に WebComponents でクラスを使うとやっぱり思うのは継承の扱いづらさ
JavaScript に限らずクラス記法で書ける全言語に言えそうですが 親クラスのメソッドの呼び出しを忘れます
コンストラクタは忘れるとエラーが出ますが それでも頻繁にエラーになってます
必須ならもう自動で呼び出せばいいのに

それに加えて通常のメソッドでもありえます
こっちは呼び出さない選択ができるのでエラーにならないです
うまく動いてないと思ったら親メソッドの呼び出し忘れということが結構あります

作り上 継承する子クラスで定義する処理は親クラスの処理に追加するもので 置き換えではないことがほとんどです
自動で呼び出すように親クラス側で指定できればいいですが そういうものはないです
なのでメソッドを別にして 親クラス側では何もしないメソッドのみ子クラスで上書きするようにして親クラスのメソッドを呼び出す必要はないようにするのがいいかなと思ったのですが これはこれでメソッドが増えて管理し辛い感もあります

class A {
	foo() {
		// important something
	}
}

class B extends A {
	foo() {
		super.foo()

		// ...
	}
}

というのがあって B の foo で A の foo を呼び出さないとけない場合 super.foo() を書かなくていいように

class A {
	publicFoo() {
		// important something

		this.foo()
	}

	foo() {
		// empty
	}
}

class B extends A {
	foo() {
		// ...
	}
}

とします
foo の代わりに別のメソッド publicFoo を呼び出すようにして そこで必須な処理をしてから foo を呼び出すようにします
A の foo メソッドは何もせず継承するクラスで中身を書きます

foo メソッドでは親クラスの関数を呼び出さないといけないことはないので 自身の処理だけ書けばいいです
ただ B クラス的には foo を実装してるので 別のインスタンスを呼び出すときなどは publicFoo ではなく foo を呼び出してしまいがちです
またコールスタック的に長くなるのでデバッグ時に少し不便になります
慣れないとどっちがどっちか分かりづらくなることもあります
そんな感じで これがベストと言う感じにはなってません

メソッド自体は foo のままにして super.foo を呼び出す処理を追加と考えてみてもこんな感じで 変な書き方になります

class X {
	foo() {
		// important something
	}

	extendFoo(fn) {
		const foo = this.constructor.prototype.foo
		return function (...args) {
			foo.apply(this, args)
			return fn.apply(this, args)
		}
	}
}

class Y extends X {
	foo = this.extendFoo(function() {
		// ...
	})
}

メソッドは this を使うのでアロー関数でなく function を使わないといけないです
それに特殊なので面倒です
それに こういう書き方で foo を定義しないといけないとおぼえてないと普通に書いて同じ結果になります
定義方法自体が変わってるので コピペだとミスしづらいかもですが さっきの方法のほうがマシだった気がします