时间戳

首页 > 解决方案 > HTML 导入不起作用...即使它受支持

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

问题描述

我现在有点迷路了。我正在尝试使用自定义元素、模板、导入等的 Web 组件规范。但由于某种原因，导入规范不起作用！Chrome 似乎没有在源代码部分加载我的导入，即使它在我的版本 (67) 中受支持，所有代码都是正确的，路径名也是正确的。谁能帮帮我？这是我的项目：链接到 github 项目

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

标签： javascripthtmlweb-componenthtml5-templatehtml-imports

解决方案

该<template>元素不在主文件中，document而是在导入的文档中。因此，您将无法使用document.getElementById.

相反，您应该在导入的文档中搜索它：

1° 在<script>导入中，定义一个引用导入文档的变量：

var importedDoc = document.currentScript.ownerDocument

2° 在自定义元素类定义中，使用它来获取<template>.

constructor() {
    super()
    let template = importedDoc.getElementById( 'social-button' )
    ...
}

注意：由于某些原因currentScript，不能直接在本文中使用。constructor()

推荐阅读