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

自定义元素规范在Chrome和Opera中可用，并将在其他浏览器中可用。它提供了一种以正式方式注册自定义元素的方法。

自定义元素是可以定义的DOM元素的新类型 作者。不像修饰符，它是无状态的和短暂的，custom 元素可以封装状态并提供脚本接口

自定义元素是更大的W3规范Web组件的一部分，另外还有模板、HTML导入和影子DOM。

Web组件允许Web应用程序作者定义小部件 视觉的丰富程度和交互性是CSS无法实现的 单独使用，并且易于组合和重用，而不可能使用脚本 今天图书馆。< / p >

然而，从谷歌开发者关于自定义元素v1的优秀的演练文章:

自定义元素的名称必须包含破折号(-)。所以<x-tags>， <my-element>和<my-awesome-app>都是有效的名称，而<tabs>和<foo_bar>则不是。这个需求是为了让HTML解析器能够区分自定义元素和常规元素。当新标签添加到HTML中时，它还可以确保向前兼容性。

一些资源

• Web组件可以在https://WebComponents.org找到
• WebComponents.js作为Web组件的填充，直到它们在任何地方都得到支持。另见WebComponents.js github页面&Web浏览器支持表。

注意:下面的答案在2012年写的时候是正确的。从那以后，事情发生了一些变化。HTML规范现在定义了两种类型的自定义元素——“自主自定义元素”和“自定义内置元素”。前者可以去任何地方措辞内容是预期的;这是主体内的大部分位置，但不是例如ul或ol元素的子元素，或在除td、th或标题元素之外的表元素中。后者可以去任何它们扩展的元素可以去的地方。

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

例如，根元素必须是html元素。

html元素只能包含头元素后面跟着体元素。

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

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

用户代理必须处理它们不处理的元素和属性 理解为语义中立的;将它们留在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(我的博客)

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

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

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

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

自定义标记在HTML5中无效。但目前浏览器支持解析它们，你也可以使用css来使用它们。因此，如果你想为当前的浏览器使用自定义标记，那么你可以。但是，一旦浏览器实现了严格用于解析HTML内容的W3C标准，这种支持可能就会消失。

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

<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中，你只是用你看到的来称呼它。我希望这能帮到你。参见示例在这里

貂是个

基本自定义元素和属性

自定义元素和属性在HTML中是有效的，前提是:

• 元素名称是小写的，以x-开头
• 属性名是小写的，以data-开头

例如，<x-foo data-bar="gaz"/>或<br data-bar="gaz"/>。

元素的通用约定是x-foo;建议使用x-vendor-feature。

这可以处理大多数情况，因为开发人员很少需要注册他们的元素所带来的所有功能。语法也足够有效和稳定。下面是更详细的解释。

高级自定义元素和属性

到2014年，有了一种新的、经过很大改进的方法来注册自定义元素和属性。它不能在ie9或Chrome/Firefox 20等较老的浏览器中运行。但它允许你使用标准的HTMLElement接口，防止冲突，使用非-x-*和非-data-*的名称，并定义自定义的行为和语法，以供浏览器尊重。它需要一些奇特的JavaScript，详见下面的链接。

关于基本语法的有效性

使用data-*自定义属性名已经完全有效了一段时间，甚至适用于旧版本的HTML。

W3C - HTML5:可扩展性

至于自定义的(未注册的)元素名称，W3C强烈建议不要使用它们，并认为它们不符合规范。但是浏览器需要支持它们，并且x-*标识符不会与未来的HTML规范冲突，x-vendor-feature标识符也不会与其他开发人员冲突。自定义DTD可用于绕过任何挑剔的浏览器。

以下是官方文件中的一些相关摘录:

适用的规范可以定义新的文档内容(例如a Foobar元素)[…]。如果语法和语义给定 符合HTML5文档是不变的使用适用 ，那么该文档仍然是符合HTML5的 文档!”< / p > 用户代理必须处理它们不处理的元素和属性 理解为语义中立的;将它们留在DOM中(用于DOM 处理器)，并根据CSS(对于CSS处理器)对它们进行样式化， 但不能从中推断出任何意义。”

用户代理不能像他们那样自由地处理不符合要求的文档 请;适用于本规范中描述的处理模型 不考虑输入的一致性 文档!”< / p > htmllunknownelement接口必须用于HTML元素 不是由本规范定义的。"

我想指出的是，“有效”这个词在这里有两种不同的含义，其中任何一种都是潜在的，嗯，有效的。

1. 带有自定义标签的HTML文档应该被认为是有效的HTML5吗? 这个问题的答案显然是“不”。规范列出了在什么上下文中什么标签有效。这就是为什么HTML验证器不接受带有自定义标记的文档，或者在错误的地方带有标准标记的文档(比如标头中的“img”标记)
2. 带有自定义标记的HTML文档是否会以跨浏览器的标准、明确定义的方式进行解析和呈现? 也许令人惊讶的是，答案是肯定的。尽管该文档在技术上不被认为是有效的HTML5，但HTML5规范并指定正是浏览器在看到自定义标记时应该做的事情:简而言之，自定义标记的行为有点像<span>——默认情况下它没有任何意义，也没有任何作用，但它可以由HTML设置样式，并由javascript访问

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

自定义标记是有效的，

1)它们包含一个破折号

<my-element>

2)它们是嵌入的XML

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

这里假设你使用的是HTML5文档类型<!doctype html>

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

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

只需使用任何你想要的，而不需要任何dom声明

<container>content here</container>

添加您自己的样式(display:block)，它将适用于任何现代浏览器