iframe reload when moved

by Destan Sarpkaya

HTML

<!doctype html>
<button>Toggle</button>
<div id="host">
  <iframe id="frame" src="https://wikipedia.org" slot="a" style="border: 0"></iframe>
</div>
<section id="other"></section>
<script>
  document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = `
    <style>
      div { height: 150px; background: blue; }
      #b { background: purple }
    </style>
    <div id="a">
      <slot name="a"></slot>
    </div>
    <div id="b">
      <slot name="b"></slot>
    </div>
  `;
  document.querySelector("button").addEventListener("click", function() {
    let frame = document.getElementById("frame");
    frame.slot = frame.slot == "a" ? "b" : "a";
  })
</script>


<script>
other.attachShadow({ mode: "open" })
other.shadowRoot = host.shadowRoot
</script>

CSS

#other {
  margin-top: 300px;
  height: 200px;
  background: cyan;
}