ACTUALIZAR Ahora he replicado este problema en Plunker. Verifiqué la pregunta duplicada sugerida. La respuesta es incorrecta o falta el archivo CSS. He importado v1.3.4 para CSS y JS como se menciona enleaflet inicio rápido. El Plunker muestra que el CSS está incluido en Shadow DOM del elemento. Este no es el caso para mí. Además, la misma versión de JS y CSS funciona para código no polimérico, sin embargo, la distorsión ocurre con Polymer.

Estoy luchando durante varios días para que el mapa del folleto se cargue correctamente en Polymer 2. Este problema me está quitando el alma. He buscado varios hilos en SO:est, Github:est, est y varias otras publicaciones, desafortunadamente aún no se pudo solucionar el problema. Probado en Chrome y Firefox. He intentado con Openlayers y el mapa se carga perfectamente. El problema surge cuando se usa la API de Leaflet y Mapbox. Desafortunadamente, debido a los requisitos del cliente, no se pueden usar Openlayers.

Mi mapa se muestra así: Fragmentos de código:

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

ACTUALIZAD Código:

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

ntenté con CSS en línea, colocando JS en connectedcallback () y ready (), colocando CSS en el elemento padre, etc.

Supongo que hay algún problema de CSS dadas las publicaciones que leí. Pero no estoy seguro. ¿Realmente agradecería si alguien pudiera ayudar en este sentido? Avíseme si necesita más información.

Gracias