Leaflet + Polymer 2 map loading with distorted tile however works with non-polymer code
Leaflet CSS styles are not applied to shadow DOM elements.
To make it work you need to add leaflet.css here:
// ...
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
<p>I'm a shadow DOM child element of x-foo.</p>
// ...
Working example:
https://plnkr.co/edit/CJUlwUnBezum9jgt93uF?p=preview
Leaflet drawing tiles disjointly
This sounds like a symptom of missing Leaflet CSS file, or incorrect version of that file.
Related Topics
Using 'Order' Property to Position Flex Item Between Siblings
Creating a CSS Linear Gradient Based on Two Points Relative to a Rectangle
Overflow:Auto Not Working in Touch Devices(Ios)
Ios9: Try to Open App via Scheme If Possible, or Redirect to App Store Otherwise
Inject a Local JavaScript into Uiwebview
Handling JavaScript Events in Wkwebview
Rotating Clickable Elements in IE8+
Detect Android Phone via JavaScript/Jquery
Vanilla JavaScript: How to Toggle Multiple CSS-Classes in One Statement
List of All Background Images in Dom
Align Select-Options Text to Right
React-Native Updating List View Datasource
How to Detect When a CSS File Has Been Fully Loaded