我现在有点迷茫了..我正在尝试使用自定义元素、模板、导入等的 Web 组件规范。但是由于某种原因,导入规范无法正常工作! Chrome 似乎没有在源代码部分加载我的导入,即使它在我的版本 (67) 中受支持,所有代码都是正确的,路径名也是如此。谁能帮帮我?这是我的项目:Link to github project
如果您打开“index.html”,您可以看到我有一个指向 html 文件的链接标记。在该文件中,我使用了一个模板标签并将其内容附加到我创建的自定义元素的 shadowDOM 中。如果我手动将代码复制并粘贴到主 html 文件的主体中,它会起作用,但当我尝试导入它时不会加载。任何输入将不胜感激,谢谢!
最佳答案
<template>
元素不在主document
但在导入的文件中。因此,您将无法使用 document.getElementById
获取它。 .
相反,您应该在导入的 文档中搜索它:
1° 在 <script>
在导入过程中,定义一个引用导入文档的变量:
var importedDoc = document.currentScript.ownerDocument
2°在自定义元素类定义中,用它来获取<template>
.
constructor() {
super()
let template = importedDoc.getElementById( 'social-button' )
...
}
注意:currentScript
不能直接在 constructor()
中使用由于某些原因explained in this post .
关于javascript - HTML 导入不起作用...即使它受支持,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51068553/