如何为封闭Shadow DOM中的Mapkit JS标注添加cursor: pointer样式？

我有一个Mapkit JS地图，其Marker Annotation（标注）具备交互性，但缺少cursor: pointer样式，因此需要添加该样式。标注位于自定义元素内的封闭Shadow DOM中，无法直接设置样式。我尝试了如下代码：

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)
}

日志显示标注容器内存在#shadow-root (closed)，但success日志从未输出，这与封闭Shadow DOM无法访问或修改的特性相符。此外，Mapkit标注文档未提供为该类型标注添加样式的方法，请问还有其他可行方案吗？

可行方案 #

1. 事件监听动态切换光标 #

利用Mapkit JS为MarkerAnnotation提供的事件监听能力，在鼠标进入/离开标注时，动态修改地图容器的光标样式：

// 假设已创建MarkerAnnotation实例marker
marker.addEventListener('mouseenter', () => {
  document.querySelector('.mapkit-map').style.cursor = 'pointer';
});

marker.addEventListener('mouseleave', () => {
  document.querySelector('.mapkit-map').style.cursor = '';
});

这个方法不需要操作Shadow DOM，通过事件触发实现光标切换，兼容性好。

2. 使用自定义Annotation替代默认标注 #

放弃默认的MarkerAnnotation，创建完全自定义的标注元素，直接控制样式：

// 创建自定义标注元素
function createCustomMarker() {
  const markerElement = document.createElement('div');
  markerElement.style.cursor = 'pointer';
  markerElement.style.width = '32px';
  markerElement.style.height = '40px';
  markerElement.style.backgroundImage = 'url(your-marker-icon.png)';
  // 根据需求添加更多样式或内容
  return markerElement;
}

// 创建自定义Annotation并添加到地图
const customAnnotation = new mapkit.Annotation(
  new mapkit.Coordinate(37.7749, -122.4194), // 示例坐标
  { element: createCustomMarker() }
);
map.addAnnotation(customAnnotation);

自定义元素不在封闭Shadow DOM内，你可以完全控制其样式和交互行为。

3. 利用CSS :has()伪类（浏览器兼容需注意） #

如果目标浏览器支持CSS :has()伪类（如Chrome 101+、Safari 15.4+），可以尝试通过父容器关联标注状态：

.mk-annotation-container:has(.mk-annotations) {
  cursor: pointer;
}

注意：封闭Shadow DOM内的元素可能无法被外部CSS的:has()正确识别，此方法兼容性有限，建议优先使用前两种方案。

内容的提问来源于stack exchange，提问作者inorganik