3

我正在研究构建香草网络组件。我以前使用过 Polymer，并且喜欢您可以在一个文件中为您的组件提供模板、样式和 JavaScript 的事实。如果可能的话，我想用“香草”网络组件来实现这一点，但不知道怎么做。我已从此处获取代码并将其添加到我正在使用的文件中，如下所示：

<!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 中（对吗？）。

有什么办法可以做到这一点？我个人更喜欢这种在 JavaScript 中使用document.createElement.

4

2 回答 2

5

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

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()然后使用或将模板导入自定义元素（或其 Shadow DOM）中cloneNode()。

2.形成ownerDocument财产currentScript

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

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

注意：该currentScript值是临时connectedCallback()设置的，因此在后续调用（例如or ）中将不再起作用attachedCallback()，因此您必须在解析时将其存储在持久变量中，以便以后在需要时重用。

于 2016-09-20T07:41:29.743 回答
0

对于迟到者：

自 2021 年起，HTML 导入功能已被弃用（MDN 链接）。

我不推荐它，您可以：创建一个带有 data- 属性的模板标签来导入 html。编写一个在所有具有该属性的元素上运行的脚本，并在fetch()脚本中使用访问这些 html 部分，将获取的导入添加到模板标签并使用它，例如：template.content.cloneNode( true ).

于 2021-04-22T09:38:55.810 回答