使用未定义的HTML元素可以获得什么影响？

Question

为了编写更具表现力的HTML,我觉得自定义HTML元素对于我可能编写的任何webapp或文档来说都是一个很好的方式,它具有从标记名称本身发出的良好含义而不使用注释.

看来我可以用以下内容定义自定义HTML元素:

document.registerElement("x-el");

但是,在定义它之前,我似乎也可以使用自定义元素:

<body>
    <x-salamander>abc</x-salamander>
</body>

甚至:

<salamander>abc</salamander>

我想这是无效的HTML,但是Firefox和Chromium都会继续显示元素而没有任何问题或控制台警告.

我甚至可以在没有浏览器投诉的情况下执行以下操作:

document.getElementsByTagName("salamander")[0]

在CSS中使用此标记名称作为选择器也可以正常工作.那么,如果我以这种方式使用未声明的元素,我可能面临哪些问题？

Answer 1

你要做的事情的问题并不是我们可以告诉你它会以某种预期的方式打破.当你以这种方式偏离标准时,没有人知道会发生什么.根据定义,它是未定义的,并且看到它的浏览器的行为也是未定义的.

也就是说,它可能会很棒!这是要记住的事情:

HTMLUnknownElement接口就是你用来支持的方式调用它的工具 - 据我在5分钟的搜索中可以看出,它是在HTML5规范中引入的,所以在适当使用它的HTML5浏览器中,这不是更长的未定义场景.这是registerElement发挥作用的地方,可以使用HTMLUnknownElement并使其知晓.
浏览器通常非常善于应对意外的标记......但它并不总能产生很好的效果(参见:怪癖模式).
并非所有浏览器都是平等的.Chrome浏览器,火狐,Safari,歌剧,甚至IE将可能有一些可靠的方法来可靠地(甚至前期的HTML5)处理这些元素......但我不知道什么是屏幕阅读器(山猫)或其他各种深奥的,过时的,利基甚至未来的浏览器也会用它.
每个人都说了同样的话,但值得注意的是:你将无法通过验证.只要你知道它们是什么以及为什么它们在那里就可以在你的页面上出现验证错误,这是合格的,但你最好有充分的理由.

浏览器有很长的历史记录,无论你给他们什么,并尝试用它做一些合理的事情,所以你很可能没问题,如果你对主要针对HTML5浏览器感兴趣,那么你很可能没问题.与HTML相关的所有内容一样,唯一的通用建议是测试目标受众.