HTML5自定义元素

马黑黑

HTML5 允许自定义元素，我在做原生 CSS+HTML 时钟的时候，就是用了自定义元素，只是不够规范。HTML5规定，自定义元素的命名规则需要一个连接符号 - ，例如，my-box 是符合标准的，mybox 是非标准的，这种标准的制定得到绝大多数浏览器的支持，并完美解析。

自定义元素标签与 span 一样，属于行内标签，因此应根据需要决定是否设置 display 属性。如果你想让它能像 div 一样的表现，则建议将其设置为 block 或 flex、grid 等等。试看以下例子：

<style>
my-circle {
	margin: auto;
	display: grid;
	place-items: center;
	width: 200px;
	height: 200px;
	font-size: 2em;
	background: olive;
	border-radius: 50%;
	box-shadow: 0 0 6px gray;
	text-shadow: 1px 1px 1px #000;
}
</style>

<my-circle>花潮</my-circle>

运行代码

自定义元素和标准元素一样，可以拥有自己的 id 和 class 属性。下面给的例子，my-circle 标签有自己的 id 属性，JS 可以通过该属性识别并操纵 my-circle 元素：每一次单击运行后出现的 my-circle 元素，都会改变自定义元素的背景颜色。

<style>
my-circle {
	margin: auto;
	display: grid;
	place-items: center;
	width: 200px;
	height: 200px;
	font-size: 2em;
	background: purple;
	border-radius: 50%;
	box-shadow: 0 0 6px gray;
	text-shadow: 1px 1px 1px #000;
}
</style>

<my-circle id="mine">花潮</my-circle>

<script>
mine.onclick = () => mine.style.background = `#${Math.random().toString(16).substr(-6)}`;
</script>

运行代码

自定义元素的主要作用是让元素的命名更具备语义化属性。

小文

先收藏了，回头再谢谢！问好，晚安！

马黑黑

小文 发表于 2023-5-28 21:31
先收藏了，回头再谢谢！问好，晚安！

红影

“自定义元素的命名规则需要一个连接符号 - ，”自定义元素这么容易就可以啊。
不过还是更熟悉原本的那些元素

红影

学习一下这个真好，以后看到也不会蒙圈了。感谢黑黑的详细讲解

亦是金

问好老师！现在是雾里看花！只能先收藏，慢慢学习领悟！

马黑黑

亦是金 发表于 2023-5-28 22:13
问好老师！现在是雾里看花！只能先收藏，慢慢学习领悟！

你若懂得 <div></div> 这个也就能懂

马黑黑

醉美水芙蓉 发表于 2023-5-28 21:53
谢谢老师分享教程！

马黑黑

醉美水芙蓉 发表于 2023-5-28 21:55
要是能用代码制作水晶球就更漂亮了！

你把过去对应的水晶球CSS代码放到自定义的元素里头就行了

马黑黑

红影 发表于 2023-5-28 22:03
“自定义元素的命名规则需要一个连接符号 - ，”自定义元素这么容易就可以啊。
不过还是更熟悉原本的那些 ...

换个名称而已，只是命名有规定

亦是金

马黑黑 发表于 2023-5-28 22:16
你若懂得  这个也就能懂

我要慢慢悟！

马黑黑

红影 发表于 2023-5-28 22:03
学习一下这个真好，以后看到也不会蒙圈了。感谢黑黑的详细讲解

遗憾的是不支持全中文命名

马黑黑

醉美水芙蓉 发表于 2023-5-28 22:19
那个代码是FLASH，无法使用！

额

马黑黑

亦是金 发表于 2023-5-28 22:19
我要慢慢悟！

好的

红影

马黑黑 发表于 2023-5-28 22:18
换个名称而已，只是命名有规定

嗯嗯，知道这个了挺好，不一定去用，却不会迷惑了。

红影

马黑黑 发表于 2023-5-28 22:21
遗憾的是不支持全中文命名

可以用拼音啊。

一斛珠

我就当雾里看花也不错啊