// button
<section className={styles.modal__with__command__wrap}>
  <div className={styles.modal__with__command__btn__wrap}>
    {Array.from({ length: 2 }, (_, i) => i + 1).map((num) => (
      <button
        key={num}
        type='button'
        commandfor={`dialog__${num}`}
        command='show-modal'
      >
        Open Modal {num}
      </button>
    ))}
    <button
      key='3'
      type='button'
      commandfor='dialog__3'
      command='show-modal'
    >
      Open Modal 3
    </button>
  </div>
</section>

// modal
{Array.from({ length: 2 }, (_, i) => i + 1).map((num) => (
  <div key={num} className={styles.dialog__wrap}>
    <dialog
      key={num}
      id={`dialog__${num}`}
      aria-labelledby={`dialog__${num}-heading`}
      closedby='any'
      autoFocus
    >
      <div className={styles.dialog__inner}>
        <h1 id={`dialog__${num}-heading`}>Modal Title {num}</h1>
        <p>Modal Content</p>
        <button
          type='button'
          commandfor={`dialog__${num}`}
          command='close'
          className={styles.close__btn}
        >
          Close Modal
        </button>
      </div>
    </dialog>
  </div>
))}

:root:has(:modal) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

dialog {
  position: fixed; /* Safariで表示に不具合が出るので明示する必要がある */
  /* 中央寄せ */
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  /* inset: 0 を削除して、幅・高さを明示的に設定 */
  inline-size: min(90vw, calc((600/16) * 1rem)); /* 最大幅を設定 */
  max-block-size: 40vh;
  margin: 0; /* ブラウザデフォルトのmarginをリセット */
  overscroll-behavior-block: contain;
  transition-duration: 0.3s;
  transition-property: display, overlay, opacity, transform;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
  overflow: auto;
}

dialog::backdrop {
  background-color: oklch(from var(--black) l c h / 50%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition-duration: inherit;
  transition-property: opacity;
  transition-timing-function: inherit;
}

/* モーダル展開直後の状態を明示的に設定 */
@starting-style {
  dialog:modal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  dialog:modal::backdrop {
    opacity: 0;
  }
}

/* モーダル非表示時の状態を明示的に設定 */
dialog:not(:modal) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

dialog:not(:modal)::backdrop {
  opacity: 0;
}

:root:has(:modal) {
  overflow: hidden;
}

const image = document.getElementById('image');

image.addEventListener('command', (e) => {
  if (e.command == '--rotate-left') {
    e.target.style.rotate = '-90deg'
  } else if (e.command == '--rotate-right') {
    e.target.style.rotate = '90deg'
  }
})

<img id='image' src='...' />

<button commandfor='image' command='--rotate-left'>左回転</button>
<button commandfor='image' command='--rotate-right'>右回転</button>

export default function CustomCommandAttr() {

  useEffect(() => {
    const handleCommand = (e: Event) => {
      if (!(e.target instanceof Element)) return

      const commandElement = e.target.closest('[command][commandfor]')
      if (!commandElement) return

      const command = commandElement.getAttribute('command')
      const commandFor = commandElement.getAttribute('commandfor')
      if (!command || !commandFor) return

      const commandTarget = document.getElementById(commandFor)
      if (!commandTarget) return

      switch (command) {
        case '--rotate-left':
          commandTarget.style.transform = 'rotate(-90deg)'
          break
        case '--rotate-right':
          commandTarget.style.transform = 'rotate(90deg)'
          break
        case '--reset-rotate':
          commandTarget.style.transform = 'rotate(0deg)'
          break
        default:
          break
      }
    }

    document.addEventListener('click', handleCommand)

    return () => {
      document.removeEventListener('click', handleCommand)
    }
  }, [])

  return (
    ...
  )
}