Leaflet.js作为Web Component因Shadow Dom无法正常显示地图

问题现象 #

原生JavaScript环境下Leaflet地图示例运行完全正常，但封装为Web Component后，地图切片显示混乱；将#map的display改为flex后，切片数量略有增加，但仍存在大量缺失。

问题根源 #

1. Shadow DOM布局时机：connectedCallback执行时，Web Component可能尚未完成布局渲染，Leaflet无法准确获取容器的实际尺寸，导致切片的加载位置和数量计算错误。
2. 宿主元素布局特性：:host设置为inline-block时，元素高度计算受inline布局规则影响，可能无法正确继承父容器的100%高度，进一步导致Leaflet容器尺寸异常。

解决方案 #

1. 修正宿主元素样式 #

将:host的display改为block，确保组件以块级元素布局，正确继承父容器的宽高：

:host {
    display: block;
    width: 100%;
    height: 100%;
}

2. 延迟初始化地图 #

使用requestAnimationFrame等待组件布局完成后再初始化Leaflet地图，确保容器尺寸已确定：

connectedCallback() {
    requestAnimationFrame(() => {
        const mapDiv = this.shadowRoot.querySelector('#map');
        const map = L.map(mapDiv);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        map.setView([34.42696537699258, -119.7175455093384], 13);
        
        // 监听窗口 resize 事件，确保尺寸变化时地图重绘
        window.addEventListener('resize', () => map.invalidateSize());
    });
}

3. 保持地图容器的块级布局 #

#map无需设置为flex，保持block即可确保尺寸正确：

#map {
    display: block;
    width: 100%;
    height: 100%;
}

完整修正代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet.js with OpenStreetMap and Geolocation as Web Component</title>

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

<body>

    <geo-map></geo-map>

    <script>
        class GeoMap extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({ mode: 'open' });

                this.shadowRoot.innerHTML = `
                    <style>
                        :host {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }

                        #map {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    </style>
                    <div id="map"></div>
                `;
            }

            connectedCallback() {
                requestAnimationFrame(() => {
                    const mapDiv = this.shadowRoot.querySelector('#map');
                    const map = L.map(mapDiv);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(map);
                    map.setView([34.42696537699258, -119.7175455093384], 13);
                    
                    window.addEventListener('resize', () => map.invalidateSize());
                });
            }
        }

        customElements.define('geo-map', GeoMap);
    </script>

</body>

</html>

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