import { Controller } from '@hotwired/stimulus'; /** * 이 컨트롤러는 Shadow DOM을 사용하여 템플릿을 렌더링합니다. * Shadow DOM을 사용하면 스타일과 스크립트가 격리되어 * 다른 요소와 충돌하지 않도록 할 수 있습니다. * 이 컨트롤러는 템플릿을 클론하여 Shadow DOM에 추가합니다. * @see https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot */ export default class extends Controller { static targets = ['template']; connect() { if (!this.element.shadowRoot) { const shadow = this.element.attachShadow({ mode: 'open' }); const content = this.templateTarget.content.cloneNode(true); shadow.appendChild(content); shadow.host.style.pointerEvents = 'none'; } } }