在现代浏览器中使用自定义HTML标签存在哪些严重技术问题（除旧浏览器兼容外）

当项目规模扩大，尤其是使用Tailwind这类框架时，代码很容易变得臃肿，甚至90%的时间都花在元素间查找所需的class上。为了保持代码整洁，有人会选择使用非HTML5标准的自定义标签（不是<aside>、<header>这类原生语义标签），示例如下：

Tailwind场景对比 #

原代码

<div class="flex items-center justify-center p-4 rounded shadow">
   <div id="inner"> <!--  用来避免flex布局影响子元素的临时标签 -->
      <div> somedata </div>
      <div> somedata </div>
      <div> somedata </div>
   </div>
</div>

替换为自定义标签后

<card class="flex items-center justify-center p-4 rounded shadow">
   <inner> 
      <div> somedata </div>
      <div> somedata </div>
      <div> somedata </div>
   </inner>
</card>

原生CSS场景对比 #

原代码

<div class="post">
 <header>
  <div class="header__image">
   <img src="example.jpg">
  </div>
  <div class="header_details">
    ...
  </div>
 </header>
 <div class="post__content">
 </div>
 .....
</div>

替换为自定义标签后

<post>
 <header>
    <picture>
       <img src="example.jpg">
    </picture>
 </header>
 <content>
 <p> something </p>
 </content>
 ...
</post>

除了旧浏览器不支持外，使用这类自定义HTML标签还存在以下严重技术问题：

• 语义化与可访问性缺失：屏幕阅读器、搜索引擎等工具依赖标准HTML标签的语义解析内容。自定义标签没有默认语义，会导致辅助技术无法正确识别内容结构，既影响视障用户体验，也会拉低SEO表现。
• 样式默认行为不一致：自定义标签在浏览器中默认是display: inline，而多数业务场景需要块级展示。如果忘记显式设置display属性，会出现布局错乱，比如本该换行的元素挤在一行。
• 工具与API兼容性问题：很多前端工具（代码检查器、模板引擎、自动化测试工具）和DOM API是针对标准标签设计的。自定义标签可能被标记为无效，或者无法被工具精准定位、解析，增加调试成本。
• 命名冲突风险：自定义标签没有统一命名规范，如果未来HTML标准新增同名标签，或与第三方组件库命名撞车，会导致代码在新版本浏览器或集成组件时出现兼容性问题。
• 事件处理异常：部分浏览器对自定义标签的事件冒泡、委托逻辑存在差异，可能出现事件无法被正确捕获的情况，影响交互功能稳定性。
• 序列化与解析异常：在服务器端渲染或通过innerHTML序列化DOM时，部分浏览器对自定义标签的解析、序列化逻辑不一致，会导致生成的HTML结构不符合预期。

内容的提问来源于stack exchange，提问作者Danial Qsk