自定義元素介紹 - DEV社群
引言
自定義元素是Web元件的一個子集，在我看來這是web 開發中最酷的概念之一，自定義元素讓我們能夠通過原生的 web 平臺來構建元件，而不是依賴於 React、Angular Vue 或者其他的中間庫或者框架。
在這篇文章中，我會向你闡述什麼是自定義元素、如何建立以及如何在頁面上展示。
Web元件的基礎
所有自定義元素都將共享一些常用方法，可以在下面的程式碼示例中看到：
class MyComponent extends HTMLElement { static get observedAttributes() { return []; } constructor(...args) { super(...args); } connectedCallback() {} disconnectedCallback() {} adoptedCallback() {} attributeChangedCallback(attrName, oldVal, newVal) {} } window.customElements.define('my-component', MyComponent);
讓我們分解一下這個元件裡面做了哪些事情。
constructor() - 建構函式
建構函式是最先宣告的，並將所有引數通過 super 方法傳遞給父級。
通常情況下，建構函式裡可以放置一些事件偵聽的程式碼，例如：
...
constructor(...args) {
super(...args);
this.addEventListener('click', this.handleClick);
}
handleClick(event) {}
...
connectedCallback()
每次將元素插入DOM時呼叫。
每次將元件新增到文件中的任何位置時，它都會立即觸發此方法
disconnectedCallback()
每次從DOM中刪除元素時呼叫。
例如，當我們刪除DOM樹中的該節點或該節點的父節點時，則此函式將觸發，因為該節點本身也將從上述 DOM 樹中刪除。
當元素被移動到文件的其他地方或新頁面的時候，disconnectedCallback 也會被呼叫。
adoptedCallback()
每次將自定義元素移動到新文件時呼叫。
如果將自定義元素移動到新頁面或文件中的其他位置，則將觸發此回撥。
attributeChangedCallback(attrName, oldVal, newVal)
新增，刪除，更新或替換元素的屬性時會呼叫該方法
每當元素的屬性變化時，attributeChangedCallback()回撥函式就會執行，除非當前屬性的改變是已經被監聽著的，這個時候就會呼叫 observedAttributes 方法。
observedAttributes()
我們實際想要觀察的自定義元素的屬性會發生變化
如您所見，observedAttributes 被設計成是一個靜態方法，這明顯不同於其他方法的宣告，這是因為我們希望能夠被任何子類/元件繼承，而且我們只想宣告它一次引用，注意，它是靜態的（為所有繼承者包括它自己）和 gettable（供參考）。
這個方法返回一個字串陣列，陣列中的每個字串是你想要監聽的屬性的名稱，例如：
...
static get observedAttributes() {
return ['id', 'my-custom-attribute', 'data-something', 'disabled'];
}
...
自定義元素規範中還有一些其他的方法，但以上這些是我們日常主要使用的方法。
基本元件
讓我們構建一個向用戶打招呼的基本元件。
html 部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Custom Elements 101</title> </head> <body> <hello-component data-name="James"></hello-component> <script src="./hello-component.js"></script> </body> </html>
javascript 部分
class HelloComponent extends HTMLElement {
static get observedAttributes() {
return ['data-name'];
}
// custom methods
render() {
this.innerHTML = Hello ${this.name};
}
get name() {
return this.getAttribute('data-name');
}
// lifecycle hooks
connectedCallback() {
this.render();
}
attributeChangedCallback(attrName, oldVal, newVal) {
this.render();
}
}
// add into the 'real' dom as a valid tag
window.customElements.define('hello-component', HelloComponent);
載入index.html，我們可以在頁面上看到“Hello James”。
現在，開啟瀏覽器的開發者工具並將data-name屬性更改為除James 之外的其他值。你會發現我們有內建的反應！是不是很棒？！
當然，這只是一個非常基本的、非最佳實踐、0用例，預設教程的實現，但他給了你一個基本的入門介紹，以便我們在後面的文章中做更詳細的深入。
瀏覽器支援
以下是當前對Web元件的支援以及所有支援它們的API，包括Shadow DOM，自定義元素（我們剛剛檢視的內容），HTML模板和插槽以及HTML匯入：
總結
自定義元素讓我們有能力在無需藉助框架的情況下實現反應式的 UI 開發。它們確實為我們提供了許多挑戰，其中許多將在未來展望, 但是我們可以先去嘗試一下，並把其他的「Web Component 」相關規範的 API 放在一起看下，它們真的讓我們能夠製作出很酷、很強大、反應靈敏的元素，讓我們可以用很少的東西做很多事。
資料
-
ofollow,noindex" target="_blank">Web Components - MDN