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

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

<container>content here</container>

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

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

<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

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

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

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.

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