Full screening slotted content

Tests of what happens when using the Full Screen API in Slotted content.

by David Iglesias

HTML

<div class='flutter'>
  <div class='content' slot='target'>
    Full screen me!
  </div>
</div>

<button id="fsc">
Full Screen content
</button>

<button id="fss">
Full Screen slot
</button>

CSS

* {
  font-family: sans-serif;
  font-size: 12px;
  box-sizing: border-box;
}

flcontent {
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.flutter {
  width: 200px;
  height: 200px;
  background: #eee;
  border: 1px solid black;
  display: block;
}

.content {
  background-color: #fabada;
  width: 100px;
  height: 24px;
}

JavaScript

// Create a Shadow DOM and inject a DIV, then attempt to call full-screen on it.

let fl = document.querySelector('.flutter');
// Create shadow DOM...

let shadow = fl.attachShadow({ mode: "open"});

// Attach a SLOT
let slot = document.createElement('slot');
slot.name = 'target';
shadow.appendChild(slot);

let content = document.querySelector('.content');
content.addEventListener('click', function(ev) {
  document.exitFullscreen();
})


let fsc = document.querySelector('#fsc');
fsc.addEventListener('click', function(ev) {
	content.requestFullscreen();
});

let fss = document.querySelector('#fss');
fss.addEventListener('click', function(ev) {
  slot.requestFullscreen();
});