◆ :not(:defined) で未定義のものを強調表示
◆ タグ名の入力ミスや アップグレードできてないカスタム要素がひと目で分かる

このスタイルを開発中に入れておくと便利かもしれません

:not(:defined) {
border: 10px double red;
display: block !important;
}
:not(:defined)::before {
content: "NOT DEFINED ELEMENT";
display: block !important;
font-weight: 900;
font-size: 40px;
}

注目するのは「:defined」です
これは定義済みの要素に当てはまります
標準のタグ div や h1 などに加えて customElements.define で定義したものも定義済みになります

:not(:defined) は未定義のものにマッチできるので タイプミスなどでおかしなタグ名になっていたり import や実装のミスでカスタム要素が定義できてない場合にマッチします

標準タグではあまりないのですが WebComponents で作ってるとカスタム要素周りでおかしいと思ったら未定義のままになってたというのはよくあるものなのでそれが視覚的にわかるのは結構助かります
コピペした結果タグ名を変え忘れてたり import 漏れだったり constructor に super() 書いてなくてエラーだったり

スタイルの詳細は目立たせるだけの目的なので このままである必要はないです
display: none になってると気づけないので強制的に表示してボーダーもつけて 中身が空だと分かりづらいので ::before で NOT DEFINED ELEMENT という文字を表示しています
多くの場合 これが出ると画面が崩れると思いますが 出てるのは実装ミスがある状態なので壊れても問題ないはずです

サンプル

foo-bar は定義済みで foo-baz は未定義です

<!doctype html>

<style>
:not(:defined) {
border: 10px double red;
display: block !important;
}
:not(:defined)::before {
content: "NOT DEFINED ELEMENT";
display: block;
font-weight: 900;
font-size: 40px;
}
</style>

<div>
<foo-bar>
<p>This is a child of foo-bar element.</p>
</foo-bar>
<foo-baz>
<p>This is a child of foo-baz element.</p>
</foo-baz>
</div>

<script>
customElements.define("foo-bar", class extends HTMLElement {
constructor() {
super()
this.attachShadow({mode: "open"}).innerHTML = `
<div>
<h1>FOO-BAR ELEMENT</h1>
<slot></slot>
</div>
`
}
})
</script>