我希望一个站点托管Web组件，而另一个站点无法访问其内部DOM或Javascript。与iframe完全一样，但是可以更好地在HTML内部呈现，例如调整大小以合并其内容等。
对此有很多讨论，但是在2019年我问这个问题时，有什么措施可以实现吗？
编辑：让我完全清楚-我希望从我们的服务器提供组件的JS，从组件的JS完成对服务器的请求，在组件中呈现内容，但不要让封闭的站点获取或在组件中放入特洛伊木马。我可以在提供CSS但不提供HTML或JS的封闭站点上工作。能做到吗？
它如何与组件通信，类似于postMessage？
最后，COMPONENTS JS是否可以访问包含外部网站的DOM，从而找到其他组件并进行通信？最后一个在其他域的iframe中是不可能的。
答案 0 :(得分：1)
简单答案：否。
Web组件不要隔离JS。只是DOM和CSS。
但是您可以将JS的 all 全部放入类，ES6模块或IIFE中，这样可以将其隔离。
但是我怀疑Web组件是否会100％替代<iframe>。我也不认为它们本来就是这样。
如果<iframe>被弃用并最终从浏览器中删除，我不会感到惊讶。
更新
将所有JS代码保留在组件的类或IIFE中将在某种程度上保护代码。 HTML和CSS已经在组件内部进行了沙盒处理。如果您的代码是在IIFE或ES6模块中，则其他代码将必须有权访问源文件并能够对其进行修改以进行更改。
通过与组件的外部代码调用函数或设置组件的属性和属性来与组件进行外部通信。
从组件到外部的通信通常是通过调度事件来完成的。从一个组件直接与另一个组件进行交谈是一个麻烦的选择，实际上应该避免。由父代代码决定侦听其所有子代的事件，然后调用函数或在其他子代上设置属性/属性。
如果您使用shadowDOM，则封闭站点仅在您使组件的CSS的某些方面可用时才能更改它们的CSS。这可以通过CSS变量来完成，也可以使用<slot>来允许封闭的应用将其自己的HTML / CSS放置在组件中。这可能会打开一些您可能不想要的东西。
该类或IIFE中的代码始终可以访问DOM中的任何内容。请记住，JS不是沙盒，可以执行任何其他JS可以执行的操作。但是，封闭的应用程序要更改您的组件类会比较困难，尽管可能并非没有。确保您的班级是frozen，以防止子类化。
要知道的另一件事是，如果您有其他人从他们的服务器加载他们的网站，然后从您的服务器加载组件文件，那么您可能会遇到CORS问题。尤其是如果您的代码尝试使用XHR / Fetch加载数据，那么您可能拥有CORS issues。