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

2022-01-30 00:00:00 html custom-element

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

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

<greeting>Hello!</greeting>

我在规范中找不到任何东西:

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

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

自定义标签似乎无法使用 W3C 验证器进行验证.

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

推荐答案

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

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

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

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.

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

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

Web 组件使 Web 应用程序作者能够定义具有CSS 无法实现的视觉丰富度和交互性水平单独使用，并且脚本无法轻松组合和重用今天的图书馆.

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.

但是，从这篇关于 Google Developers 的优秀的演练文章中可以了解到自定义元素 v1:

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

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

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.

一些资源

  • https://WebComponents.org
    • 上提供了示例 Web 组件
  • WebComponents.js 充当 Web 组件的 polyfill，直到它们在所有地方都得到支持.另请参阅 WebComponents.js github 页面 &网络浏览器支持表.
  • Example Web Components are available at https://WebComponents.org
  • WebComponents.js serves as a polyfill for Web Components until they are supported everywhere. See also the WebComponents.js github page & web browser support table.

相关文章