<dialog> 요소 사용하기

2022년 상반기 모든 메이저 브라우저에서 이제 <dialog> 태그를 쓸 수 있게 되었다 일부 브라우저는 아직 미지원 이었지만 하반기에 드디어 호환성을 신경쓰지 않고 커스텀 대화 상자를 버릴 수 있게 되었다
그럼 어떻게 써야 하나

<!-- 접근성을 위해 aria-labelledby, aria-describedby 활용 -->
<dialog id="myDialog" aria-labelledby="title" aria-describedby="desc">
  <div class="header">
    <strong id="title" class="title">제목</strong>
  </div>
  
  <div class="body">
    <p id="desc">내용</p>
  </div>
  
  <button type="button">닫기</buttton>
</dialog>

<script>
  // 열기 
  dialog.showModal();
  
  // 닫기
  document.querySelector("button").addEventListener("click", () => {
  	dialog.close();
  });
</script>

간단하게 쓸 수 있다 css로 스타일도 당연히 가능하다

주의할점은 일부 모바일앱의 하이브리드 웹뷰에서 버전에 따라 지원하지 않기 때문에 모바일앱의 웹뷰에 사용시 확인 후 사용하기 바란다