在css中创建一个新的html元素

Question

我偶然发现了一个没有js或html，只有css的包，它定义了一个可以在html中使用的自定义元素:

<status-indicator active pulse></status-indicator>

我看到的唯一声明是在css文件:

status-indicator {
display: inline-block;
border-radius: 50%;
cursor: pointer;
width: var(--status-indicator-size);
height: var(--status-indicator-size);
background-color: var(--status-indicator-color);
}

这是包:https://www.npmjs.com/package/status-indicator

为了学习，谁能解释一下这是如何以及为什么工作的，或者我应该在哪里参考阅读它?

Answer 1

HTML允许自定义元素，并且有一些DOM钩子与它们交互。建议在标记名称中使用连字符，这样就不会与以后的HTML标记重叠。

从CSS声明中可以看到，没有什么是理所当然的。显示行为是显式定义的(默认是将未知元素视为内联文本，就像<span>一样)。它还使用CSS自定义属性(变量)。