什么是有效的HTML5自定义标签？ [英] What are valid HTML5 custom tags?

问题描述

最近我一直在阅读有关如何通过在名称中添加短划线来使自定义标签在HTML5中有效的信息，因此我一直想知道自定义标签的实际规则/指南是什么。

Recently I've been reading about how you can make custom tags valid in HTML5 by putting a dash in the name, so I've been wondering what the actual rules / guidelines are for custom tags.

custom-tag √

自定义 X

-custom ？

自定义 - ？

custom-tag √
custom X
-custom ?
custom- ?

我想知道的是最后两个是否有效。

What I want to know is if the last two are valid.

另外，作为奖励，我对自定义属性如何运作感到好奇..据我所知：

Also, as a bonus, I'm kind of curious about how custom attributes work.. as far as I know:

< div my-attribute =demo> X

< div data-my-attribute = demo> √

< custom-tag my-attribute =demo> √

< custom-tag data-my-attribute =demo> √

但是如果我尝试使用现有的全局属性会发生什么，例如 title 或 class ？

But what happens if I'm trying to use existing global attributes, such as title or class?

这个CSS ..

custom-tag.banana {
    color: yellow;
}

定位此HTML？

<custom-tag class="banana">
    Test!
</custom-tag>

此外，无论全局属性是否与自定义标签一起使用，此CSS都应针对上述HTML，对吗？

Also, this CSS should target the above HTML whether or not global attributes work with custom tags, correct?

custom-tag[class=banana] {
    color: yellow;
}

---

最后，是否有规则/指南说明我的自定义属性名称中应该有一个 - ，比如自定义标签？例如。 < div custom-tag =demo> 。如果有，就像我原来的问题一样，是否适用于 -customtag 和自定义标签 - ？

---

Finally, is there a rule/guideline stating I should have a "-" in the name of my custom attribute, like custom tags? E.g. <div custom-tag="demo">. If there is, like my original question, does it work with -customtag, and customtag-?

感谢您的帮助。 ：）

推荐答案

TL; DR：没有有效的自定义HTML5标签。

TL;DR: There are no valid custom HTML5 tags.

我想你可能指的是自定义元素工作草案由 Web应用程序工作组，描述了这一点：

I think you may be referring to this Custom Element Working Draft proposed by the Web Applications Working Group, which describes this:

自定义元素类型标识自定义
元素接口并且是必须与NCName
生成匹配的
字符序列，必须包含U + 002D HYPHEN-MINUS
字符，并且不得包含任何大写
ASCII字母。自定义元素类型不能
是以下值之一：

The custom element type identifies a custom element interface and is a sequence of characters that must match the NCName production, must contain a U+002D HYPHEN-MINUS character, and must not contain any uppercase ASCII letters. The custom element type must not be one of the following values:

• annotation-xml


• color-profile


• font-face


• font-face-src


• font-face -uri


• font-face-format


• font-face-name


• missing-glyph

• annotation-xml
• color-profile
• font-face
• font-face-src
• font-face-uri
• font-face-format
• font-face-name
• missing-glyph

此外，根据HTML5规范， HTML标记名称只能以ASCII字母开头。如果我们假设自定义元素提议不建议对HTML语法规范进行任何更改，则以连字符 - 减号字符开头的元素不是有效的HTML标记名称。如果我们结合自定义元素工作草案提案和HTML5语法规范所说的内容，那么我们可以得出结论< -custom> 不 a格式正确的HTML，因此不能是有效的自定义元素，因为标记名称不以ASCII字母开头。另一方面， custom - 既是格式良好的HTML又是有效的自定义元素。

Additionally, according to HTML5 specification, HTML tag names can only start with ASCII letters. If we assume that the Custom Element proposal does not propose any changes to the HTML Syntax specification, then elements starting with hyphens-minus character is not a valid HTML tag name. If we combine what the Custom Element Working Draft proposal and the HTML5 Syntax specification says, then we can conclude that <-custom> is not a well-formed HTML and so cannot be a valid Custom Element because the tag name does not start with ASCII letter. On the other hand, custom- is both a well-formed HTML and a valid Custom Element.

请注意自定义元素是工作草案 ，而不是W3C推荐标准。这意味着自定义元素在HTML5中无效。也不要抱有希望，W3C中提出的许多工作草案从未到过任何地方（并且有充分的理由，并非所有提案都是好的）。

Note that Custom Element is a Working Draft, not a W3C Recommendation. This means that Custom Elements is not valid in HTML5. Don't get your hopes up either, a lot of Working Drafts that are proposed in W3C never got anywhere (and for good reasons too, not all of the proposals are good).

< rant>我个人希望这个提议被击落。我花了一些时间阅读这个提议，看起来这个提案试图重新发明XML Namespace和SGML，并且可能忘记了HTML和语义网应该是什么。在任何情况下，HTML5语法已经允许作者使用HTML5规范中未指定的元素，我认为没有必要标准化如何创建自定义元素。我希望HTML5工作组中的人能够理智地认识到这个提案有多糟糕，并投票支持这个提案。保持HTML5不受作者定义的自定义修改的影响。< / rant>

<rant>Personally I hope that this proposal got shot down. I spent some time reading this proposal, it looks like this proposal tried to reinvent XML Namespace and SGML poorly, and probably forgot about what HTML and the semantic web is supposed to be. In any case, HTML5 syntax already allows authors to use elements that aren't specified in HTML5 specification, I don't see any need to standardize how to create custom elements any further than that. I hope that there would be people in HTML5 working group sane enough to realize how bad this proposal is and vote this proposal off. Keep HTML5 closed from author-defined custom modifications.</rant>

如果您想定义自己的自定义词汇表，我建议您编写一个带有<的XML应用程序a href =http://www.w3.org/TR/html5/the-xhtml-syntax.html\"rel =nofollow> XHTML5 ，它实际上指定了如何定义自己的自定义元素XML命名空间。与HTML不同，XML设计为可扩展。

If you want to define your own custom vocabularies, I suggest you should write an XML application with XHTML5, which actually specifies how you can define your own custom elements with XML namespaces. Unlike HTML, XML is designed to be extensible.

关于自定义数据属性的问题，这就是 HTML5规范说：

As for your question about custom data attribute, this is what the HTML5 specification says:

自定义数据属性是no namespace中的一个属性，其名称以字符串data-开头，连字符后面的至少一个字符与XML兼容，并且不包含大写的ASCII字母。

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

因此，对于您的示例，这些是有效数据 - *属性：

So with your examples, these are valid data-* attributes:

• data-my-attribute

• data-my-attribute

虽然不是：

• my-attribute

• my-attribute

据我所知，自定义元素工作草案未指定自定义元素上的自定义属性的任何其他语法要求，也不是xplicitly允许使用任意非data- *属性以及自定义属性如何与现有HTML属性交互，尽管我们可以合理地推断允许自定义属性可能是提案的意图。

As far as I can tell, the Custom Elements Working Draft does not specify any additional syntactical requirement for custom attributes on Custom Elements, nor does it explicitly permit using arbitrary non-data-* attributes and how custom attributes interacts with existing HTML attributes, although we can reasonably infer that allowing custom attributes is probably the intent of the proposal.

关于CSS的问题，是的，你理解正确，那些是有效的CSS选择器来定位这些自定义元素。 CSS可用于设置任何元素的样式，不仅包括HTML定义的元素，还包括其他标记语言（如SVG，MathML）以及使用XHTML时的任意XML词汇表。 CSS选择器规范实际上并不以任何实质性方式依赖于HTML词汇表（虽然在示例中大量使用HTML，但大多数人都是最熟悉的。因此，CSS Selector语法可用于引用文档中的任何元素，包括HTML规范中未指定的自定义元素。样式自定义标记现在已在所有主流浏览器中使用。您可以使用任意标记名称，并使用您期望的选择器选择它们，CSS将按照您的预期对其进行样式设置。不需要在标记名称中使用连字符减号来实现此目的。

As for your question about CSS, yes you understood correctly, those are valid CSS selectors to target those Custom Elements. CSS can be used to style any elements, not just elements defined by HTML, but also other markup languages like SVG, MathML, as well as arbitrary XML vocabularies when using XHTML. The CSS Selectors specification does not actually depend on HTML vocabulary in any substantial way (although HTML is used heavily in the examples, as it's what most people are most familiar with). It is for this reason that CSS Selector syntax can be used to refer to any elements in the document, including custom elements that aren't specified in the HTML specification. Styling custom tag already works in all major browsers today. You can use any arbitrary tag names, and select them with the selector that you expect, and CSS will style them as you would expect them to be. There is no requirement for having hyphen-minus in the tag name for this to work.

这篇关于什么是有效的HTML5自定义标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！