是否有一种方法来嵌入和沙盒与web组件的网页



我点击了这个链接:https://sebastiandedeyne.com/embed-a-web-page-with-a-web-component-and-the-shadow-dom/我希望得到一个等于沙箱javascript,但只有得到静态页面没有javascript和css应用,不得到代码,如果我使用url版本。如何正确地做呢?

<!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文件
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
);

我希望得到一个javascript沙箱。也许如果有人可以推荐给我任何已经完成的webcomponent

我现在使用的是一种有效的方法。我正在使用一个具有自动调整大小功能的iframe,从全屏调整大小开始。