<dialog/>엘리먼트와 비슷한 성격을 가지고 있으며 특정 엘리먼트와 1:1 상호작용하는 방식으로 사용되며 영역에 방해하지 않는거 같다.
아직 제대로 활용하지 못해봐서 제대로 파악 못했지만 기록하면서 학습할 예정이다.

Google IO 에서의 소개

전체적으로 사용하는 방법들이 비디오로 소개되어 있다.

대략적인 예제

<button type="button" popovertarget="message">메시지</button>
<div popover id="message">
  message
</div>

아무런 옵션없이 사용할때 버튼을 누르면 화면 중간에서 팝업이 생기는것을 볼 수 있다.

anchor-name, position-anchor

기본적으로 popover 엘리먼트는 화면 중앙에 고정되어있다.
드롭다운 기능을 한 컴포넌트를 만드려면 트리거 버튼 기준으로 팝오버가 위치해야 한다. 그러려면 css 에서 anchor-name, position-anchor 값을 맞춰줘야 한다. 이건 고유한 값으로 맞춰줘야 하는거 같다.

.anchor {
  anchor-name: --my-anchor;
}
.infobox {
  position-anchor: --my-anchor;
}

최소한 이정도만 적용해주면 위치가 연결되고 기준점으로 여러가지 방식으로 위치를 지정해줘야한다.
문서를 참고해야 자세한 값들을 알 수 있을것이다. (설정이 의외로 복잡하다.)

참고링크
https://developer.mozilla.org/en-US/docs/Web/CSS/anchor-name
https://developer.mozilla.org/en-US/docs/Web/CSS/position-anchor

여러개의 엘리먼트

for 문으로 다수의 컴포넌트를 복제시켜 사용한다면 id나 anchor-name 값들이 중복되어 제대로 기준위치가 잡히지 않아 좀 리서치를 하게 되었다.
반드시 anchor-name = position-anchor 값으로 유지시켜줘야 하기 때문에 id 값으로 커스터마이즈 한 값으로 넣거나 uid를 만들어서 값을 조립하여 사용해야 한다.

그다지 좋아보이는 형태는 아니지만 vue의 대략적인 예제는 다음과 같다.

<templete>
<nav class="dropdown">
  <button
    type="button"
    :popovertarget="`dropdown-${props.id}`"
    class="menu"
    :style="[ `anchor-name: --dropdown-${props.id};` ]">
    메뉴
  </button>
  <div
    class="dropdown-body"
    popover
    :id="`dropdown-${props.id}`"
    :style="[ `position-anchor: --dropdown-${props.id};` ]">
    <button type="button">메뉴1</button>
    <button type="button">메뉴2</button>
    <button type="button">메뉴3</button>
  </div>
</nav>
</templete>

<script setup>
const props = defineProps({
  id: Number,
})
</script>

<style lang="scss" scoped>
.dropdown {
  position: relative;
}
.dropdown-body {
  position: absolute;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(self-start);
  margin: 0;
  width: fit-content;
}
</style>