🧩 Web Components実装
class PhotoComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<div class="photo-container">
<h1>写真ギャラリー</h1>
<div class="photos"></div>
</div>
`;
}
}
customElements.define('photo-page', PhotoComponent);
<!-- SVG内に配置 -->
<svg>
<foreignObject x="0" y="0" width="1000" height="800">
<photo-page></photo-page>
</foreignObject>
</svg>
✅ カプセル化
スタイル・スクリプトが他と干渉しない
✅ 再利用性
同じコンポーネントを複数配置可能
✅ 独立性
各コンポーネントが独立して動作