本指南示範了建立可重複使用的 Web 元件：一個簡單的計數器。 我們將利用自訂元素、Shadow DOM 和 HTML 模板。完成的計數器將具有用於增加和減少顯示數值的按鈕。
此程式碼的完整、可運行版本可以在此處。
先決條件：
熟悉基本的 JavaScript 和對 DOM（文件物件模型）的概念性理解會很有幫助，儘管不是嚴格要求。
項目設定：
建立兩個檔案：counter.html（包含頁面結構）和 counter.js（包含自訂元素定義）。
counter.html（初始結構）：
<code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Counter Component</title> </head> <body> <script src="counter.js"></script> </body> </html></code>
建立範本（counter.html - 新增範本）：
我們將使用 HTML 範本定義計數器的視覺結構：
<code class="language-html"><template id="x-counter"> <button id="min-btn">-</button> <span id="counter-display">0</span> <button id="plus-btn">+</button> </template></code>
該模板不會直接渲染；它充當我們自訂元素的藍圖。
定義自訂元素 (counter.js)：
這段 JavaScript 程式碼定義了計數器的功能：
<code class="language-javascript">class XCounter extends HTMLElement {
constructor() {
super();
this.counter = 0;
this.elements = {};
}
connectedCallback() {
const template = document.getElementById("x-counter");
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.elements = {
plusBtn: this.shadowRoot.querySelector("#plus-btn"),
minBtn: this.shadowRoot.querySelector("#min-btn"),
counterDisplay: this.shadowRoot.querySelector("#counter-display")
};
this.displayCount();
this.elements.plusBtn.onclick = () => this.increment();
this.elements.minBtn.onclick = () => this.decrement();
}
increment() {
this.counter++;
this.displayCount();
}
decrement() {
this.counter--;
this.displayCount();
}
displayCount() {
this.elements.counterDisplay.textContent = this.counter;
}
}
customElements.define("x-counter", XCounter);</code>這個類別擴充了HTMLElement。 connectedCallback 處理元素新增到頁面時的設置，包括附加影子 DOM 和事件監聽器。 increment、decrement 和 displayCount 管理計數器的值和顯示。
使用計數器元件（counter.html - 新增自訂元素）：
要使用計數器，只需將 <x-counter></x-counter> 加入您的 HTML 即可。
設定元件樣式（counter.js - 新增樣式）：
使用 adoptedStyleSheets 將樣式封裝在組件內：
<code class="language-javascript">connectedCallback() {
// ... (previous code) ...
const sheet = new CSSStyleSheet();
sheet.replaceSync(this.styles());
this.shadowRoot.adoptedStyleSheets = [sheet];
// ... (rest of connectedCallback) ...
}
styles() {
return `
:host {
display: block;
border: dotted 3px #333;
width: fit-content;
height: fit-content;
padding: 15px;
}
button {
border: solid 1px #333;
padding: 10px;
min-width: 35px;
background: #333;
color: #fff;
cursor: pointer;
}
button:hover {
background: #222;
}
span {
display: inline-block;
padding: 10px;
width: 50px;
text-align: center;
}
`;
}</code>這增加了包含在影子 DOM 中的基本樣式。
結論：
本教學示範了建立一個簡單的、可重複使用的 Web 元件。 模板、shadow DOM 和自訂元素的使用促進了 Web 開發的模組化和可維護性。請記住將 [here](https://www.php.cn/link/2eac42424d12436bdd6a5b8a88480cc3) 替換為最終程式碼的實際連結。
以上是如何從頭開始建立簡單的 Web 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
