❌ 従来の方法干渉あり
<div class="wrapper">
<button id="btn">A</button>
</div>
<div class="wrapper">
<button id="btn">B</button>
</div>
問題:
• IDが重複（idは一意でなければならない）
• クラス名が衝突
• スタイルが干渉
✅ Web Components独立
const TAG = 'page-' + uniqueId;
customElements.define(TAG, class {
static get template() {
return `<div class="wrapper_${TAG}">
<button id="btn_${TAG}">A</button>
</div>`;
}
});
解決:
• タグ名が動的（重複なし）
• ID・クラスも動的
• 完全に独立