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

<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

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

Should an HTML document with custom tags be considered valid HTML5? The answer to this is clearly "no." The spec lists exactly what tags are valid in what contexts. This is why an HTML validator will not accept a document with custom tags, or with standard tags in the wrong places (like an "img" tag in the header). Will an HTML document with custom tags be parsed and rendered in a standard, clearly-defined way across browsers? Here, perhaps surprisingly, the answer is "yes." Even though the document would not technically be considered valid HTML5, the HTML5 spec does specify exactly what browsers are supposed to do when they see a custom tag: in short, the custom tag acts kind of like a <span> - it means nothing and does nothing by default, but it can be styled by HTML and accessed by javascript.

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

<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

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

<container>content here</container>

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

基本自定义元素和属性

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

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

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

元素的通用约定是x-foo;推荐使用x厂商特性。

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

高级自定义元素和属性

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

HTML5岩石-在HTML中定义新元素 WebComponents.org -自定义元素介绍 Web组件:自定义元素

关于基本语法的有效性

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

W3C - HTML5:可扩展性

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

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

"Applicable specifications MAY define new document content (e.g. a foobar element) [...]. If the syntax and semantics of a given conforming HTML5 document is unchanged by the use of applicable specification(s), then that document remains a conforming HTML5 document." "User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them." "User agents are not free to handle non-conformant documents as they please; the processing model described in this specification applies to implementations regardless of the conformity of the input documents." "The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification."

W3C - HTML5:一致性文档 HTML标准:DOM元素

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