📦 完全カプセル化の実装
class GalleryComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<style>
/* スタイルを内包 */
.gallery { display: grid; }
</style>
<div class="gallery">...</div>
<script>
// JavaScriptも内包
console.log('Component ready');
</script>
`;
}
}
customElements.define('gallery-panel', GalleryComponent);
✅ スタイル内包
外部CSSファイル不要
✅ スクリプト内包
外部JSファイル不要
✅ 自己完結
全ての機能が1つのタグに