在iframe中创建自定义元素

Question

由于html导入还没有得到很好的支持（例如，Firefox没有计划这样做），我试图模仿它通过iframe导入自定义元素的用法。

我尝试这样做的方法是在iframe中加载一个脚本，该脚本在顶层浏览上下文中定义自定义元素;之后甚至可以从文档中删除iframe。我试图这样做的原因是因为我想根据客户端获得的信息动态定义自定义元素;这些自定义元素使用模板在shadow DOM中使用。

我更喜欢使用模板而不是在脚本中构建shadow DOM以获得干净的代码;这就是为什么我想用iframe模仿所有模板的导入功能，而不是只加载构建shadow DOM的脚本。

但是，我尝试的方式不起作用（在谷歌浏览器和Firefox中测试）：

// iframe.js

class XAElement extends HTMLElement{
 constructor(){
  super()
  // Any customization here
 }
 // Any other methods for functionality
}
top.customElements.define('x-a', XAElement)

是否允许在iframe中定义顶级浏览上下文的自定义元素？

注意：文件iframe.html是加载此脚本的任何html文件;和index.html文件（其中发生错误）是加载iframe iframe.html的任何文件。

注2：我得到的错误是在qazxsw poi之后;但是，如果我评论最后一行（我打算定义自定义元素），则不会发生错误。

Answer 1

如果您想模仿HTML Imports，最好使用super()中提供的HTMLImports.min.js库。

Github repository

请注意，Chrome中的HTML Imports本机支持将在下一版本（版本73）中删除，因为Mozilla和Apple未就Google提供的此功能找到共识......但上述库仍可用作简单的HTML加载程序。

---

或者，您可以使用<script src="htmlimports.min.js"></script> 加载HTML内容，如本文中有关fetch()的内容所述。

---

如果您仍想使用HTML Import alternatives元素加载HTML文件，则需要在访问其内容之前等待文件加密。

<iframe>

我认为这不是一个好习惯，因为它会创建无用的浏览环境。

Answer 2

在多次修改脚本进行测试之后，我意识到<iframe src="XA.html" onload="defineXA()"></iframe> 与HTMLElement不同。这就是为什么继承top.HTMLElement不能用于定义自定义元素的原因，因为它只允许从定义自定义元素的浏览上下文继承HTMLElement。

然后，将脚本修改为：

HTMLElement

它结束了工作。

我会这样做，因为在定义自定义元素并在构造函数类中保存所需的模板内容后（作为属性，可以在定义自定义元素之前完成），我可以删除iframe。这样，我只需要加载iframe;等待满足这些要求;并删除iframe（我认为）还原创建嵌套浏览器内容的性能影响。

注意：如果在加载要使用的模板之前执行脚本，则应将构造函数中的模板内容保存在加载事件侦听器中。

版：

我忘了测试如果我在发布答案时删除iframe会发生什么。发生的事情是它停止工作;这就是我接受另一个答案的原因。

Answer 3

老实说，我会避免尝试使用HTML导入加载Web组件。它已弃用，将从所有浏览器中删除。

而是开始使用ES6模块，甚至只创建传统的JavaScript文件。

有很多方法可以将模板打包成JS文件，包括

// iframe.js

class XAElement extends top.HTMLElement{
 constructor(){
  super()
  // Any customization here
 }
 // Any other methods for functionality
}
top.customElements.define('x-a', XAElement)

或Webpack或其他东西。

我的建议是停止使用死技术并转换为当前模块加载的范例。