将所有 jQuery 选择器重新映射到 ShadowRoot

Question

根据客户的规范，我们正在尝试用带有 Shadow DOM 的 Web 组件完全替换 iframe 元素。

计划是，应该嵌入的网站通过ajax获取，然后放置在Web组件内的shadow dom中。

基本上这按预期工作。获取的 HTML 可以插入到位于自定义 Web 组件中的影子 DOW 中。 CSS 样式的行为也类似于 iframe（封装）。

但是我们在 JavaScript 方面遇到了重大问题，它是子页面的一部分。因为获取的 HTML 被写入影子 DOM，嵌入的 JavaScript 不会被执行。

这可以通过从获取的 HTML 中读取标签并通过 .appendChild 将它们放入影子 DOM 中来解决。

这样就可以管理加载外部 javascript 文件并在 Shadow dom 中执行直接 javascript 代码。

但是，现在导致问题：

嵌入式站点中的所有 jQuery DOM 选择器当然都不起作用。他们本机在父页面的 DOM 中搜索，而不是在影子的 DOM 中搜索。

有没有一个好方法将所有这些选择器映射到 Shadow dom？

Answer 1

您可以在 Web 组件中重新定义 $：

connectedCallback () { 
  const elem = this
  const $ = (e, t) => window.jQuery(e, elem.shadowRoot);
  window.jQuery.extend($, window.jQuery);

请注意，这非常棘手，可能无法涵盖所有情况