自定义元素对HTML5有效吗？

对于自定义标记在HTML5中是否有效，我一直无法找到明确的答案，如下所示：

<greeting>Hello!</greeting>

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

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

你好！

我在规范中找不到任何东西：

而且自定义标记似乎无法通过W3C验证程序进行验证。

在Chrome和Opera中提供，并在中变得可用。它提供了一种以正式方式注册自定义元素的方法

自定义元素是新类型的DOM元素，可以由 作者。与之不同的是，它们是无状态的、短暂的、习惯的 元素可以封装状态并提供脚本接口

自定义元素是更大的W3规范的一部分，该规范名为，以及模板、HTML导入和阴影DOM

Web组件使Web应用程序作者能够使用 视觉丰富性和交互性的水平在CSS中是不可能的 单独使用，并且易于组合和重用是脚本无法实现的 今天的图书馆

然而，从这一点来看，谷歌开发者对自定义元素v1：

自定义元素的名称必须包含破折号（

-

）。因此

、

和

都是有效名称，而

和

则不是。这一要求是为了让HTML解析器能够区分自定义元素和常规元素。当新标签添加到HTML中时，它还确保了向前兼容性

一些资源

• 示例Web组件可在
• 用作Web组件的多边形填充，直到它们在任何地方都受支持为止。另见

---

N.B.以下答案在2012年写成时是正确的。从那以后，事情有了一些进展。HTML规范现在定义了两种类型的自定义元素——“自治自定义元素”和“自定义内置元素”。前者可以去任何预期的措辞内容；这是主体内的大多数位置，但不是ul或ol元素的子元素，或者是td、th或caption元素以外的表元素中的子元素。后者可以去它们扩展的元素可以去的任何地方

---

这实际上是元素的内容模型累积的结果

比如说,

html

元素只能包含

body

元素只能包含定义为元素的流内容：

等等

---

内容模型在任何时候都不会说“您可以将任何您喜欢的元素放入其中”，这对于自定义元素/标记来说都是必要的。

自定义HTML元素是我一直致力于的新兴W3标准，它使您能够向解析器声明和注册自定义元素，您可以在此处阅读规范：。此外，Microsoft还支持一个名为-的库（由前Mozilla开发人员编写），它使使用Web组件变得更加容易。

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

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

但是，如果你想增加交互性，你需要使你的文档无效（但仍然是完全功能的），以适应IE的7和8

---

请参阅（我的博客）

数据-*

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

它可能与将来添加的内容冲突，以及

使HTML文档无效，除非通过JavaScript动态添加

我只在谷歌不关心的地方使用自定义标记，例如在游戏引擎iframe中，我制作了一个

标记，其中包含

、

和

，但只通过JavaScript使用。根据验证器，它是完全有效的。它甚至可以在Internet explorer中使用它的样式！；]

引用以下内容：

对于可以限制为XML序列化且不需要在HTML序列化中支持的标记级功能，供应商应使用命名空间机制定义支持非标准元素和属性的自定义命名空间

因此，如果您正在使用HTML5的XML序列化，您可以这样做：

<greeting>Hello!</greeting>

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

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

这会告诉浏览器以引号呈现元素内容，并以文本“Simon says：”作为前缀，该文本的样式为灰色。通常，像这样的自定义元素定义将存储在单独的html文件中，您可以使用链接导入该文件

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

不过，如果需要，也可以将其内联

---

我使用Polymer polyfill库创建了上述定义的工作演示，您可以看到。请注意，这是在使用旧版本的Polymer library—较新版本的工作方式截然不同。然而，由于该规范仍在开发中，我不建议在生产代码中使用它。

自定义标记在HTML5中无效。但目前浏览器支持解析它们，而且您也可以使用css使用它们。因此，如果您想为当前浏览器使用自定义标记，那么您可以。但是一旦浏览器严格执行W3C标准来解析HTML内容，这种支持可能会被取消。

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

<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>

点击我
我不会被展示：D
[\？内容]{
显示：无；
}
S=document.getElementsByTagName（“查询？”）[0]；
Q=S.getAttribute（“内容”）；
A=document.getElementById（S.getAttribute（“？attach”）；
函数find（）{
返回S.getAttribute（“？prov”）；
}
（功能（）{
A.setAttribute（“onclick”，Q）；
})();

会很好用的(