Web Components 现在是否支持类似 iframe 的安全隔离？
Do Web Components now support iframe-like security isolation?
我想让一个站点托管 Web 组件，而另一个站点无法访问其内部 DOM 或 Javascript。与 iframe 完全一样，但可以更好地在 HTML 内呈现，例如调整大小以合并其内容等。
对此有很多讨论，但在 2019 年，当我问这个问题时，是否有任何实施来做到这一点？
编辑：让我完全清楚 - 我希望组件的 JS 从我们的服务器提供服务，对我们服务器的请求从组件的 JS 完成，在组件中呈现内容，但不让封闭站点获取它或在组件中放置特洛伊木马。我对提供 CSS 但没有 HTML 或 JS 的封闭站点很好。这能做到吗？
它如何与组件通信，类似于 postMessage？
最后，COMPONENTS JS是否可以通过访问外部包含网站的DOM，从而找到其他组件并进行通信？最后一个在另一个域上使用 iframe 是不可能的。
简单回答：否
Web组件不隔离JS。只是 DOM 和 CSS.
但是您可以将 所有 的 JS 放在 class 中，或者放在 ES6 模块中，或者放在 IIFE 中，这样会隔离它。
但我怀疑 Web 组件是否会 100% 替代 <iframe>。我也不认为他们本来就是这样的。
如果 <iframe> 被弃用并最终从浏览器中删除，我不会感到惊讶。
更新
将所有 JS 代码保存在组件的 class 或 IIFE 中将在一定程度上保护代码。 HTML 和 CSS 已经在组件内部 sand-boxed。如果您的代码位于 IIFE 或 ES6 模块中，那么其他代码必须能够访问源文件并能够修改它才能更改它。
外部与组件的通信是通过外部代码调用组件的函数或设置组件的属性和特性来完成的。
从组件到外部的通信传统上是通过调度事件来完成的。直接从一个组件与另一个组件对话是一种混乱的选择，确实应该避免。由父代码侦听其所有子项的事件，然后调用函数或在其他子项上设置 properties/attributes。
如果您使用 shadowDOM，那么如果您使 CSS 的某些方面对它们可用，则封闭站点只能更改您的组件的 CSS。这可以通过 CSS 变量或使用 <slot> 来允许封闭的应用程序将它们自己的 HTML/CSS 放置在您的组件中。这可能会让您接触到一些您可能不想要的东西。
class 或 IIFE 中的代码始终可以访问 DOM 中的任何内容。请记住，JS 不是 sand-boxed 并且可以做任何其他 JS 可以做的事情。但是，对于封闭的应用程序来更改您的组件 classes，虽然可能并非不可能，但要困难得多。确保你的 class 是 frozen 以防止 sub-classing.
另一件要知道的事情是，如果您让其他人从他们的服务器加载他们的网站，然后从您的服务器加载您的组件文件，那么您可能会遇到 CORS 问题。特别是如果您的代码尝试使用 XHR/Fetch, then you may have CORS issues.
加载数据
我想让一个站点托管 Web 组件，而另一个站点无法访问其内部 DOM 或 Javascript。与 iframe 完全一样，但可以更好地在 HTML 内呈现，例如调整大小以合并其内容等。
对此有很多讨论，但在 2019 年，当我问这个问题时，是否有任何实施来做到这一点？
编辑：让我完全清楚 - 我希望组件的 JS 从我们的服务器提供服务，对我们服务器的请求从组件的 JS 完成，在组件中呈现内容，但不让封闭站点获取它或在组件中放置特洛伊木马。我对提供 CSS 但没有 HTML 或 JS 的封闭站点很好。这能做到吗？
它如何与组件通信，类似于 postMessage？
最后，COMPONENTS JS是否可以通过访问外部包含网站的DOM，从而找到其他组件并进行通信？最后一个在另一个域上使用 iframe 是不可能的。
简单回答：否
Web组件不隔离JS。只是 DOM 和 CSS.
但是您可以将 所有 的 JS 放在 class 中，或者放在 ES6 模块中，或者放在 IIFE 中，这样会隔离它。
但我怀疑 Web 组件是否会 100% 替代 <iframe>。我也不认为他们本来就是这样的。
如果 <iframe> 被弃用并最终从浏览器中删除，我不会感到惊讶。
更新
将所有 JS 代码保存在组件的 class 或 IIFE 中将在一定程度上保护代码。 HTML 和 CSS 已经在组件内部 sand-boxed。如果您的代码位于 IIFE 或 ES6 模块中，那么其他代码必须能够访问源文件并能够修改它才能更改它。
外部与组件的通信是通过外部代码调用组件的函数或设置组件的属性和特性来完成的。
从组件到外部的通信传统上是通过调度事件来完成的。直接从一个组件与另一个组件对话是一种混乱的选择，确实应该避免。由父代码侦听其所有子项的事件，然后调用函数或在其他子项上设置 properties/attributes。
如果您使用 shadowDOM，那么如果您使 CSS 的某些方面对它们可用，则封闭站点只能更改您的组件的 CSS。这可以通过 CSS 变量或使用 <slot> 来允许封闭的应用程序将它们自己的 HTML/CSS 放置在您的组件中。这可能会让您接触到一些您可能不想要的东西。
class 或 IIFE 中的代码始终可以访问 DOM 中的任何内容。请记住，JS 不是 sand-boxed 并且可以做任何其他 JS 可以做的事情。但是，对于封闭的应用程序来更改您的组件 classes，虽然可能并非不可能，但要困难得多。确保你的 class 是 frozen 以防止 sub-classing.
另一件要知道的事情是，如果您让其他人从他们的服务器加载他们的网站，然后从您的服务器加载您的组件文件，那么您可能会遇到 CORS 问题。特别是如果您的代码尝试使用 XHR/Fetch, then you may have CORS issues.
加载数据