Question

我正在研究构建香草网络组件。我以前使用过Polymer，你可以将模板，样式和JavaScript放在一个文件中。我希望用“香草”来实现这一目标。网络组件，如果可能，但无法解决方法。我已从here获取代码并将其添加到我正在使用的文件中，如下所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Component test</title>

    <link rel="import" href="x-foo-from-template.html">
  </head>
  <body>
    <x-foo-from-template></x-foo-from-template>
  </body>
</html>

这失败了，因为当我们尝试选择模板时它不存在，因为此时模板不在DOM中（对吗？）。

有没有办法实现这个目标？我个人更喜欢这种方法，使用document.createElement在JavaScript中创建HTML。

Answer 1

从导入的文档中获取模板有两种主要方法：

<强> 1。来自import元素的<link>属性

<link rel=import>元素拥有包含导入文档的import属性。您可以对其执行querySelector调用以获取<template>：

var doc = document.querySelector( 'link[href$="x-foo-from-template.html"]').import
var template = doc.querySelector( 'template' )

然后使用importNode()或cloneNode()在自定义元素（或其Shadow DOM）中导入模板。

<强> 2。形成ownerDocument

的currentScript属性

解析脚本时，全局值document.currentScript引用正在解析的脚本，因此其属性ownerDocument是对拥有该脚本的文档的引用。您可以对其执行querySelector来电：

var template = document.currentScript.ownerDocument.querySelector( 'template' )

注意： currentScript值设置为暂时，因此在后续调用中不再有效，例如connectedCallback()或{ {1}}，因此您必须在解析时将其记忆在持久变量中，以便在以后需要时重复使用。

Answer 2

对于后来者：

自 2021 年起，HTML 导入功能已被弃用 (MDN Link)。

我不推荐它，你可以改为：创建一个带有 data- 属性的模板标签到 html 导入。编写一个在所有具有该属性的元素上运行的脚本，并在脚本中使用 presentController(withName: "Identifier", context: nil) pushController(withName: "Identifier", context: nil) 访问这些 html 部分，将获取的导入添加到模板标签并使用它，例如：fetch()。

香草网状组件结构

2 个答案:

自 2021 年起，HTML 导入功能已被弃用 (MDN Link)。