JavaScript Fullscreen: fullscreenEnabled is always false and fullscreenElement is not the element requested on

There is a [Lit] WebComponent that I call requestFullscreen() on (this.requestFullscreen()). It’s a toggle, so when the same action is clicked again I check for if (document.fullscreenElement === this), since this is the element that requested fullscreen.

However, document.fullscreenElement is actually the next highest ancestor WebComponent, not even any of the native HTML ancestors between these two WebComponents. So I decided to use document.fullscreenEnabled, just to see if it was and toggle fullscreen off. Turns out, document.fullscreenEnabled is always false.

For now my workaround, because document.fullscreenElement is either that ancestor or null, I am just checking if (!!document.fullscreenElement). This is kinda kludgy, IMO, but works.

Why is document.fullscreenEnabled always false and document.fullscreenElement not this when I called this.requestFullscreen() to invoke fullscreen?