<template>标签

基本用法

<template>标签表示组件的 HTML 代码模板。

  1. <template>
  2.   <h1>This won't display!</h1>
  3.   <script>alert("this won't alert!");</script>
  4. </template>

<template>内部就是正常的 HTML 代码，浏览器不会将这些代码加入 DOM。

下面的代码会将模板内部的代码插入 DOM。

  1. let template = document.querySelector('template');
  2. document.body.appendChild(template.content);

注意，模板内部的代码只能插入一次，如果第二次执行上面的代码就会报错。

如果需要多次插入模板，可以复制<template>内部代码，然后再插入。

  1. document.body.appendChild(template.content.cloneNode(true));

上面代码中，cloneNode()方法的参数true表示复制包含所有子节点。

接受<template>插入的元素，叫做宿主元素（host）。在<template>之中，可以对宿主元素设置样式。

  1. <template>
  2. <style>
  3.   :host {
  4.     background: #f8f8f8;
  5.   }
  6.   :host(:hover) {
  7.     background: #ccc;
  8.   }
  9. </style>
  10. </template>

document.importNode()

document.importNode方法用于克隆外部文档的DOM节点。

  1. var iframe = document.getElementsByTagName("iframe")[0];
  2. var oldNode = iframe.contentWindow.document.getElementById("myNode");
  3. var newNode = document.importNode(oldNode, true);
  4. document.getElementById("container").appendChild(newNode);

上面例子是将iframe窗口之中的节点oldNode，克隆进入当前文档。

注意，克隆节点之后，还必须用appendChild方法将其加入当前文档，否则不会显示。换个角度说，这意味着插入外部文档节点之前，必须用document.importNode方法先将这个节点准备好。

document.importNode方法接受两个参数，第一个参数是外部文档的DOM节点，第二个参数是一个布尔值，表示是否连同子节点一起克隆，默认为false。大多数情况下，必须显式地将第二个参数设为true。