自定义元素在HTML5中有效吗?

对于自定义标签在HTML5中是否有效，我一直无法找到一个明确的答案，比如:

<greeting>Hello!</greeting>

我在说明书中什么都没发现:

http://dev.w3.org/html5/spec/single-page.html

而且自定义标记似乎无法使用W3C验证器进行验证。

当前回答

给出一个反映现代页面的更新答案。

自定义标记是有效的，

1)它们包含一个破折号

<my-element>

2)它们是嵌入的XML

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

这里假设你使用的是HTML5 doctype <!doctype html >

考虑到这些简单的限制，现在尽最大努力保持HTML标记的有效性是有意义的(请停止关闭<img>和<hr>这样的标记，除非您使用XHTML doctype，否则这是愚蠢和不正确的，您可能不需要XHTML doctype)。

鉴于HTML5清楚地定义了解析规则，兼容的浏览器将能够处理您扔给它的任何标记，即使它不是严格有效的。

2017-01-05 22:08:08

其他回答

这是可能的，也是允许的:

用户代理必须处理它们不处理的元素和属性理解为语义中立的;将它们留在DOM中(用于DOM 处理器)，并根据CSS(对于CSS处理器)对它们进行样式化，但并没有从中推断出任何意义。

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

但是，如果你想要增加交互性，你需要让你的文档无效(但仍然是完整的功能)，以适应IE的7和8。

见http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html(我的博客)

2012-10-17 14:02:04

引用HTML5规范的可扩展性部分:

对于标记级特性，可以限制在XML序列化中，并且不需要在HTML序列化中得到支持，供应商应该使用名称空间机制来定义自定义名称空间，其中支持非标准元素和属性。

如果你在使用HTML5的XML序列化，你可以这样做:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

但是，如果您使用的是HTML语法，那么您所能做的事情就会受到很大的限制。

对于打算与HTML语法一起使用的标记级特性，扩展应该限制为“x-vendor-feature”形式的新属性[…]不应该创建新的元素名称。

但是这些说明主要是针对浏览器供应商的，他们可能会为他们选择创建的任何自定义元素提供视觉样式和功能。

不过，对于作者来说，虽然在页面中嵌入自定义元素是合法的(至少在XML序列化中是这样)，但除了DOM中的一个节点之外，您不会得到其他任何东西。如果你想让你的自定义元素实际做一些事情，或者以某种特殊的方式呈现，你应该看看自定义元素规范。

要了解这个主题的更温和的入门知识，请阅读Web组件介绍，其中还包括关于Shadow DOM和其他相关规范的信息。这些规范目前仍是工作草案——你可以在这里看到当前的状态——但它们正在积极地开发中。

例如，greeting元素的简单定义可能是这样的:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

这告诉浏览器以引号显示元素内容，并以文本“Simon说:”为前缀，其样式为灰色。通常，像这样的自定义元素定义将存储在一个单独的html文件中，您将使用链接导入该文件。

<link rel="import" href="greeting-definition.html" />

如果你想，你也可以将它内联。

我用你可以在这里看到的Polymer polyfill库创建了上述定义的工作演示。注意，这是使用旧版本的聚合物库-最新版本的工作方式完全不同。然而，由于规范仍在开发中，我不建议在产品代码中使用这种方法。

2013-07-16 21:53:08

自定义HTML元素是一个新兴的W3标准，我一直在为它做出贡献，它允许你用解析器声明和注册自定义元素，你可以在这里阅读规范:W3 Web Components自定义元素规范。此外，微软支持一个名为X-Tag的库(由前Mozilla开发人员编写)——它使使用Web组件更加容易。

2012-10-15 18:20:39

我知道这个问题很老了，但我一直在研究这个主题，尽管上面的一些陈述是正确的，但它们不是创建自定义元素的唯一方法。例如:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

将工作得非常好(在谷歌Chrome, IE, FireFox和移动Safari的新版本)。您所需要的只是一个alpha字符(a-z, a-z)来开始标记，然后您可以使用任何非alpha字符。如果在CSS中，你必须使用“\”(反斜杠)来查找元素，比如需要Query\^{…}。但在JS中，你只是用你看到的来称呼它。我希望这能帮到你。参见这里的例子

- 水貂CBOS

2014-11-03 19:19:56

data-*属性在HTML5中有效，甚至在HTML4中，所有web浏览器都尊重它们。添加新标签在技术上是可以的，但不建议这样做，因为:

它可能会与将来添加的内容相冲突，而且使HTML文档无效，除非通过JavaScript动态添加。

我只在谷歌不关心的地方使用自定义标签，在一个游戏引擎iframe中，我做了一个<日志>标签，包含<msg>， <错误>和<警告> -但只通过JavaScript。根据验证器，它是完全有效的。它甚至可以在Internet explorer中使用它的样式!；]

2013-01-01 03:31:12

自定义元素在HTML5中有效吗?

推荐文章

最新文章

标签