これを実行するとエラーでした

const promises = [
    [Promise.resolve(1), Promise.resolve(2)],
    [Promise.resolve(3), Promise.resolve(4)],
]

promises.map(Promise.all)

Chrome では
「Promise.all called on non-object」

Firefox では
「Receiver of Promise.all call is not a non-null object」

Promise.all を関数として渡しているので内部的に呼び出されるときに Promise というオブジェクトのメソッドというコンテキストで呼び出されないからですが この制限があると

promises.map(x => Promise.all(x))

のように呼び出さないといけなくなって面倒なんですよね

昔は console.log も同じ問題があったのですが 結構前に解決されて

fetch("").then(x => x.text()).then(console.log)

みたいに then に直接渡すだけでも良くなりました

組み込み関数なら全てこういう風にしてほしいものです
this の考え方が関数渡しに適してないので this は消えてほしいです

自動で this を bind 済みにしてくれる記法ができればいいんですけどね

obj..method

が

obj.method.bind(obj)

と同じになるみたいな

カスタムエレメント中で render にこんなオプション付きで実行

    render() {
        return render(this.template, this.shadowRoot, { eventContext: this })
    }

eventContext: this を render の 3 つ目の引数に設定しておくと テンプレートの HTML に @XXXX で設定したリスナ実行時の this がそのカスタムエレメントになる
なにも設定しないと this はイベントが起きた要素

    get template() {
        return html`
            <div @click=${this.onClickDiv}>click me</div>
        `
    }

    onClickDiv(eve) {
        console.log(this)
    }

こう書いたときの this が他メソッドと同じようにカスタムエレメント自身なので見やすい

テンプレート側でこうも書けるけど見づらいし忘れがちなので render で設定するほうがおすすめ

html`<div @click=${this.onClickDiv.bind(this)}></div>`

この方法だと render のたびに bind で作った新しい関数を設定してるから毎回リスナを再設定することにもなるしね