This feature is not Baseline because it does not work in some of the most widely-used browsers.
The fullscreenElement read-only property of the ShadowRoot interface returns the element within the shadow tree that is currently displayed in full screen.
The Element which is currently is displayed in full screen mode, or null if there is no full screen element.
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let fullscreenElem = shadow.fullscreenElement;
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
fullscreenElement |
71 | 79 | 6463 | 58 | 16.4 | 71 | 6463 | 50 | 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."] |
10.0 | 71 | 16.4["Only available on iPad, not on iPhone.", "Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games."] |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/fullscreenElement