드롭다운 래퍼

has-dropdown은 트리거와 드롭다운 패널을 슬롯으로 받아 열기/닫기와 접근성(aria-haspopup, aria-expanded)을 관리하는 웹 컴포넌트입니다. Shadow DOM으로 드롭다운 영역을 감싸 스타일을 격리합니다.

기본 사용법

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

<has-dropdown>
  <button type="button">메뉴</button>
  <div slot="dropdown">
    <a href="#">항목 1</a>
    <a href="#">항목 2</a>
  </div>
</has-dropdown>

슬롯

슬롯 이름	설명
(기본 슬롯)	트리거 버튼/요소
`dropdown`	드롭다운에 표시할 내용

속성 (Attributes)

속성	타입	기본값	설명
`expanded`	Boolean	`false`	드롭다운 열림 여부
`open-on-hover`	Boolean	`false`	호버 시 열기 (true 시 활성화)

메소드

메소드	설명
`open()`	드롭다운 열기
`close()`	드롭다운 닫기
`toggle()`	열림/닫힘 전환

프로퍼티

expanded: get/set — 열림 상태
openOnHover: get/set — 호버로 열기 여부
button: 트리거 요소 참조 (초기화 후)
dropdown: 드롭다운 루트 요소 (Shadow DOM 내부)

CSS 변수

드롭다운 위치·크기·스타일은 --dropdown-* CSS 변수로 조정할 수 있습니다. 예: --dropdown-offset-top, --dropdown-width, --dropdown-bg-color 등.