HTML模板(自定义)标记

Question

我知道使用自定义html标签是不合适的，因为有各种原因，但我想运行一个特定的情况，您可能需要一个自定义html标签，并希望被告知不同或可能是一个更好的方式来实现我的目标。

在我的代码中，我有我称之为模板的东西，这些模板由一个带有模板的div标签和一个附加到它的隐藏类组成。这在屏幕上是不可见的，但基本上这些"template“标签包含了我在Javascript中用来创建各种不同项目的html。我这样做是为了让我可以在html中设置模板的样式，而不必担心在Javascript中混入CSS。

<!-- TEMPLATE -->
<div class="template hidden">
    <span>Random Container</span>
    <a href="#">Random Button</a>
</div>

在javascript中，我会这样做

var template = document.getElementById("template");
var clone = template.cloneNode(true);
clone.removeClass("template hidden");

我更愿意做这样的事情

<template class="hidden">
   <span>Random Container</span>
   <a href="#">Random Button</a> 
</template>

因此，如果我在一个div中有多个模板，我可以获取所有模板，而不必为它们指定唯一的类名。当然，我需要一个实现的理由要比这深入得多，但没有必要在细节上浪费你的时间。这么说吧，它会帮我清理掉很多Javascript。

因为自定义模板标记是隐藏的，实际上只是一个容器，可以方便地在javascript中使用document.getElementsByTagName(“template”)进行调用；这样做可以吗？我可能会在标签前面加上一个自定义名称，以防模板在html中实现。

Answer 1

为什么不使用html5的data attributes？它们用于存储私有数据或自定义信息。

对于您的情况，您可以添加data-type="template"或data-name="template"，然后根据它进行搜索和删除。一个简单的函数，就像你要写的那样删除你的<template>标签，但不违反规则。

因此，使用您的示例<div data-type="template" class="hidden"></div>

Answer 2

现代浏览器通常从解析和构造DOM节点的意义上“支持”自定义标记，以便可以在脚本中对元素进行样式设置和处理。

主要问题是IE 9之前的IE，但对于每个自定义标记名，可以使用document.createElement('...')处理一次。

另一个问题是验证器会将标记报告为错误，如果有大量这样的错误，您可能不会注意到标记中的一些真正的错误。原则上，您可以创建自己的DTD来处理此问题(我正在构建一个HTML DTD生成器，但它比我预期的要棘手……)。

有了这些保留，如果与使用类相比，自定义标记本质上简化了您的工作，请使用它们。