文章摘要
文章指出可以自定义HTML标签，浏览器会将其视为通用元素处理，只需通过CSS定义样式。相比使用大量类名的div和span，自定义标签能提升代码可读性，特别是在嵌套复杂结构时。但建议在有合适语义标签时优先使用标准标签。
文章总结
标题：自定义HTML标签的妙用（Maurycy博客）
文章指出，开发者可以突破传统思维，直接创建自定义HTML标签来替代常见的div/span结构。例如：
html
<酷炫效果>
你好，世界！
</酷炫效果>
配合对应的CSS样式：
css
酷炫效果 {
display: block;
font-weight: bold;
text-align: center;
filter: drop-shadow(0 0 0.5em #ff0);
color: #ff0;
}
浏览器会将无法识别的标签视为通用元素，这种行为已被标准化。若使用带连字符的标签名（如
相较于传统的class嵌套写法：
```html
...
```
自定义标签能显著提升代码可读性：
html
<主文章>
<文章标题>
<文章引用>
<引用正文>
...
</引用正文>
</文章引用>
<!-- 轻松定位插入位置 -->
</文章标题>
</主文章>
这种方法无需反复检查闭合标签，使代码结构一目了然。文章建议在现有语义化标签不适用时，优先考虑自定义标签而非滥用div/span配合类名。
评论总结
评论内容总结
1. 支持使用自定义HTML标签的观点
- 主要观点：自定义HTML标签（如
<my-tag>）默认行为类似<span>，可以通过CSS和JavaScript增强功能，提供更清晰的语义和代码结构。- 引用：
- "Unknown tags will become
HTMLUnknownElementand behave like a span." (hecanjog) - "It's very nice to write... modern HTML fills that gap." (hecanjog)
- "Unknown tags will become
- 引用：
- 工具与案例：
- 使用Custom Element API（ok123456）或Lit框架（ianbutler）实现组件化。
- 实际案例：
<yes-script>标签隐藏JS禁用内容（aaviator42）。
2. 反对使用自定义标签的观点
- 主要观点：自定义标签破坏语义化，增加维护成本，建议优先使用标准标签或
class属性。- 引用：
- "Do not do this. Use the
classattribute... that is what it is for." (singpolyma3) - "It just adds confusion around which elements are semantic... vs which are custom." (crazygringo)
- "Do not do this. Use the
- 引用：
- 替代方案：用
<div class="article">替代<main-article>（chrismorgan）。
3. 中立或实践性建议
- 平衡方案：混合使用标准标签和少量自定义组件标签（如
<x-card>），避免过度使用（verisimilidude）。- 引用：
- "If there's a native tag... always use that first." (verisimilidude)
- "When most tags are custom... it creates new readability problems." (verisimilidude)
- 引用：
- 技术提示：通过CSS设置自定义标签的默认样式（rassso）。
4. 其他相关讨论
- 历史背景：IE时代需
document.createElement，HTML5 Shiv解决兼容性（cheeaun）。 - 框架应用：Angular利用自定义标签实现组件化（matt7340）。
- 无障碍问题：质疑自定义标签对屏幕阅读器的影响（orliesaurus, sitzkrieg）。