Using leaflet in native web component

class InfoWithMap extends HTMLElement {
  constructor(){
    super().attachShadow({mode: 'open'});
  }
  connectedCallback(){
    let container = `
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
    <div id='container'>
      <div>Name: Someone</div>
      <div>Location: Some place</div>
      <div id='map'></div>
    </div>`
    this.shadowRoot.innerHTML = container;
    
    let mapDiv = this.shadowRoot.getElementById('map');
    var map = L.map(mapDiv).setView([51.505, -0.09], 19);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
  }
}

window.customElements.define('info-with-map', InfoWithMap);


let m = document.createElement('info-with-map');
document.getElementById('main').append(m);

#main {
  width: 50%;
}

<!-- https://leafletjs.com/examples/quick-start/ -->

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>

 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
     crossorigin=""></script>

<div id="main"> 
</div>