编写一个自定义的html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<user-line></user-line>
</body>
</html>
<script>
class Line extends HTMLElement {
constructor() {
//类的构造函数constructor总是先调用super()来建立正确的原型链继承关系。
super();
this.innerHTML = "1121212211212"
}
}
customElements.define('user-line', Line);
</script>
下面是一个更加简便的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tag Example</title>
<style>
custom-tag {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<custom-tag>Click me!</custom-tag>
<script>
// 定义自定义标签的行为
customElements.define('custom-tag', class extends HTMLElement {
constructor() {
super();
this.addEventListener('click', () => alert('Hello, Custom Tag!'));
}
});
</script>
</body>
</html>
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
