Html 自定义元素是否有效 HTML5？

Are custom elements valid HTML5?

提问by d13

I've been unable to find a definitive answer to whether custom tags are valid in HTML5, like this:

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

<greeting>Hello!</greeting>

I've found nothing in the spec one way or the other:

我在规范中没有发现任何一种方式：

http://dev.w3.org/html5/spec/single-page.html

http://dev.w3.org/html5/spec/single-page.html

And custom tags don't seem to validate with the W3C validator.

自定义标签似乎无法通过 W3C 验证器进行验证。

采纳答案by jessegavin

The Custom Elements specificationis available in Chrome and Opera, and becoming available in other browsers. It provides a means to register custom elements in a formal manner.

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

Custom elements are new types of DOM elements that can be defined by authors. Unlike decorators, which are stateless and ephemeral, custom elements can encapsulate state and provide script interfaces.

自定义元素是可以由作者定义的新型 DOM 元素。与无状态和短暂的装饰器不同，自定义元素可以封装状态并提供脚本接口。

Custom elements is a part of a larger W3 specification called Web Components, along with Templates, HTML Imports, and Shadow DOM.

自定义元素是更大的 W3 规范的一部分，称为Web Components，以及模板、HTML 导入和 Shadow DOM。

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

Web Components 使 Web 应用程序作者能够定义具有单独使用 CSS 无法实现的视觉丰富性和交互性级别的小部件，以及当今脚本库无法实现的轻松组合和重用。

However, from this excellent walk through articleon Google Developers about Custom Elements v1:

但是，从这篇关于 Google Developers 的关于自定义元素 v1 的精彩演练文章中：

The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app>are all valid names, while <tabs>and <foo_bar>are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.

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

Some Resources

一些资源

• Example Web Components are available at https://WebComponents.org
• WebComponents.jsserves as a polyfill for Web Components until they are supported everywhere. See also the WebComponents.js github page & web browser support table.

• 示例 Web 组件可从https://WebComponents.org 获得
• WebComponents.js充当 Web Components 的polyfill，直到它们在任何地方都得到支持。另请参阅WebComponents.js github 页面和 Web 浏览器支持表。

回答by svidgen

It's possible and allowed:

这是可能且允许的：

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.

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

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

But, if you intend to add interactivity, you'll need to make your document invalid (but still fully functional) to accomodate IE's 7 and 8.

但是，如果您打算添加交互性，则需要使您的文档无效（但仍能正常运行）以适应 IE 的 7 和 8。

See http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html(my blog)

见http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html（我的博客）

回答by Alohci

N.B. The answer below was correct when it was written in 2012. Since then, things have moved on a bit. The HTML spec now defines two types of custom elements - "autonomous custom elements" and "customized built-in elements". The former can go anywhere phrasing content is expected; which is most places inside body, but not e.g. children of ul or ol elements, or in table elements other than td, th or caption elements. The latter can go where-ever the element that they extend can go.

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

---

---

This is actually a consequence of the accumulation of the content model of the elements.

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

For example, the root element must be an htmlelement.

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

The htmlelement may only contain A head element followed by a body element.

该html元素只能包含一个 head 元素，然后是一个 body 元素。

The bodyelement may only contain Flow contentwhere flow content is defined as the elements: a, abbr, address, area (if it is a descendant of a map element), article, aside, 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, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (if the scoped attribute is present), sub, sup, svg, table, textarea, time, u, ul, var, video, wbr and Text

该body元件可仅包含流内容，其中内容流被定义为元素：a、缩写、地址、区域（如果它是地图元素的后代）、文章、旁白、音频、b、bdi、bdo、blockquote、br、按钮、画布、引用、代码、命令、数据列表、del、详细信息, 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,标签、地图、标记、数学、菜单、仪表、导航、noscript、对象、ol、输出、p、pre、进度、q、ruby、s、samp、脚本、部分、选择、小、跨度、强、样式（如果存在范围属性）、sub、sup、svg、table、textarea、time、u、ul、var、视频、wbr 和文本

and so on.

等等。

At no point does the content model say "you can put any elements you like in this one", which would be necessary for custom elements/tags.

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

回答by Beejor

Basic Custom Elements and Attributes

基本自定义元素和属性

Custom elements and attributes are valid in HTML, provided that:

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

• Element names are lowercase and begin with x-
• Attribute names are lowercase and begin with data-

• 元素名称以小写字母开头 x-
• 属性名称以小写字母开头 data-

For example, <x-foo data-bar="gaz"/>or <br data-bar="gaz"/>.

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

A common convention for elements is x-foo; x-vendor-featureis recommended.

元素的通用约定是x-foo；x-vendor-feature被推荐。

This handles most cases, since it's arguably rare that a developer would need all the power that comes with registering their elements. The syntax is also adequately valid and stable. A more detailed explanation is below.

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

Advanced Custom Elements and Attributes

高级自定义元素和属性

As of 2014, there's a new, much-improved way to register custom elements and attributes. It won't work in older browsers such as IE 9 or Chrome/Firefox 20. But it allows you to use the standard HTMLElementinterface, prevent collisions, use non-x-*and non-data-*names, and define custom behavior and syntax for the browser to respect. It requires a bit of fancy JavaScript, as detailed in the links below.

截至 2014 年，有一种新的、经过大幅改进的方法来注册自定义元素和属性。它不适用于旧版浏览器，例如 IE 9 或 Chrome/Firefox 20。但它允许您使用标准HTMLElement界面、防止冲突、使用x-*非data-*名称和非名称，并为浏览器定义自定义行为和语法以尊重. 它需要一些花哨的 JavaScript，详见下面的链接。

HTML5 Rocks - Defining New Elements in HTML
WebComponents.org - Introduction to Custom Elements
W3C - Web Components: Custom Elements

HTML5 Rocks - 在 HTML 中定义新元素
WebComponents.org - 自定义元素介绍
W3C - Web 组件：自定义元素

Regarding The Validity of The Basic Syntax

关于基本语法的有效性

Using data-*for custom attribute names has been perfectly valid for some time, and even works with older versions of HTML.

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

W3C - HTML5: Extensibility

W3C - HTML5：可扩展性

As for custom (unregistered) element names, the W3C strongly recommends against them, and considers them non-conforming. But browsers are required to support them, and x-*identifiers won't conflict with future HTML specs and x-vendor-featureidentifiers won't conflict with other developers. A custom DTD can be used to work around any picky browsers.

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

Here are some relevant excerpts from the official docs:

以下是官方文档的一些相关摘录：

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

“适用规范可以定义新的文档内容（例如 foobar 元素）[...]。如果给定的符合 HTML5 文档的语法和语义因使用适用规范而没有改变，那么该文档仍然是符合 HTML5 的文档。”

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

“用户代理不能随意处理不符合要求的文档；无论输入文档是否符合，本规范中描述的处理模型都适用于实现。”

“HTMLUnknownElement 接口必须用于本规范未定义的 HTML 元素。”

W3C - HTML5: Conforming Documents
WhatWG - HTML Standard: DOM Elements

W3C - HTML5：符合文档
WhatWG - HTML 标准：DOM 元素

回答by Josh

I would like to point out that the word "valid" can have two different meanings in this context, either of which is potentially, um, valid.

我想指出，在这种情况下，“有效”这个词可以有两种不同的含义，其中任何一种都可能是，嗯，有效。

1. Should an HTML document with custom tags be considered valid HTML5?The answer to this is clearly "no." The speclists 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).

2. 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 specifyexactly 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.

1. 是否应该将带有自定义标签的 HTML 文档视为有效的 HTML5？答案显然是否定的。规范准确地列出了哪些标签在哪些上下文中有效。这就是 HTML 验证器不接受带有自定义标签或在错误位置带有标准标签（如标题中的“img”标签）的文档的原因。

2. 带有自定义标签的 HTML 文档是否会以标准的、明确定义的方式跨浏览器进行解析和呈现？在这里，也许令人惊讶的是，答案是“是的”。尽管该文件将不会在技术上被认为是有效的HTML5，HTML5规范没有规定应该当他们看到一个自定义标签到底该怎么做浏览器：总之，自定义标签的行为有点像一个<span>-它意味着什么和什么也不做默认，但它可以通过 HTML 设置样式并通过 javascript 访问。

回答by csuwldcat

Custom HTML elements are an emerging W3 standard I have been contributing to that enables you to declare and register custom elements with the parser, you can read the spec here: W3 Web Components Custom Elements spec. Additionally, Microsoft supports a library (written by former Mozilla devs), called X-Tag- it makes working with Web Components even easier.

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

回答by Henrik Vendelbo

To give an updated answer reflecting modern pages.

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

Custom tags are valid if either,

自定义标签在以下情况下有效，

1) They contain a dash

1）它们包含一个破折号

<my-element>

2) They are embedded XML

2) 它们是嵌入的 XML

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

This assumes you are using the HTML5 doctype <!doctype html>

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

Considering these simple restrictions it now makes sense to do your best to keep your HTML markup valid (please stop closing tags like <img>and <hr>, it's silly and incorrect unless you use an XHTML doctype, which you probably have no need for).

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

Given that HTML5 clearly defines the parsing rules a compliant browser will be able to handle any tag that you throw at it even if it isn't strictly valid.

鉴于 HTML5 明确定义了解析规则，兼容的浏览器将能够处理您抛出的任何标签，即使它不是严格有效的。

回答by James Holderness

Quoting from the Extensibility section of the HTML5 specification:

引用HTML5 规范的可扩展性部分：

For markup-level features that can be limited to the XML serialization and need not be supported in the HTML serialization, vendors should use the namespace mechanism to define custom namespaces in which the non-standard elements and attributes are supported.

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

So if you're using the XML serialization of HTML5, its legal for you to do something like this:

因此，如果您使用 HTML5 的 XML 序列化，那么您可以合法地执行以下操作：

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

However, if you're using the HTML syntax you are much more limited in what you can do.

但是，如果您使用 HTML 语法，那么您可以做的事情就会受到更多限制。

For markup-level features that are intended for use with the HTML syntax, extensions should be limited to new attributes of the form "x-vendor-feature" [...] New element names should not be created.

对于旨在与 HTML 语法一起使用的标记级功能，扩展应限于“x-vendor-feature”形式的新属性 [...] 不应创建新元素名称。

But those instructions are primarily directed at browser vendors, who would assumedly be providing visual styling and functionality for whatever custom elements they chose to create.

但这些说明主要针对浏览器供应商，他们可能会为他们选择创建的任何自定义元素提供视觉样式和功能。

For an author, though, while it may be legal to embed a custom element in the page (at least in the XML serialization), you're not going to get anything more than a node in the DOM. If you want your custom element to actually do something, or be rendered in some special way, you should be looking at the Custom Elements specification.

然而，对于作者而言，虽然在页面中嵌入自定义元素可能是合法的（至少在 XML 序列化中），但您只能获得 DOM 中的一个节点。如果您希望自定义元素实际执行某些操作或以某种特殊方式呈现，则应查看自定义元素规范。

For a more gentle primer on the subject, read the Web Components Introduction, which also includes information about the Shadow DOM and other related specifications. These specs are still working drafts at the moment - you can see the current status here- but they are being actively developed.

有关该主题的更温和的入门，请阅读Web 组件简介，其中还包括有关 Shadow DOM 和其他相关规范的信息。这些规范目前仍在工作草案中——你可以在这里看到当前状态——但它们正在积极开发中。

As an example, a simple definition for a greetingelement might look something like this:

例如，greeting元素的简单定义可能如下所示：

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

This tells the browser to render the element content in quotes, and prefixed by the text "Simon says:" which is styled with the color gray. Typically a custom element definition like this would be stored in a separate html file that you would import with a link.

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

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

Although you can also include it inline if you want.

尽管您也可以根据需要将其包含在内。

I've created a working demonstration of the above definition using the Polymer polyfill library which you can see here. Note that this is using an old version of the Polymer library - more recent versions work quite differently. However, with the spec still in development, this is not something I would recommend using in production code anyway.

我已经使用 Polymer polyfill 库创建了上述定义的工作演示，您可以在此处查看。请注意，这是使用旧版本的 Polymer 库 - 较新版本的工作方式大不相同。但是，由于规范仍在开发中，因此我不建议在生产代码中使用它。

回答by Erick Boileau

just use whatever you want without any dom declaration

只需使用您想要的任何内容，无需任何 dom 声明

<container>content here</container>

add your own style (display:block) and it will work with any modern browser

添加您自己的样式（显示：块），它将适用于任何现代浏览器

回答by Nisarg Shah

Custom tags are not valid in HTML5. But currently browsers are supporting to parse them and also you can use them using css. So if you want to use custom tags for current browsers then you can. But the support may be taken away once the browsers implement W3C standards strictly for parsing the HTML content.

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