导言
前端技术日新月异，我们作为一个前端开发工程师需要不断地学习新的技术和方法，而自定义元素是其中一个非常有趣的技术之一。自定义元素可以帮助我们扩展 HTML 标签，让我们拥有更加自由和强大的控制能力。在这篇文章中，我将分享一个成功的自定义元素属性和方法的实现方法，并且给出详细的指导和示例代码。
什么是自定义元素
自定义元素是指自己定义一种新的 HTML 元素标签，然后在页面中可以使用这个新的标签，和普通的 HTML 标签一样使用和操作。自定义元素的真正价值，是让我们可以在页面上创造出一些具有特定意义或功能的标签，甚至可以让这些标签拥有自己的属性和方法。
自定义元素的属性
在自定义元素中，我们可以为其添加自定义的属性。这些属性对应的属性值可以在自定义元素中作为常量或变量被使用，也能够作为事件的触发器被使用。接下来，我将给出一个实例，让大家更好地理解自定义元素的属性。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义元素属性的示例</title>
<script>
class CustomButton extends HTMLElement {
constructor() {
super();
this.addEventListener("click", this.onClick.bind(this));
this.value = this.getAttribute("value");
this.style.backgroundColor = "#00A0D0";
this.style.color = "#fff";
this.style.padding = "10px 20px";
this.style.borderRadius = "5px";
}
onClick() {
alert(this.value);
}
static get observedAttributes() {
return ['value'];
}
attributeChangedCallback(attr, oldValue, newValue) {
if (oldValue !== newValue) {
switch (attr) {
case 'value':
this.value = newValue;
break;
default:
break;
}
}
}
}
customElements.define("custom-button", CustomButton);
</script>
</head>
<body>
<custom-button value="点击我！"></custom-button>
</body>
</html>上述的代码展示了一个自定义元素的示例 custom-button，包含了一个可被点击的按钮，并可以自定义按钮上显示的文字。在这个示例的实现中，我们通过 JavaScript 代码来继承 HTMLElement 类，并重载了其构造方法和触发器方法 onClick()。我们还通过 attributeChangedCallback() 来监听自定义的属性 value 的变化，并根据不同属性值的变化，做出不同的响应。当用户点击这个自定义按钮时，会呼叫 onClick() 方法，并在弹窗中显示自定义的文字“点击我！”。
值得注意的是，在自定义元素中使用样式时，在继承 HTMLElement 基类时不需要使用 constructor 方法，而需要使用 connectedCallback 方法。
// www.javascriptcn.com code example
import {LitElement, html, css} from "lit-element";
export class CustomButton extends LitElement {
static get properties() {
return {
value: { type: String },
}
}
static get styles() {
return css`
button {
background-color: #00A0D0;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
`;
}
constructor() {
super();
this.addEventListener("click", this.onClick.bind(this));
}
onClick() {
alert(this.value);
}
render() {
return html`
<button>${this.value}</button>
`;
}
}
customElements.define("custom-button", CustomButton);自定义元素的方法
自定义元素不仅可以拥有自定义属性，还可以定义自己的方法。定义的方法在页面中被调用的时候与普通的 JavaScript 方法一样调用。接下来，我将给出一个简单的例子，并在此基础上进一步扩展示例代码。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义元素方法的示例</title>
<script>
class CustomInput extends HTMLElement {
constructor() {
super();
this.inputElement = document.createElement("input");
this.inputElement.setAttribute("type", "text");
this.inputElement.addEventListener("keypress", this.onKeypress.bind(this));
this.appendChild(this.inputElement);
}
onKeypress(e) {
if (e.keyCode === 13) {
this.doSomething();
}
}
doSomething() {
alert("do something");
}
}
customElements.define("custom-input", CustomInput);
</script>
</head>
<body>
<custom-input></custom-input>
</body>
</html>在这个示例中，我们实现了一个自定义元素 custom-input。当用户在页面中输入任意文本后，按下Enter键，custom-input元素的自定义方法doSomething()被调用并触发提示框。这个例子比较简单，但可以作为实现自定义元素的方法的入门教程。
// www.javascriptcn.com code example
import {LitElement, html, css} from "lit-element";
export class CustomInput extends LitElement {
static get styles() {
return css`
input {
width: 100%;
height: 40px;
border-radius: 8px;
border: none;
background-color: rgb(228,228,228);
font-size: 16px;
}
`;
}
constructor() {
super();
}
onKeypress(e) {
if (e.keyCode === 13) {
this.doSomething();
}
}
doSomething() {
alert("do something");
}
render() {
return html`
<input type="text" @keypress="${this.onKeypress}">
`;
}
}
customElements.define("custom-input", CustomInput);综上所述，自定义元素的实现方法，包括属性和方法，需要我们掌握好 JavaScript 基础知识，并对 DOM 和事件模型有足够的了解，同时需要思考如何封装组件，让其具备复用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d00f11e46428fe9ec97d2b