自定义元素在HTML5中有效吗?

对于自定义标签在HTML5中是否有效，我一直无法找到一个明确的答案，比如:

<greeting>Hello!</greeting>

我在说明书中什么都没发现:

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

而且自定义标记似乎无法使用W3C验证器进行验证。

当前回答

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

<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

2014-11-03 19:19:56

其他回答

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

自定义标记是有效的，

1)它们包含一个破折号

<my-element>

2)它们是嵌入的XML

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

这里假设你使用的是HTML5 doctype <!doctype html >

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

鉴于HTML5清楚地定义了解析规则，兼容的浏览器将能够处理您扔给它的任何标记，即使它不是严格有效的。

2017-01-05 22:08:08

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

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

自定义元素是更大的W3规范Web组件的一部分，另外还有模板、HTML导入和影子DOM。

Web组件使Web应用程序作者能够使用视觉的丰富程度和交互性是CSS无法实现的单独使用，并且易于组合和重用，而不可能使用脚本今天库。

但是，在谷歌开发人员的这篇关于自定义元素v1的优秀通览文章中:

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

一些资源

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

2012-03-23 19:08:06

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

<container>content here</container>

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

2019-08-21 20:14:44

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

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

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

html元素只能包含head元素和body元素。

The body element may only contain Flow content where 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

等等。

在任何情况下，内容模型都不会说“你可以把任何你喜欢的元素放在这个里面”，这对于自定义元素/标记来说是必要的。

2012-03-24 03:20:23

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

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

- 水貂CBOS

2014-11-03 19:19:56

自定义元素在HTML5中有效吗?

推荐文章

最新文章

标签