Search code examples
javascriptweb-component

Is there a way to embed and sandbox a web page with web component


I followed this link: https://sebastiandedeyne.com/embed-a-web-page-with-a-web-component-and-the-shadow-dom/ I expected to get an equal to sandbox javascript but but only get the static page witout javascript and css applied and dont get code if i use url version. How to do it properly?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Simple template</title>
  <script src="main2.js" defer></script>
</head>

<body>
  <h1>Simple template</h1>
  <embedded-webview src="https://www.google.com/index.html"></embedded-webview>


</body>

</html>

main2.js file

class EmbeddedWebview extends HTMLElement {
    connectedCallback() {
    fetch(this.getAttribute('src'))
      .then(response => response.html())
      .then(html => {
        const shadow = this.attachShadow({ mode: 'closed' });
        shadow.innerHTML = html;
      });
  }
}
 
window.customElements.define(
  'embedded-webview',
  EmbeddedWebview
);

I'm expet to get an sandboxt to javascript. Maybe if anyone could recommend to me any already done webcomponent


Solution

  • I'm using now an aproach that works. I'm usin an iframe with autoresize hability , starting with fullscreen resize.