自定义元素是有效的HTML5吗？

180

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

<greeting>Hello!</greeting>

我在规范中一无所获：

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

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

html custom-element

— d13
source

2

您可能不想在4.5年前撰写的HTML5文章中投入过多的资源。

— jessegavin 2012年

9

克罗克福德的文章很奇怪。重要的一句话是“这是我对更友好，更柔和的HTML 5的建议”。换句话说，这不是我们今天知道的HTML5，而是关于将不同的HTML 5替代HTML 4的提案。很奇怪，因为它的日期是2007年11月，当时W3C已经从事HTML5的开发工作已经有将近一年的时间了。。他在这里使用“允许”一词令人困惑。自定义标签从未“符合” /“有效”，但是浏览器解析器在它们存在的情况下仍然可以继续工作。无论如何，克罗克福德的建议丝毫没有吸引。几乎没有任何部分被合并到HTML5中。

— Alohci 2012年

3

自定义元素正变得第一类，为Web组件自定义元素新兴W3标准已经开始在Firefox和Chrome土地：dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/...

— csuwldcat

3

至于道格拉斯·克罗克福德，我很想相信他所说的一切。

— artistoex13年

1

Web浏览器支持表，用于自定义元素caniuse.com/#feat=custom-elements

— Adrien是

169

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

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

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

Web组件使Web应用程序作者能够定义具有仅靠CSS所无法实现的视觉丰富度和交互性的小部件，并且易于编写和重用当今脚本库所无法实现的小部件。

但是，从Google Developers上有关自定义元素v1的精彩文章中，您可以了解到：

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

一些资源

示例Web组件可从https://WebComponents.org获得。
WebComponents.js充当Web组件的填充，直到所有地方都支持它们为止。另请参见WebComponents.js github页面和Web浏览器支持表。

— 杰西加文
source

3

这是一个很好的答案（+1），但规则有些循环。“用户不得做不允许做的事情……”

— Alohci 2012年

8

@Alohci，您应该在报价中添加下3个字：“按此规范”。

— jessegavin 2012年

1

我还阅读了规范的这一部分，这确实使我感到困惑。原因如下：1）HTML5中允许使用自定义属性。这证实了Alochi的循环论证观察。2）规范中没有任何地方说不允许使用自定义元素。

— 2012年

这句话充其量是含糊的。当然，W3C会以一种或另一种方式采取更具体的立场吗？

— Flash

2

指向customelements.io的链接不再有用。您介意对其进行更新/删除吗？

— Nisarg

22

这是可能且允许的：

用户代理必须将他们不理解的元素和属性视为语义中立的；将它们留在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（我的博客）

— 斯维根
source

好像您没有阅读整个部分。它不仅主要涉及属性，而且甚至强烈不鼓励在那里进行定制。

— 安德鲁·巴伯

重复我的其他评论，是的，很抱歉，我不知道这是我的博客。我认为这很明显。这篇文章是直接相关的。而且我要补充一点，这并不是要作为备份我提出的任何“主张”的参考，而是以更长的格式显示如何做到这一点。

— svidgen

1

重点很简单：规范明确允许这些东西。而且，在大多数令人不快的行为情况下，该规范显然是针对用户代理供应商而不是HTML作者。

— svidgen

3

以上引用的该声明似乎已在w3.org/TR/html5/introduction.html#extensibility的最新版本中删除。到目前为止，我仍然找不到任何文档来说明使用非连字符自定义HTML元素是否有效，或者是否需要JS语句来验证连字符自定义HTML元素（html5rocks.com/en/tutorials/webcomponents/ customelements）。

— John Slegers

@JohnSlegers是的，看起来文档和/或锚点已重新布置。我已经更新了链接。我的答案中的引号位于链接到“ 可扩展性”部分底部的附近。

— svidgen 2014年

14

注意：以下答案在2012年撰写时是正确的。此后，情况有所发展。HTML规范现在定义了两种类型的定制元素-“自治定制元素”和“定制内置元素”。前者可以到任何期望措辞内容的地方。多数位于体内，但不包括ul或ol元素的子元素，或td，th或caption元素以外的表格元素中的位置。后者可以到达它们扩展的元素可以到达的任何位置。

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

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

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

该body元件可仅包含流内容，其中内容流被定义为元素： a，abbr，地址，区域（如果它是地图元素的后代），文章，一旁，音频，b，bdi，bdo，blockquote，br，按钮，canvas，cite，代码，命令，数据列表，del，详细信息，dfn，div dl，em，embed，fieldset，fig，footer，form，h1，h2，h3，h4，h5，h6，标头，hgroup，hr，i，iframe，img，input，ins，kbd，keygen，标签，地图，标记，数学，菜单，仪表，导航，noscript，对象，ol，输出，p，pre，进度，q，ruby，s，samp，sample，script，section，select，small，span，strong，style（（如果存在scoped属性），sub，sup，svg，表格，textarea，时间，u，ul，var，video，wbr和Text

等等。

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

— 阿罗奇
source

好的，所以我们可以假设，如果未提及自定义元素，则也不允许它们。这似乎很公平。

— d13 2012年

4

这个答案现在无效，新兴的W3 Web组件自定义元素标准现已开始在浏览器中使用：dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/…–

— csuwldcat

1

@csuwldcat-实际上不。HTML5或更高版本的标准仍将需要以某种方式进行更新，以使此类自定义元素成为其内容模型的一部分。不过，这是个有趣的消息。我可以在哪些浏览器上使用它们？

— Alohci 2013年

3

@Alochi-很显然，任何其他使用旧语言的规范都需要进行更新以反映这一新现实，但是HTML是一种实时标准，并且不会阻止其他规范-一旦我们进入标准的下一阶段，就将进行更新跟踪。您可以在Chrome Canary中试用Web组件的本地实现，然后在Firefox Aurora中试用。此外，在4种Web组件规范中的3种中都有可用的polyfill，在当今的所有现代浏览器中都可以很好地工作-其中包括“自定义元素”规范/功能。

— csuwldcat

那么自定义元素可以放在某些地方吗？还是您说根本不允许他们？

— Melab

12

基本自定义元素和属性

自定义元素和属性在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元素

— 比约尔
source

11

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

具有自定义标签的HTML文档是否应被视为有效的HTML5？ 答案显然是“不”。该规范准确列出了哪些标签在什么情况下有效。这就是HTML验证程序将不接受带有自定义标签或标准标签位于错误位置（例如标头中的“ img”标签）的文档的原因。
带有自定义标签的HTML文档是否将在浏览器中以标准，清晰定义的方式进行解析和呈现？ 在这里，也许令人惊讶，答案是“是”。即使从技术上讲该文档不会被视为有效的HTML5，HTML5规范也确实指定了浏览器在看到自定义标记时应该执行的操作：简而言之，自定义标记的作用类似于<span>-表示没有任何意义，并且无所作为默认设置，但可以通过HTML设置样式并通过javascript访问。

— 乔希
source

5

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

— csuwldcat
source

1

该草案通过了吗？

— Starx 2013年

部分内容已在Firefox和Chrome中降落-我们正在紧密合作，并希望在2013年底之前实现完整的实现

— 。– csuwldcat

1

现在是2014年，是否已全面实施？

— Hasib Mahmud 2014年

1

@JamieHutber，并在一年后看到您的网页在最新的浏览器中中断。浏览器互操作性的规则＃1：遵守规则。

— 李斯特先生，2014年

1

@HasibMahmud规格现已完成，将在几周内登陆Chrome Beta，大约六周后登陆Firefox Aurora。您可以在Firefox极光今天翻转配置标志使用它们dom.webcomponents.enabled来true。

— csuwldcat 2014年

4

提供反映现代页面的更新答案。

自定义标签在任何情况下均有效，

1）它们包含破折号

<my-element>

2）它们是嵌入式XML

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

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

考虑到这些简单的限制，现在应该尽最大努力使HTML标记保持有效（请停止关闭诸如<img>和的标记<hr>，除非您使用XHTML doctype（除非您可能不需要），否则这是愚蠢且不正确的）。

鉴于HTML5清楚地定义了解析规则，兼容的浏览器将能够处理您向其抛出的任何标签，即使该标签严格无效也是如此。

— 亨里克·文德尔博
source

3

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

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

因此，如果您使用的是HTML5的XML序列化，则执行以下操作是合法的：

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

但是，如果您使用的是HTML语法，那么您将只能做些限制。

对于打算与HTML语法一起使用的标记级功能，应将扩展限制为“ x-vendor-feature”形式的新属性，而不应创建新的元素名称。

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

对于作者来说，尽管在页面中嵌入自定义元素（至少在XML序列化中）可能是合法的，但除了DOM中的节点之外，您将获得更多。如果您希望自定义元素实际执行某项操作或以某种特殊方式呈现，则应查看“ 自定义元素”规范。

有关该主题的更入门的知识，请阅读Web Components简介，其中还包括有关Shadow DOM和其他相关规范的信息。这些规范目前仍在起草中-您可以在此处查看当前状态-但它们正在积极开发中。

例如，一个greeting元素的简单定义可能看起来像这样：

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

这告诉浏览器将元素内容括在引号中，并以带有灰色样式的文本“ Simon said：”作为前缀。通常，这样的自定义元素定义将存储在单独的html文件中，您将通过链接导入该文件。

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

虽然您也可以根据需要内联它。

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

— 詹姆斯·霍尔德尼斯
source

2

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

<container>content here</container>

添加您自己的样式（display：block），它将与任何现代浏览器一起使用

— 埃里克·波洛（Erick Boileau）
source

1

data-*属性在HTML5甚至HTML4中都是有效的，所有用于尊重它们的Web浏览器都有效。从技术上来说，添加新标签是可以的，但不建议仅因为以下原因：

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

我只在Google不在意的地方使用自定义标签，例如在游戏引擎iframe中，我制作了一个<log>包含<msg>，<error>并且<warning>-且仅通过JavaScript的标签。根据验证者，这是完全有效的。它的样式甚至可以在Internet Explorer中使用！;]

— ПетърПетров
source

1

这对验证程序是有效的，因为您正在使用JavaScript创建这些元素，而验证程序却看不到它们，因为它没有运行您的JavaScript。它只会看到首次加载时显示的页面。

— animuson

究竟。尽管无效的HTML，自定义标记仍然是有效的SGML，而HTML毕竟是SGML。CSS可用于设置自定义标签的样式，并且在IE中非常有效。:)另外，您可以在DOCTYPE规范中使用自己的自定义元素指定自己的DTD，因此即使没有JavaScript，我的自定义标签实际上也可以得到验证-但我不在乎它们-游戏引擎GUI系统绝对不是Google工作:)

— ПетърПетров

1

好吧，有一个陷阱。您不能只是随意添加自定义元素。您必须定义它们并在DTD中注册它们，才能将它们视为“有效” HTML。仅仅因为某些事情有效并不意味着它是有效的。

— animuson

如果仅在元素名称中添加限定符，例如<x-msg>，<x-log>等，那么您将符合Web组件/自定义元素规范。

— 尼尔·梦露

在仅提供Webkit来呈现动态GUI的游戏引擎中，没有人会关心DTD。HTML的任何未知标记都是JS的HTMLUnknownElement，仍然可以与JQuery和CSS完美配合，因此您的GUI最终会获得一些语义： <inventory>，<item type="potion" sprite="2">-因此，最好将SGML + CSS而不是HTML命名，尽管HTML元素具有定义因为工作是-按钮，列表，...

— ПетърПетров

1

自定义标记在HTML5中无效。但是当前浏览器支持解析它们，您也可以使用CSS来使用它们。因此，如果您想对当前的浏览器使用自定义标签，则可以。但是，一旦浏览器严格执行W3C标准以解析HTML内容，该支持就可能被取消。

— 尼萨尔格（Nisarg Shah）
source

1

也许，当他们停止支持后会发生<center>和<marquee>？

— 拉文斯汀

1

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

<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）来启动标签，然后您就可以使用任何非字母字符了。如果在CSS中，则必须使用“ \”（反斜杠）以查找元素，例如需要Query \ ^ {...}。但是在JS中，您只是以自己的方式调用它。我希望这会有所帮助。看例子在这里

-Mink CBOS

— 埃弗勒隆·丹兹勒
source

3

这是我最近看到的最奇怪的HTML :)

— Dan Dascalescu