Question

我现在有点迷路了。我正在尝试使用自定义元素，模板，导入等的Web组件规范。但是由于某些原因，导入规范将无法正常工作！即使我的版本（67）支持Chrome，Chrome似乎也不会在源代码部分中加载我的导入，所有代码都是正确的，路径名也是如此。有人可以帮我吗？这是我的项目：Link to github project

如果打开“ index.html”，则可以看到我有一个指向html文件的链接标记。在该文件中，我使用的是模板标记，并将其内容附加到我创建的自定义元素的shadowDOM中。如果我手动将代码复制并粘贴到主要html文件的主体中，它将起作用，但是在尝试导入它时不会加载。任何输入将不胜感激，谢谢！

Answer 1

<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。

HTML导入不起作用...即使受支持

1 个答案: