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?