I have a Mapkit JS map and the marker annotations are interactive, but do not have cursor: pointer style, so I need to add it. The marker annotations are inside a custom element and are in a shadow DOM that cannot be directly styled. I tried:

    const markerContainer = document.querySelector('.mk-annotation-container')
    const style = document.createElement('style')
    style.textContent = `
      .mk-annotations > div {
        cursor: pointer;
        border: 1px red solid; /* for debugging */
      }
    `
    console.log('marker container', markerContainer)
    if (markerContainer && markerContainer.shadowRoot) {
      console.log('success')
      markerContainer.shadowRoot.appendChild(style)
    }

The marker container log shows #shadow-root (closed) inside the container when I expand it, but “success” never logs. This aligns with what I’ve read, that you cannot access or modify a closed shadow root. Additionally, the Mapkit marker documentation does not provide any way to add styles to this type of annotation. Are there any other options available to me here?