如何定义空的自定义HTML标签？无需创建Web Component是否可行？

不用费劲去创建Web Component，也能轻松用上自定义的空标签<icon-star>，给你分享几个简单实用的方案：

1. CSS背景图直接渲染 #

把<icon-star>当成一个容器，通过CSS设置背景图来显示星星图标：

/* 先把标签设为行内块，确保能设置宽高 */
icon-star {
  display: inline-block;
  width: 24px;
  height: 24px;
  /* 替换成你的星星图标路径 */
  background-image: url('./star-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

之后在HTML里直接写<icon-star></icon-star>或者自闭合的<icon-star/>，页面上就会显示出星星图标了。

2. 配合字体图标使用伪元素 #

如果用的是Font Awesome这类字体图标库，用伪元素的content属性来插入图标更方便：

icon-star::before {
  /* 替换成对应字体图标的Unicode编码 */
  content: "\f005";
  /* 引入字体图标库的字体族 */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #ffd700;
  font-size: 24px;
}

这种方式还能通过CSS轻松修改颜色、大小，甚至加hover效果：

icon-star:hover::before {
  color: #ffed4e;
}

3. 用自定义数据属性扩展状态 #

如果需要区分实心/空心星星这类不同状态，给标签加data-*属性就行：

/* 默认空心星 */
icon-star::before {
  content: "\f006";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: #999;
}

/* 实心星状态 */
icon-star[data-filled="true"]::before {
  content: "\f005";
  font-weight: 900;
  color: #ffd700;
}

使用的时候就可以这么写：

<icon-star></icon-star> <!-- 空心星 -->
<icon-star data-filled="true"></icon-star> <!-- 实心星 -->

小提醒 #

虽然这种自定义标签好用，但要注意标签名最好带短横线（比如<icon-star>），因为HTML标准里的原生标签不会包含短横线，这样能避免和未来新增的原生标签冲突，减少兼容性问题。

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