自定义标签的可用性
我们早已习惯了使用大量的DIV来给页面布局,把具体的样式交给class属性来指配。但我们到底为什么非要用DIV不可呢?我觉得大堆的DIV堆砌是一种毫无语义的糟糕设计,在HTML自带的标签不够用时可以试试自定义标签,而且这可以有全浏览器兼容方案的。
在切图时候经常会遇到标签不够用的情况,非得给元素加class才能解决,而且class的命名总是想不出合适的。这时候如果使用自定义标签就可以解决这些问题。虽然自定义标签也需要命名,但它的定义不再局限于“样式”,可以突破“样式”的局限使用更多词汇。
在HTML5中,标签名带连接符“-”的标签是用于自定义的。虽然在API中提供了document.registerElement方法用于为这些自带标签指派具体的类型,但即使没有指派,它也会被作为一个HTMLUnknownElement存在。而这个HTMLUnknownElement也同样是继承于HTMLElement的,所以它依然是一个标签。
也就是说,我们可以在现代浏览器中使用任何标签,它只是被作为HTMLUnknownElement处理而已。但我们也不能那么随便,为了兼容考虑,自定义标签的命名还是应该加入连接符“-”,至于registerElement步骤,如果没有特殊需求是可以省略的,反正Firefox目前也没支持。
当然低版本浏览器不会直接支持这个,但我想很多人都已经知道如何让这些奇怪的标签在版本浏览器上生效了,因为一些HTML5新入的标签在低版本浏览器上本身就是不支持的,我们通常使用document.createElement的方法来使其兼容,对这些自定义标签也是同样的做法。
我们使用的标签名是规范的自定义标签名,绝对不会于默认标签冲突,而且浏览器可以正常解析。低版本浏览器上的兼容确实有点粗暴,但是HTML5自带的新入标签也同样是这么粗暴的兼容下去的,所以这么做也完全不会内疚。
综合这些因素,自定义标签是完全可以使用的,即使在商业项目上用也没问题。唯一需要注意的是团队开发时使用自定义标签的统一性。