自定义元素是否为有效的HTML5？
我一直无法找到自定义标签在HTML5中是否有效的明确答案，如下所示：
<greeting>Hello!</greeting> 我没有在规范中找到任何一种方式：
http://dev.w3.org/html5/spec/single-page.html
而自定义标签似乎没有验证与W3C验证。
自定义元素规范在Chrome和Opera中可用，并可在其他浏览器中使用 。 它提供了一种正式注册自定义元素的方法。
自定义元素是可以由作者定义的DOM元素的新类型。 不像装饰器 ，它是无状态和短暂的，自定义元素可以封装状态并提供脚本接口。
自定义元素是更大的W3规范的一部分，称为Web组件 ，以及模板，HTML导入和Shadow DOM。
Web组件使Web应用程序作者能够定义具有不可能单独使用CSS的视觉丰富性和交互性的小部件，并且便于当今脚本库的组合和重用。
不过，从这篇有关自定义元素v1的Google Developers 文章中 ，
自定义元素的名称必须包含短划线（
-）。 所以<x-tags>，<my-element>和<my-awesome-app>都是有效的名字，而<tabs>和<foo_bar>则不是。 这个要求是这样HTML解析器可以区分常规元素的自定义元素。 当新的标签被添加到HTML时，它也保证了向前兼容性。
一些资源
- Web组件的“画廊”正在编译http://customelements.io/
- WebComponents.js作为Web组件的一个polyfill ，直到它们在任何地方都受到支持。 另请参阅WebComponents.js github页面和Web浏览器支持表 。
这实际上是元素内容模型积累的结果。
例如， 根元素必须是一个html元素。
html元素可能只包含一个head元素，后跟一个body元素。
body元素只能包含Flow内容 ，其中流内容被定义为元素： a，abbr，address，area（如果它是地图元素的后代），article，旁边，audio，b，bdi，bdo，blockquote， br，button，canvas，cite，code，command，datalist，del，details，dfn，div dl，em，embed，fieldset，figure，footer，form，h1，h2，h3，h4，h5，h6，header，hgroup ，hr，i，iframe，img，input，ins，kbd，keygen，标签，地图，标记，数学，菜单，仪表，导航，无脚本，对象，ol，输出，p，pre，进度，q，ruby，s ，samp，script，section，select，small，span，strong，style（如果scoped属性存在），sub，sup，svg，table，textarea，time，u，ul，var，video，wbr和Text
等等。
内容模型从来没有说“你可以把任何你喜欢的元素放在这个元素中”，这对于自定义的元素/标签是必要的。
这是可能的，并允许：
用户代理必须将他们不理解的元素和属性视为语义中立; 留在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 （我的博客）
基本的自定义元素和属性
自定义元素和属性在HTML中有效，前提是：
- 元素名称是小写字母，并以
x- - 属性名称是小写的，并以
data-
例如， <x-foo data-bar="gaz"/>或<br data-bar="gaz"/> 。
元素的通用约定是x-foo ; 推荐使用x-vendor-feature 。
这处理大多数情况下，因为开发人员需要注册其元素的所有权力是很少见的。 语法也是充分有效和稳定的。 更详细的解释如下。
高级自定义元素和属性
截至2014年，有一种新的，改进的方式来注册自定义元素和属性。 它不适用于IE 9或Chrome / Firefox 20等较老的浏览器。但是，它允许您使用标准的HTMLElement接口，防止冲突，使用非x-*和非data-*名称以及定义自定义行为以及浏览器尊重的语法。 它需要一些精美的JavaScript，详见下面的链接。
HTML5 Rocks – 定义HTML中的新元素
WebComponents.org – 自定义元素简介
W3C – Web组件：自定义元素
关于基本句法的有效性
对于自定义属性名称使用data-*已经有一段时间是完全有效的，甚至可以使用旧版本的HTML。
W3C – HTML5：可扩展性
对于自定义（未注册）的元素名称，W3C强烈建议不要这样做，并认为它们不合格。 但是浏览器需要支持它们，并且x-*标识符不会与将来的HTML规范冲突，并且x-vendor-feature标识符不会与其他开发者冲突。 一个自定义的DTD可以用来解决任何挑剔的浏览器。
以下是官方文档的相关摘录：
“适用的规范可以定义新的文档内容（例如foobar元素）[…]如果给定的符合性HTML5文档的语法和语义由于使用适用的规范而不变，那么该文档仍然是符合HTML5文件。”
“用户代理必须将他们不理解的元素和属性视为语义中性;把它们留在DOM中（用于DOM处理器），并根据CSS（对于CSS处理器）对它们进行样式化，但不能推断它们的任何含义。
“用户代理不能自由地处理不符合要求的文档;本规范中描述的处理模型适用于实现，而不管输入文档的符合性如何。”
“HTMLUnknownElement接口必须用于本规范未定义的HTML元素。”
W3C的 – HTML5：符合文件
WhatWG – HTML标准：DOM元素
自定义HTML元素是一个新兴的W3标准，我一直致力于此，使您能够使用解析器声明和注册自定义元素，您可以在此阅读规范： W3 Web Components自定义元素规范 。 此外，微软支持一个名为X-Tag的库（由前Mozilla开发者编写），它使Web组件的工作变得更加简单。
我想指出，在这方面，“有效”这个词可以有两个不同的含义，其中任何一个都有可能是这个有效的。
-
是否应该将具有自定义标签的HTML文档视为有效的HTML5？ 答案显然是“不”。 规范精确地列出了什么标签在什么情况下是有效的。 这就是为什么一个HTML验证器不会接受带有自定义标签的文档，或者在错误的地方（如标题中的“img”标签）接受标准标签。
-
具有自定义标签的HTML文档是否会在浏览器中以标准，明确定义的方式进行分析和呈现？ 在这里，也许令人惊讶的是，答案是“是的”。 即使文档在技术上不被认为是合法的HTML5，但是HTML5规范确实指定了浏览器在看到自定义标签时应该做的事情：简而言之，自定义标签的行为类似于
<span>– 它意味着什么默认情况下不做任何事情，但可以通过HTML进行样式化，并通过javascript进行访问。
从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>
这告诉浏览器使用引号将元素内容呈现，并以“灰色”的文字“西蒙说：”作为前缀。 通常，像这样的自定义元素定义将被存储在一个单独的html文件中，您将通过链接导入该文件。
<link rel="import" href="greeting-definition.html" />
尽管你也可以将它包含在内，如果你想。
我已经使用Polymer polyfill库创建了上述定义的工作演示，您可以在这里看到。 请注意，这是使用聚合物库的旧版本 – 更新的版本工作完全不同。 然而，在规范仍在发展中，这不是我建议在生产代码中使用的东西。
自定义标签在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>
将工作得很好（到目前为止，在较新版本的Google Chrome，IE，FireFox和移动Safari中）。 所有你需要的只是一个字符（az，AZ）来启动标签，然后你可以使用任何非alpha字符。 如果在CSS中，您必须使用“\”（反斜杠）来查找元素，例如需要Query \ ^ {…}。 但是在JS中，你只是称之为你如何看待它。 我希望这有助于。 看这里的例子
-Mink CBOS
给出一个反映现代网页的更新的答案。
自定义标签是有效的，
1）他们包含一个破折号
<my-element>
2）他们是嵌入式的XML
<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>
这假定您正在使用HTML5 doctype <!doctype html>
考虑到这些简单的限制，现在有必要尽全力保持HTML标记的有效性（请停止关闭像<img>和<hr>这样的标签，除非使用XHTML文档类型，否则这很愚蠢而且不正确，您可能不需要）。
鉴于HTML5明确定义了解析规则，符合标准的浏览器将能够处理任何标签，即使它不是严格有效的。
data-*属性在HTML5中是有效的，甚至在所有的Web浏览器中都是有效的。 添加新标签在技术上是可以的，但不建议仅仅因为：
- 它可能与未来增加的东西相冲突
- 使HTML文件无效，除非通过JavaScript动态添加。
我只在Google不关心的地方使用自定义标签，对于游戏引擎iframe中的ecample，我做了一个包含<msg> ， <error>和<warning>的<log>标签，但只通过JavaScript 。 据验证人说，这是完全有效的。 它甚至可以在Internet Explorer中以其样式工作！ ]
