在iframe中创建自定义元素
由于html导入还没有得到很好的支持(例如，Firefox没有计划这么做)，所以我尝试模仿它在通过iframes导入自定义元素中的使用。
我尝试这样做的方式是在iframe中加载一个脚本，该脚本在顶部浏览上下文中定义自定义元素；在此之后，iframe甚至可以从文档中删除。我之所以尝试这样做，是因为我希望根据在客户端获得的信息动态定义自定义元素；而这些自定义元素使用模板在阴影DOM中使用。
我更喜欢使用模板，而不是在脚本中构建影子DOM，以获得干净的代码；这就是为什么我希望使用iframe来模拟所有模板的导入功能，而不是仅仅加载构建影子DOM的脚本。
然而，我尝试过的方式不起作用(在google和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:我得到的错误是在super()之后；但是，如果我注释最后一行(其中我打算定义自定义元素)，就不会发生错误。
回答 3
Stack Overflow用户
发布于 2019-02-17 17:04:39
如果您想模仿HTML，最好使用Github储存库中提供的Github储存库库。
<script src="htmlimports.min.js"></script>请注意，Chrome中的HTML导入本地支持将在下一个版本(73版)中删除，因为在Google提议的这项功能上，Mozilla和Apple没有达成共识.但是上面的库仍然是一个简单的HTML加载程序。
或者，您可以使用fetch()加载HTML导入备选方案内容，如本文中关于HTML导入备选方案的文章所描述的那样。
如果您仍然希望使用一个<iframe>元素来加载一个HTML文件，那么您需要等待文件在访问其内容之前被加载。
<iframe src="XA.html" onload="defineXA()"></iframe>我不认为这是一个好的做法，因为它将创造无用的浏览上下文。
Stack Overflow用户
发布于 2019-02-18 07:53:08
经过几次修改脚本进行测试后，我意识到HTMLElement与top.HTMLElement不同。这就是为什么从HTMLElement继承不能定义自定义元素的原因，因为它只允许从定义自定义元素的浏览上下文中继承。
然后，将脚本修改为：
// iframe.js
class XAElement extends top.HTMLElement{
constructor(){
super()
// Any customization here
}
// Any other methods for functionality
}
top.customElements.define('x-a', XAElement)最后起作用了。
我将这样做，因为在定义了自定义元素并在构造函数类中保存了所需的模板内容(作为属性，可以在定义自定义元素之前完成)，我可以删除iframe。这样，我只需加载iframe；等待这些要求得到满足；并删除iframe以(我认为)恢复创建嵌套浏览器内容对性能的影响。
注意:如果在加载要使用的模板之前执行脚本，则应将模板内容保存在构造函数中，并将其放入加载事件侦听器中。
版本：
我忘记测试如果在发布答案的时候删除iframe会发生什么。所发生的是它停止工作，这就是为什么我要接受另一个答案。
Stack Overflow用户
发布于 2019-02-21 21:40:17
老实说，我将避免使用HTML导入加载Web组件。它是不推荐的，并将从所有浏览器中删除。
相反，开始使用ES6模块，甚至只创建传统的JavaScript文件。
有很多方法可以将模板打包到JS文件中，包括组件-构建工具或Webpack等。
我的建议是停止使用死气沉沉的技术，转而使用当前的模块加载模式。
https://stackoverflow.com/questions/54731036
复制相似问题
腾讯云开发者
