ホームページ >ウェブフロントエンド >jsチュートリアル >シンプルな Web コンポーネントを最初から構築する方法
シンプルな Web コンポーネントを最初から構築する方法
- Barbara Streisandオリジナル
- 2025-01-23 01:00:14809ブラウズ
このガイドでは、再利用可能な Web コンポーネント、つまり単純なカウンターの構築について説明します。 カスタム要素、Shadow DOM、および HTML テンプレートを活用します。完成したカウンターには、表示された数値を増減するボタンが付いています。
このコードの完全な実行可能なバージョンは、ここから入手できます。
前提条件:
基本的な JavaScript に精通しており、DOM (ドキュメント オブジェクト モデル) の概念を理解していると役立ちますが、厳密に必須ではありません。
プロジェクトのセットアップ:
2 つのファイルを作成します: 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 は、Shadow DOM やイベント リスナーのアタッチなど、要素がページに追加されるときのセットアップを処理します。 increment、decrement、displayCountはカウンタの値と表示を管理します。
カウンターコンポーネントの使用 (counter.html - カスタム要素の追加):
カウンターを使用するには、HTML に <x-counter></x-counter> を追加するだけです。
コンポーネントのスタイル設定 (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>
これにより、Shadow DOM 内に含まれる基本的なスタイルが追加されます。
結論:
このチュートリアルでは、シンプルで再利用可能な Web コンポーネントの作成について説明します。 テンプレート、シャドウ DOM、およびカスタム要素を使用すると、Web 開発におけるモジュール性と保守性が促進されます。 [here](https://www.php.cn/link/2eac42424d12436bdd6a5b8a88480cc3) を最終コードへの実際のリンクに置き換えることを忘れないでください。
以上がシンプルな Web コンポーネントを最初から構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。