LeafletJS Map + LitElement示例

Question

我想通过LitElement创建简单的Leaflet Map自定义元素。我到现在为止，但是有如下图所示的问题。渲染了地图，但有一些随机图块以随机顺序出现，并且超出了我的元素边界。在控制台日志中，我没有任何问题，所以我无法解决问题。我的新手假设是LeafletJS库并不真正支持shadowRoot，但是我可能完全错了。我试图修改此Google Maps example，但是没有运气。 有人可以指出我的问题来正确渲染地图吗？ 目前，我通过脚本标签导入leafletjs，但我认为以后会使用NPM。同样，我稍后还会添加自定义标记和其他内容。

import { LitElement, html } from '@polymer/lit-element';

class MapX extends LitElement {
    render() {
        return html`
            <style>
                :host {
                    height: 100%;
                    width: 100%;
                    border: 3px solid green;
                }
                #map {
                    width: 100%;
                    height: 100%;
                }
            </style>
            <div id="map"></div>
        `;
    }

    constructor() {
        super();
    }

    static get is() {
        return 'os-map-x';
    }

    firstUpdated() {
        this.map = L.map(this.renderRoot.getElementById('map'), {
            center: [56.94965, 24.1052],
            zoom: 13,
        });
        const mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; ' + mapLink + ' contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            maxZoom: 24,
            id: 'leaflet.normal',
        }).addTo(this.map);
        console.log('XXX', this.map);
        super.firstUpdated();
    }

    connectedCallback() {
        super.connectedCallback();
        console.log('Element "os-map-x" connected!');
    }
}

customElements.define(MapX.is, MapX);