emilio/frame.html

## frame.html
<!doctype html>
<div id="host" style="overflow: hidden">
  <iframe slot="first" src="https://example.com" id="theframe"></iframe>
</div>
<button onclick="theframe.setAttribute('slot', theframe.getAttribute('slot') == 'first' ? 'second' : 'first')">
  Click to move the frame around, hopefully without reloading.
</button>
<script>
  host.attachShadow({ mode: "open" }).innerHTML = `
    <style>
      div {
        width: 50%;
        border: 2px solid;
        float: left;
      }
      #first { background: blue }
      #second { background: purple }
    </style>
    <div id="first">
      <slot name="first">Fallback 1</slot>
    </div>
    <div id="second">
      <slot name="second">Fallback 2</slot>
    </div>
  `;
</script>
	<!doctype html>
	<div id="host" style="overflow: hidden">
	<iframe slot="first" src="https://example.com" id="theframe"></iframe>
	</div>
	<button onclick="theframe.setAttribute('slot', theframe.getAttribute('slot') == 'first' ? 'second' : 'first')">
	Click to move the frame around, hopefully without reloading.
	</button>
	<script>
	host.attachShadow({ mode: "open" }).innerHTML = `
	<style>
	div {
	width: 50%;
	border: 2px solid;
	float: left;
	}
	#first { background: blue }
	#second { background: purple }
	</style>
	<div id="first">
	<slot name="first">Fallback 1</slot>
	</div>
	<div id="second">
	<slot name="second">Fallback 2</slot>
	</div>
	`;
	</script>