将内容标签添加到模板内的输入字段答案

【问题标题】：adding content tag to an input field inside a template将内容标签添加到模板内的输入字段
【发布时间】：2014-04-15 01:11:37
【问题描述】：

我正在尝试使用新的 html5 模板标签来制作一个半通用表单，该表单可以放置在多个用例中，而无需使用过多的 javascript。

这是一个小提琴，展示了我所拥有的 http://jsfiddle.net/684uH/

我的目标是将占位符文本中的“名称”替换为通常在 <content> 标记中找到的内容

一个假设的例子来说明我的观点是：

<div id = "hoster">
    <span class = "inputPlaceholder">Special Name</span>
</div>

<template id = "im-a-template">
    <input type="text" placeholder = <content select = ".inputPlaceholder"></content>>
</template>

有没有办法做类似的事情，或者是使用javascript手动设置它的唯一方法？

【问题讨论】：

标签： javascript html web-component html5-template

【解决方案1】：

在客户端上使用 XSLT 来执行此操作：

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="html5.xhtml"?>
<xsl:stylesheet version="1.0"
            xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"
            >
<xsl:output method="xml" encoding="utf-8" version="" indent="yes" standalone="no" media-type="text/html" omit-xml-declaration="no" doctype-system="about:legacy-compat" />

<!-- Run default templates on the xsl-stylesheet element above-->
<xsl:template match="xsl:stylesheet">
  <xsl:apply-templates/>
</xsl:template>

<!-- Run this template on the root node -->
<xsl:template match="/">
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
      <div id="hoster">
        <span class="inputPlaceholder">Special Name</span>
      </div>

      <!-- Reuse the value of the node with the inputPlaceholder class -->
      <template id="im-a-template">
        <input type="text" placeholder="{//node()[@class='inputPlaceholder']}"/>
      </template>
    </body>
  </html>
</xsl:template>

</xsl:stylesheet>

使用以下流程：

另存为html5.xhtml（或将<?xml-stylesheet href更改为您选择的名称）
在浏览器中打开
添加脚本标签以运行您选择的<template> polyfill

参考文献

【讨论】：