requestFullscreen(): How to make dom Fullscreen

[Document.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement) / [ShadowRoot.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/fullscreenElement)

The fullscreenElement property tells you the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that's currently being displayed in fullscreen mode on the DOM (or shadow DOM). If this is null, the document (or shadow DOM) is not in fullscreen mode.

[document.fullscreenEnabled](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled)

The fullscreenEnabled property tells you whether or not it is possible to engage fullscreen mode. This is false if fullscreen mode is not available for any reason (such as the "fullscreen" feature not being allowed, or fullscreen mode not being supported).

requestFullscreen

You can set a dom fullscreen

export const openFullscreen = (elem) => {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) {
        /* Safari */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
        /* IE11 */
        elem.msRequestFullscreen();
    }
};

Exit fullScreen: Document

document.exitFullscreen();

CSS &:fullscreen

&:fullscreen {
  display: block;
}

Check if there is an element, fullScreen

document.fullscreenElement;

Check whether if "fullscreen" is enabled or allowed

document.fullscreenEnabled

fullscreen Events

fullscreenchange

Sent to an Element when it transitions into or out of fullscreen mode.

fullscreenerror

Sent to an Element if an error occurs while attempting to switch it into or out of fullscreen mode.

MDN requestFullScreen