网页开发中使用未定义自定义HTML标签替代div会存在哪些问题？

这种直接使用未定义自定义HTML标签替代常规带class的div的写法存在较多隐患，不建议在生产环境使用，具体问题如下：

• 兼容性问题：老旧浏览器（如IE8及更低版本）对未识别的自定义标签支持极差，会将其解析为无属性的匿名节点，导致绑定的样式、JS逻辑完全失效，甚至会打乱整个DOM树的结构，出现意料之外的布局错误。除此之外不同浏览器对未定义自定义标签的默认样式、默认事件响应逻辑可能存在差异，你需要额外编写大量重置代码来保证多端表现一致，反而增加了开发成本。
• 语义化与无障碍缺陷：、这类自定义标签没有公共语义，搜索引擎爬虫、屏幕阅读器等辅助工具无法识别标签对应的内容属性，既会影响页面SEO效果，也会导致视障用户无法正常访问页面内容，不符合Web无障碍标准。
• 命名冲突风险：无特殊命名规则的自定义标签，未来可能和HTML标准新增的原生标签重名，届时浏览器原生标签的默认行为、默认样式会和你自行编写的逻辑、样式产生冲突，导致页面功能异常，修复成本极高。W3C规范中要求自定义元素名称必须包含短横线（如），就是为了避免和原生标签命名冲突，你当前的写法不符合该规范要求。
• 可维护性差：团队协作场景下，这类无统一规范的自定义标签会大幅提升沟通和维护成本，其他开发者无法直接通过标签判断其用途——比如是仅用来设置文本颜色，还是承载了错误提示的逻辑？后续迭代修改时很容易出现误改、漏改的问题。
• 标准校验不通过：这类未定义的自定义标签无法通过W3C HTML标准校验，排查页面问题时会多出很多无效的错误提示，提升问题排查成本，部分严格的CI/CD流程会直接因为HTML校验不通过阻断部署。

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