joicomponents/book/chapter11_iframe/demo/InlineIframe.html

Design patterns to build native web components

<!--This thing cannot overflow to the left or upwards-->
<script type="module" src="InlineIframe.js"></script>

<style>
  body {
    font-family: sans-serif;
    font-size: 15px;
    font-stretch: condensed;
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    line-height: 0.8em;
    color: red;
  }

  inline-iframe {
    border: 2px solid orange;
  }
  .inline {
    display: inline-block;
    width: 300px;
    overflow: auto;
  }
</style>

<style id="alpha">
  header-one {
    color: pink;
  }
</style>
<style id="beta">
  header-one {
    background-color: pink;
  }
</style>
<link id="uno" rel="stylesheet" href="styledIframeUno.css">
<script id="one">
  class HeaderOne extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: "open"});
      this.shadowRoot.innerHTML = "<style>slot {font-weight: bold; font-size: 2em;}</style><slot></slot>"
    }
  }

  customElements.define("header-one", HeaderOne);
  console.log("script1"); //should print twice
</script>
<script id="two">
  console.log("script2");
</script>


100x100
<inline-iframe flow-width="100"
               flow-height="100"
               base="https://picsum.photos/id/1/"
               srcdoc="Hello sunshine! <img src='100/100'>"
></inline-iframe>
<hr>
600x200
<inline-iframe flow-width="600"
               flow-height="200"
               inherit-css
               srcdoc="<h1 style='height: 120px; width: 110%; border: 5px dotted green'>Hello sweet, sweet suuuuunshine! </h1>"
></inline-iframe>
<hr>
w200xh0
<inline-iframe flow-width="200"
               srcdoc="<h1 style='height: 120px; width: 110%; border: 5px dotted green'>Hello sweet, sweet suuuuunshine! </h1>"></inline-iframe>
<hr>
w0xh200
<inline-iframe flow-height="200"
               srcdoc="<h1 style='height: 120px; width: 110%; border: 5px dotted green'>Hello sweet, sweet suuuuunshine! </h1>"></inline-iframe>
<hr>
100x100
<inline-iframe flow-width="100"
               flow-height="100"
               inherit-css
               class="inline"
               srcdoc="<h1 style='height: 120px; width: 110%; border: 5px dotted green'>Hello sweet, sweet suuuuunshine! </h1>"></inline-iframe>
<hr>
600x200
<inline-iframe flow-width="600"
               flow-height="200"
               class="inline"
               srcdoc="<h1 style='height: 120px; width: 110%; border: 5px dotted green'>Hello sweet, sweet suuuuunshine! </h1>"></inline-iframe>
<hr>
w200xh0
<inline-iframe flow-width="200"
               class="inline"
               srcdoc="<h1 style='height: 120px; width: 110%; border: 5px dotted green'>Hello sweet euro suuuuunshin€! </h1>"></inline-iframe>
<hr>
w0xh200
<inline-iframe flow-height="200"
               class="inline"
               base="https://picsum.photos/id/1/"
               included-resources="script#one script#three style#alpha link#uno"
               srcdoc="<header-one>hello sunshineeee!</header-one><a href='//bbc.com'>bbc.com</a><hr><a href='//google.com'>google.com</a>">
  <iframe-style>
    header-one {
    border-bottom: 4px dotted blue;
    }
  </iframe-style>
  <iframe-link id="dos" rel="stylesheet" href="styledIframeDos.css"></iframe-link>
  <iframe-script src="scriptedIframe.js">
    exclude me
  </iframe-script>
  <iframe-script>
    console.log("iframe-script says hi!");
  </iframe-script>
</inline-iframe>

<script>
  window.addEventListener("browse", function(e){
    console.log("browsing to: ", e.detail.href);
  });
</script>
<!--

  This code is untested. I have only done superficial tests from within devtools in Chrome, Firefox.
  The code should only work in Chrome, Safari, Firefox as template does not work in IE and Edge.
-->