How :fullscreen CSS pseudo class works in shadow dom? #149
Comments
|
Per "element is a shadow host and the result of retargeting its node document’s fullscreen element against element is element" in https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class both the video element and the my-web-component element should match the :fullscreen pseudo class. However, this isn't implemented in Chromium. Which behavior are you actually seeing? |
|
I only see video element matching the |
|
OK, that's not too surprising. It's probably not too difficult to match the spec here, but it might require an extra flag on all elements. Haven't tried to implement it myself thought, could be trivial. |
|
Following discussions at https://groups.google.com/a/chromium.org/d/msg/blink-dev/X-qPSmdSR_g/mRKxdlVICgAJ and WICG/webcomponents#804, I believe the fullscreen API spec should removes retargeting for the |
|
@beaufortfrancois that would follow w3c/picture-in-picture#126, right? There's also retargeting in https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement, what should happen to that? |
|
@foolip @beaufortfrancois Has any progress been made on this issue? Removing retargeting would simplify implementations. |
|
Picture-in-Picture spec has removed retargeting. I didn't follow up with the current state of Fullscreen API. |
|
Based on what @rniwa just wrote in WICG/webcomponents#804 (comment) it seems like that change to picutre-in-picture was wrong and we shouldn't be changing |
|
I wrote this test to see if anyone has implemented the second condition (element is a shadow host and the result of retargeting its node document’s fullscreen element against element is element) of https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class yet: <!DOCTYPE html>
<div id="host"></div>
<button onclick="test()">button to go fullscreen</button>
<script>
var root = host.attachShadow({mode: 'open'});
root.innerHTML = '<div>div that will go fullscreen</div>';
function test() {
var el = root.firstChild;
console.log(el)
if (el.requestFullscreen) {
el.requestFullscreen();
document.addEventListener('fullscreenchange', () => {
const hostMatches = host.matches(':fullscreen');
console.log('host matches: ' + hostMatches);
document.exitFullscreen();
}, { once: true });
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
document.addEventListener('webkitfullscreenchange', () => {
var hostMatches = host.matches(':-webkit-full-screen');
console.log('host matches: ' + hostMatches);
document.webkitExitFullscreen();
}, { once: true });
}
};
</script>Chrome, Firefox and Safari all log "host matches: false". I suspected WebKit might have an implementation, and it does: But this isn't shipping yet. |
|
:fullscreen should follow whatever behavior :focus has. |
|
It looks like the WebKit change is on its way to Safari stable. I've tested #149 (comment) in Safari 16.3 which logs "host matches: false", but in STP 164 I get "host matches: true". |
After reading the spec, I'm still not sure how CSS pseudo-class
:fullscreenworks in the context of shadow dom. See example below:What happens after
await video.requestFullscreen()?<video>element color green?<my-web-component>element color blue?Note that I wasn't able to find web platform tests for this.
The text was updated successfully, but these errors were encountered: