入力系のコンポーネントを WebComponent で作ってるときの change などのイベント
change イベントの場合は event.composed が false なので内部の input などを更新してもイベントは ShadowRoot で止まる
コンポーネント外で検知できないので 必要なら自分でイベントを起こす

this.dispatchEvent(new Event("change"))

input イベントの場合は event.composed が true なので ShadowRoot で止まらず window まで伝わる
入力途中の無効な状態でイベントを伝えたくないなら 自分で伝播を止める必要あり

this.shadowRoot.addEventListener("input", (eve) => {
	eve.stopPropagation()
})

あとは change のように自分でイベントを起こす

全部伝えてもいいかもしれないけど input の date を参考にすると 有効な状態になるまでは input イベントは起きない
未入力状態で 年だけ埋めても input イベントは起きない
年月日全部埋めてはじめて起きる

devtools の設定を開いて (F1 キーを押すかヘッダ右の歯車アイコン) Preferences ページの Elements セクションにある「Show user agent shadow DOM」のチェックを付ける

適当なページの video タグなどを見ると自作の ShadowDOM と同じように ShadowDOM の中が見える