◆ テキストの変更とマーカーの削除で地図まで消える
◆ ウィンドウリサイズで直るのでブラウザの問題?
◆ flexbox のところで height 指定すれば起きなくなった

なぜか地図が消える

leaftlet を使って地図を表示するページがあります

<!DOCTYPE html>
<meta charset="utf-8" />

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>

<script type="module">
import { LitElement, html, css } from "https://unpkg.com/lit-element@2.2.1/lit-element.js?module"

customElements.define("something-wrong", class extends LitElement {
static styles = css`
:host {
width: 800px;
height: 400px;
display: flex;
border: 1px solid purple;
}
left-panel {
width: 320px;
border-right: 1px solid #bbb;
}
.main {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
right-panel {
flex: 1 1 auto;
}
`

constructor() {
super()
this.flag = true
}

toggle = flag => {
this.flag = flag
this.requestUpdate()
}

render(x) {
return html`
<left-panel .toggle=${this.toggle} .flag=${this.flag}></left-panel>
<div class="main">
<right-panel .flag=${this.flag}></right-panel>
</div>
`
}
})

customElements.define("left-panel", class extends LitElement {
static properties = {
toggle: { type: Function },
flag: { type: Boolean }
}

render() {
return html`
<div>
<input type="checkbox" checked @change=${eve => this.toggle(eve.target.checked)}>
<div>${this.flag ? "ON": "OFF"}</div>
</div>
`
}
})

customElements.define("right-panel", class extends LitElement {
static styles = css`
#map {
width: 100%;
height: 100%;
}
`

static properties = {
flag: { type: Boolean },
}

marker = null

render() {
return html`
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<div id="map"></div>
`
}

firstUpdated() {
const map = L.map(this.shadowRoot.getElementById("map"), { center: [35, 135], zoom: 7 })

L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
attribution: `<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>`
}).addTo(map)

this.map = map
}

updated() {
if(!this.flag && this.marker) {
this.marker.remove()
this.marker = null
}
if(this.flag && !this.marker){
const marker = L.marker([35, 135]).addTo(this.map)
this.marker = marker
}
}
})

LitElement.render(html`<something-wrong></something-wrong>`, document.body, { scopeName: "root" })
</script>

デフォルトでは flag が true で左側に flag の状態を表示して 右側には地図を表示しています
左側のチェックボックスを切り替えると flag が切り替わって OFF になると左側の状態の表示と右側の地図のマーカーが消えます

……そのはずなのですが なぜかマーカーを非表示にすると地図まで見えなくなります
ウィンドウをちょっとでもリサイズするとすぐに表示されるので表示系のバグのようです

マーカーを消したら地図も消えるというだけなら leaflet のバグみたいだね でおしまいなのですが左側の

<div>${this.flag ? "ON": "OFF"}</div>

の部分とも関連していて ここを可変にしなければ地図は正常に表示されたままです
なぜ左半分のテキストを置き換えるだけで右側の地図まで影響するのかはよくわかってません

ただの HTML と JavaScript に

上の例では WebComponents と LitElement を使っています
こういうのを使ってるとなにかおかしいときにどこがおかしいか調べづらいです
あちこち影響してくるので 関連する部分以外を取り除きづらいです
これでもけっこう関係ないところを削ったのですがまだコード量も多いです
特に 一箇所値を変えると連動する部分全部に影響するのでどこが原因かわかりづらいです
ブラウザ側の DOM 処理に問題はない全体なので内部で DOM 操作が色々行われてますからね
そのせいで 原因がわかっても対処できるかにも不安があります

そういうこともあって単純な JavaScript で置き換えてみました

<!DOCTYPE html>
<meta charset="utf-8" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>

<style>
body {
width: 800px;
height: 400px;
display: flex;
border: 1px solid purple;
}

.left-panel {
width: 320px;
border-right: 1px solid #bbb;
}

.main {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}

.right-panel {
flex: 1 1 auto;
}

#map {
width: 100%;
height: 100%;
}
</style>

<div class="left-panel">
<div>
<input type="checkbox" checked id="check">
<div id="flag">ON</div>
</div>
</div>
<div class="main">
<div class="right-panel">
<div id="map"></div>
</div>
</div>

<script type="module">
const flag = document.getElementById("flag")

const map = L.map(document.getElementById("map"), { center: [35, 135], zoom: 7 })
const marker = L.marker([35, 135]).addTo(map)

L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
attribution: `<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>`
}).addTo(map)

document.getElementById("check").onchange = eve => {
if (eve.target.checked) {
flag.textContent = "ON"
marker.addTo(map)
} else {
flag.textContent = "OFF"
marker.remove()
}
}
</script>

これでも再現できます
やっぱり flag を表示する div の ON と OFF の切り替えをなくすと発生しないです
textContent を変えてるだけなのですけど

調べようにも debugger を使って実行すると再現しないので leaflet の非同期処理の都合なのかブラウザ側の問題なのかはわかりませんでした
リサイズして直るというあたりブラウザの表示の問題な気がしますが リサイズで leaflet 側が何か処理した結果直ってる可能性もあります

ほかブラウザも試してみたら Vivaldi (Chrome76 相当)だと同じく発生して Firefox70 だと発生しませんでした
やっぱりブラウザの表示問題な気がします

【追記】対処方法

CSS の flexbox が怪しいかなと思っていじってたら対処方法が見つかりました
main の block に 「height: 400px」 を指定すると地図が消えませんでした
いつまで経っても Chrome の flexbox はバグが多い気がします