Leaflet + Polymer 2 地图加载时带有扭曲的图块，但适用于非聚合物代码

UPDATE:我现在已将这个问题复制到Plunker。我确实检查了建议的重复问题。答案是不正确或缺少 CSS 文件。我已经导入了 CSS 和 JS v1.3.4，如中所述传单快速入门。 Plunker 显示 CSS 包含在元素的 Shadow DOM 中。我的情况并非如此。此外，相同版本的 JS 和 CSS 适用于非聚合物代码，但是，聚合物代码会出现失真。

为了在 Polymer 2 中正确加载传单地图，我花了好几天的时间。这个问题现在让我心烦意乱。我在 SO 中搜索了各种线程：this，Github：this, this不幸的是，和其他几个帖子仍然无法解决问题。在 Chrome 和 Firefox 中进行了测试。我尝试过 Openlayers，地图加载完美。使用 Leaflet 和 Mapbox API 时会出现此问题。不幸的是，由于客户要求，无法使用 Openlayers。

My map renders like this: Code fragments:

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

ready() {
    super.ready();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
}

UPDATED Code:

<style include="shared-styles publish-project-styles">
    :host {
    display: block;
    padding: 20px;
  }
    #mapContainer{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }

    .leaflet-container{
        width: 100%; height: 400px; border: 1px solid #0A569D;
    }
</style>

<td  id="leftContainer" width="50%" style="padding: 15px;">
 <div id="mapContainer"></div>
 <!-- <canvas id="mapContainer" style="width: 400px; height: 400px; border: 1px solid #0A569D;"></canvas> --></td>

connectedCallback() {
    super.connectedCallback();          
    let leafmap = L.map(this.$.mapContainer).setView([48.84, 2.3], 5);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(leafmap);
    leafmap.invalidateSize();
}

我确实尝试过使用内联CSS，将JS放入connectedcallback（）和ready（）中，将CSS放入父元素等。

我假设，鉴于我读过的帖子，存在一些 CSS 问题。但不确定。如果有人可以在这方面提供帮助，我会非常感激吗？如果需要更多信息，请告诉我。

Thanks.

Leaflet CSS 样式不适用于影子 DOM 元素。

为了使其工作，您需要在此处添加 leaflet.css ：

// ...
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">

<p>I'm a shadow DOM child element of x-foo.</p>
// ...

工作示例：https://plnkr.co/edit/CJUlwUnBezum9jgt93uF?p=preview