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
I'm using now an aproach that works. I'm usin an iframe with autoresize hability , starting with fullscreen resize.