Hi, I recently stumbled upon the relatively new display-mode: fullscreen css selector and it seems to work very nicely, accurately describing the fullscreen state even when the fullscreen isn't initiated by the current document's scripts (which doesn't work at the moment) - e.g. user presses f11 or document is iframed and externally fullscreened.

Example:

let matchedFullscreenMedia = window.matchMedia('(display-mode: fullscreen)').matches
window.matchMedia('(display-mode: fullscreen)').addEventListener('change', ({ matches }) => {
  matchedFullscreenMedia = matches
});

I've tested in chrome and it works when the user presses f11 or the document is iframed+externally fullscreened and it seems to be well supported (https://caniuse.com/?search=display-mode)

I'm wondering if there are any pitfalls in using this?