标签: html5-template

在最流行的介绍说，我可以很容易克隆的HTML模板我的文档中。

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>

然而，“模板”一词意味着您不会按原样复制粘贴，未经修改。模板意味着您要使用特定值更新某些变量。它建议使用以下方法更新节点：

var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);
document.body.appendChild(clone);

是不是很完美？有 querySelector 来获取元素，以便您可以更新其属性。我只是不明白他为什么在克隆之前更新模板。但这不是我的问题。真正的问题是，在我的情况下，要更新的变量的位置是未知的。它可以是任何模板结构中的属性或innerText。我相信这是模板最普遍和最常用的用法。所以，我可以确保变量 id 在模板中是唯一的，比如这里的 #reply

<template id="comment-template">
  <li class="comment">
    <div class="comment-author"></div>
    <div class="comment-body"></div>
    <div class="comment-actions">
      <a href="#reply" class="reply">Reply</a>
    </div>
  </li>
</template>

应该更新#reply，但作者没有解释如何做到这一点。我成功地在原始模板上使用了innerHTML，document.querySelector('#mytemplate').innerHTML.replace(id, value)但这破坏了模板供以后使用，如上所述。我未能更新克隆的文本。这可能是因为 template.clone 生成了一个没有 innerHTML 的文档片段。但是，在推动之前，我决定研究替代方案，因为我知道 innerHTML/outerHTML 不是很标准。

替代innerHTML？检查innerHTML的替代方案，但同样，他们对模板假设太多。他们不是仅仅用用户值替换一些特定的标识符，而是完全重新创建模板，这违背了模板的整个概念。一旦您在变量评估中重新创建其整个代码，模板就会失去任何意义。那么，<template>应该怎么用呢？

根据a的内容<template>,我想将其内容包装在容器中,以便更容易/一致地遍历.如果内容<style>,并<one-other-element>在顶层,我会离开它是.否则,那里的任何东西都会被包裹起来<div>.

最初我的代码是这样的:

var hasCtnr = template.content.querySelector(':scope > :only-child, :scope > style:first-child + :last-child') != null;

但是,我注意到它不起作用 - 也就是说,hasCtnr总是如此false.所以,我做了一个简化的测试用例(jsfiddle).如您所见,:scope使用常规DOM元素.但是,它似乎不适用于DocumentFragments.我知道这项技术是新的/实验性的,但这是一个错误还是我做错了什么？

如果我使用jQuery,它可以工作......但我的猜测是因为jQuery手动执行某些操作.

var hasCtnr = !!$(template.content).children(':only-child, style:first-child + :last-child').length;

顺便说一句,我只关心Chrome/Electron的支持.

这是jsfiddle内联:

var nonTmplResult = document.querySelector('#non-template-result');
var tmplResult = document.querySelector('#template-result');

var grandparent = document.querySelector('#grandparent');
var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

var who = grandparent.querySelector(':scope > div');
if (who === parent) { …

假设我想使用阴影dom创建自定义元素.模板中的某些元素具有在链接的css文件中指定的类名.现在我想让css规则对元素产生影响.但由于影子dom风格的边界,我无法实现.

<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
    <h1>DreamLine</h1>
    <nav>
        <ul>
            <li><a href="#0">Tour</a></li>
            <li><a href="#0">Blog</a></li>
            <li><a href="#0">Contact</a></li>
            <li><a href="#0">Error</a></li>
            <li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
        </ul>
    </nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
        value: function () {
            var t = importDoc.querySelector("#blog-header");
            var clone = document.importNode(t.content, true);
            this.createShadowRoot().appendChild(clone);
        }
    }
});
document.registerElement("blog-header", {
    prototype: proto
});
</script>

你看,fa-search是一个在font-awesome css文件中定义的类,我该如何设置<i>元素的样式？

我最近发现了HTML template元素，希望对它进行一些澄清。

据我所知，这三个主要特征是：

• template 没有呈现在屏幕上
• template 没有进入DOM
• 在及其内容content之间还有一个虚拟属性template

除了这些之外，a <template>可能还被div隐藏在屏幕和DOM中。在这方面，用于利用的JavaScript template与尝试使用伪造JavaScript的JavaScript 相同div。

问题是，这正确吗？我问是因为：

• 我只需要自己想清楚
• 为不支持的浏览器伪造一个相对容易。

谢谢

何时应在constructor或中应用模板connectedCallback？当我在回调中执行此操作时，有时会attributeChangedCallback被调用，并且我无法查询元素。

export class TestElement extends HTMLElement {
  constructor() {
    super();
    //here ?
  }

  connectedCallback() {
    //here ?
  }
}

我想知道哪里以及为什么更好。

这是模板应用代码的片段

let t = document.createElement('template');
t.innerHTML = require('template.html');
this.appendChild(t.content.cloneNode(true));

我刚刚开始学习HTML自定义元素，并且通过阅读一系列介绍，教程和文档，我认为我对它的工作方式有很好的了解，但是我对使用或不使用正确方法有一个哲学问题该<template>标签。

自定义元素使您能够封装新功能，简化HTML文档的结构，并允许您简单地插入<my-custom-element>...</my-custom-element>标记而不是<div class="my-custom-element"><span class="part1">...</span><span class="part2">...</span></div>。

然后，元素的类定义将设置该元素的结构和功能。然后，一堆教程描述了如何使用<template>...</template>和<slot>...</slot>设置自定义元素的内容。然后，您必须将模板代码包含在要使用该元素的每个HTML文档中，而不是在自定义元素类的构造函数中进行设置。这是否与自定义元素以使它们更易于移植的方式帮助简化和封装功能这一事实背道而驰？还是我误解了模板在文档中的正确用法和/或位置？

从SO来看，我能找到的最接近解决这个问题的方法是：

如何使用Vanilla JS淘汰自包含自定义元素中的模板？

但是答案本质上都绕在一起，说“不要使用<template>”，因此并不能真正消除我的困惑。

我使用polyfill js,它允许为不支持它的浏览器处理标签.

jsfiddle上polyfill的源代码

来源问题

但我注意到在IE 11中,这个polyfill无法使用包含<tr>和<td>标签的模板

我在jsfiddle的样本

问题是当我们尝试从模板标签节点获取childNodes时

elPlate.childNodes

它会返回除了<tr>和<td>孩子之外的一切,好像里面没有这样的标签<template>.

我错过了什么吗？这个问题有没有解决方法？

PS由于缺乏声誉,我无法对源问题添加评论.对不起.

如果我理解正确，创建Web组件的一个实例可以概括为创造一个影子根，从模板复制标记，如到其中：

var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);

当然，如果模板中包含的风格标签的CSS规则，这些都将被复制为好。因此，我们可以有属于一个网络组件的内部标记范围的样式。

问题：

1. 是否有任何性能问题，当我创建万吨非常相同的Web组件的实例，作为样式只是复制，而不是重复使用？
2. 是否有要共享相同的Web组件的多个实例的风格节点的方法吗？

我想使用html-templates.使用Chrome一切正常,但在Firefox中,template-element没有任何内容......也许它只是在调试器中没有显示,但是当我尝试实例化模板的内容时我也没有得到任何内容.

这个模板元素:

...
<body>
    <template>qwertz</template>
</body>
...

当我检查Firefox调试器中的元素时,没有任何内容(我希望"qwertz").看起来很简单......但不幸的是我看不到我在这里失踪的东西......

我正在研究构建香草网络组件.我以前使用过Polymer,你可以将模板,样式和JavaScript放在一个文件中.如果可能的话,我希望用'vanilla'网页组件实现这一目标,但无法解决问题.我从这里获取代码并将其添加到我正在使用的文件中,如下所示:

<!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中使用创建HTML document.createElement.