ОБНОВЛЕНИЕ: Я теперь повторил эту проблему в Plunker .Я проверил предложенный дубликат вопроса.Ответ неверный или отсутствует файл CSS.Я импортировал v1.3.4 для CSS и JS, как упомянуто в буклет Быстрый старт .Plunker показывает, что CSS включен в Shadow DOM элемента.Это не тот случай для меня.Кроме того, та же версия JS и CSS работает для неполимерного кода, однако искажение происходит с Polymer.
Я борюсь в течение нескольких дней, чтобы правильно загрузить карту листовки в Polymer 2. Эта проблемазабирает душу из меня сейчас.Я искал различные темы в SO: this , Github: this , this и нескольких других сообщениях, к сожалению, до сих пор не смог решить проблему.Протестировано как в Chrome, так и в Firefox.Я пробовал с Openlayers и карта загружается отлично.Проблема возникает при использовании Leaflet и Mapbox API.К сожалению, из-за требований клиента, я не могу использовать Openlayers.
Моя карта выглядит так: 
Фрагменты кода:
<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);
}
ОБНОВЛЕНО Код:
<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 в родительский элемент и т. Д.
IЯ предполагаю, что есть некоторые проблемы с CSS, учитывая сообщения, которые я прочитал.Но не уверен.Был бы очень признателен, если бы кто-то мог помочь в этом отношении?Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.
Спасибо.