HTML5 中的自定义标签命名空间实现答案

【问题标题】：Custom tag namespace implementation in HTML5HTML5 中的自定义标签命名空间实现
【发布时间】：2012-01-22 05:42:01
【问题描述】：

对于我正在构建的音频播放器，我希望有一个类似于 Google 和 Facebook 用于共享小部件的标签。例如，它可能是：

<fp:player data-type="mp3" data-href="/path/to/file.mp3" />

实现此自定义标记的最佳方法是什么，并使其在尽可能多的浏览器中有效？

【问题讨论】：

您能否在将服务器端的标签发送到客户端之前将其转换为有效的 HTML？或者您是否特别希望在源代码中使用该标签？

标签： javascript html dtd

【解决方案1】：

上述链接的规范还指出，

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

如果我正确理解规范，Quentin 发布的报价指的是用户代理扩展。（我假设它们是指特殊的浏览器和浏览器插件。）用户代理不应创建新的标签或属性。 Web 开发人员 可以使用他们喜欢的任何组成标签和属性。并且该规范明确指示用户代理开发人员考虑未知标签和属性，并将它们包含在 DOM 中以及在呈现页面时。

使用脚本访问它们有点棘手。 IE 的 7 和 8 为您添加命名空间以查找那些自定义标签，这使您的文档在技术上无效 -- 但仍然功能齐全！

请看这里（我的博客）：http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html

【讨论】：

用户询问有效标记。正如您所注意到的，它在“技术上”是无效的。你可以修改一些东西来让它工作，但这并不意味着你应该这样做。
另请注意，您需要披露您正在链接到您自己的博客；一个事实使它用作您的答案的参考非常可疑。
我在上面进行了编辑，注意这是我的博客。是的，我理解对有效性的关注，因此明确说明代码变得无效的点（添加命名空间）。然而，我担心的是第一个（选择的）答案的仓促、不完整的方式，这表明自定义标签对于 developers 是禁止的，这与规范所述的不完全一致。规范实际上相反。只是在引入 hack 以强制 IE 的 7 和 8 合规时，它才变得无效 - 但仍然有效。
... 所选答案根本不完整且具有误导性，IMO。很抱歉，我没有意识到链接到我写的相关文章需要我明确指出。我认为我的网名很明显！
明白！不是每个人都仔细查看 URL 以查看此类项目，因此这很清楚。这是一个很棒的编辑。谢谢！

【解决方案2】：

观察 html5shim 或 html5shiv 如何创建新元素：https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

基本上你只需要 document.createElement() 元素，然后你就可以使用它了。

【讨论】：

【解决方案3】：

来自the HTML specification：

对于旨在与 HTML 语法一起使用的标记级功能，扩展应限于“x-vendor-feature”形式的新属性，其中 vendor 是一个短字符串，用于标识负责扩展的供应商, 特征是特征的名称。 不应创建新元素名称

所以你不能创建它并符合规范，Facebook 和谷歌非常非常顽皮。

无论如何，您似乎都在尝试重塑the <audio> element。所以只要使用它，扩展语言的问题就会消失。

【讨论】：

不是重新发明<audio>，我正在为几种类型的音频嵌入制作通用标签。
<audio> 是用于多种音频嵌入的通用标签。
我选择这个答案是因为它阐明了不应创建新元素名称。