팝오버

pop-over는 트리거 외부에 배치하고, 클릭·Escape·외부 클릭으로 열고 닫는 오버레이 패널을 제공하는 웹 컴포넌트입니다. Shadow DOM을 사용하며 닫기 버튼 슬롯을 지원합니다.

기본 사용법

<script type="module">
  if (!window.customElements.get("pop-over")) {
    import("/ui/element/pop-over.js");
  }
</script>

<button type="button" id="invoker">열기</button>
<pop-over>
  <p>팝오버 내용</p>
</pop-over>

<script>
  const invoker = document.getElementById("invoker");
  const popover = document.querySelector("pop-over");
  invoker.addEventListener("click", () => popover.togglePopover(invoker));
</script>

pop-over는 HTML Popover API가 아닌 자체 open/close 로직을 사용합니다. 열 때 showPopover(invokerElement)에 트리거 요소를 넘기면 aria-expanded와 포커스 복귀가 처리됩니다.

슬롯

슬롯 이름	설명
(기본 슬롯)	팝오버 본문 내용
close-button	닫기 버튼 (미지정 시 기본 닫기 버튼 사용)

메소드

메소드	설명
showPopover(invokerElement)	팝오버를 연다. 트리거 요소를 인자로 넘기면 aria-expanded 및 닫을 때 포커스 복귀 처리
hidePopover()	팝오버를 닫는다.
togglePopover(invokerElement)	열려 있으면 닫고, 닫혀 있으면 연다.
initialize()	내부 초기화 (보통 자동 호출)
destroy()	리스너 등 정리

프로퍼티

• open: get — 현재 열림 여부
• container: Shadow DOM 내부 컨테이너 요소

CSS 변수

위치·스타일 조정: --popover-z-index, --popover-top, --popover-right, --popover-bottom, --popover-left, --popover-max-width, --popover-close-button-top, --popover-close-button-right, --popover-close-button-size, --popover-close-button-color 등.