仅用CSS定义custom element的实现原理是什么？有哪些相关参考资料？

核心运行逻辑 #

这个仅用CSS实现的自定义元素完全依赖HTML和CSS的原生特性，不需要JS参与，核心逻辑如下：

• HTML原生支持任意自定义标签：浏览器解析HTML时，遇到没有通过Custom Elements API注册的陌生标签，不会报错也不会忽略，会默认将其作为HTMLUnknownElement实例插入DOM树，默认表现和普通行内元素一致，完全可以被CSS选择器匹配、应用样式，不需要额外的JS注册或者HTML定义代码。
• 状态切换靠CSS属性选择器实现：你示例中标签上的active、pulse属于布尔属性，这个包的完整CSS文件中还包含status-indicator[active]、status-indicator[pulse]这类属性选择器对应的样式，比如激活状态的颜色、脉冲动画的@keyframes声明等，只要标签上挂载了对应属性，CSS就会自动匹配应用对应样式，不需要JS监听属性变化修改样式。
• 样式可配置靠CSS自定义属性实现：代码里的--status-indicator-size、--status-indicator-color是CSS自定义属性（也叫CSS变量），你可以在自己的项目代码里全局或者局部覆盖这些变量的值，就能灵活调整指示器的大小、颜色，不需要修改包本身的源码。

可参考的官方权威资料 #

你可以通过以下官方资料深入学习相关特性：

• W3C HTML规范中「自定义元素」相关章节，明确规定了未注册自定义元素的渲染规则
• W3C CSS选择器规范中属性选择器部分的定义与用法说明
• CSS自定义属性（CSS变量）的官方标准文档

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