title: Webcomponent with internal js and css doesn't show content
body: <p>Learning webcomponents, I tried to make non-trivial ones like this one, wrapping a Leaflet slippy map. Yet, I can't get it to work... Here is my attempt - as you see, there is no map:</p>
  
  <p><a href="https://i.stack.imgur.com/a7zhO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a7zhO.png" alt="enter image description here"></a></p>
  
  <p><code>website-with-webcomponent-online.html</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;A Leaflet map!&lt;/title&gt;
    &lt;script src="./leaflet-map-webcomponent-online.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    Text before Leaflet.
    &lt;leaflet-map&gt;&lt;/leaflet-map&gt;
    Text after Leaflet.
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>leaflet-map-webcomponent-online.js</code></p>
  
  <pre><code>(function(){
  const template = document.createElement('template');
  template.innerHTML = `
  &lt;style&gt;
      display: block;    
      .map-root{
          border: 1px solid black;
          height: 180px;
      }
  &lt;/style&gt;
  &lt;h1&gt;Leaflet web component&lt;/h1&gt;
  &lt;div id="map" class="map-root"&gt;&lt;/div&gt;
  `;
  
  class CustomLeafletMapWebComponent extends HTMLElement {
      constructor() {
          super(); 
          console.log('CustomLeafletMapWebComponent constructed!');
          this._shadowRoot = this.attachShadow({ 'mode': 'open' });
          this._shadowRoot.appendChild(template.content.cloneNode(true));
          this.loadDependencies();
      }
  
      connectedCallback() {
          console.log('CustomLeafletMapWebComponent connected!');
  
          const mapRoot = this._shadowRoot.querySelector(".map-root")
  
          // timeout to avoid error "L is not defined"
          setTimeout(function(){
  
              // initialize the map
              var map = L.map(mapRoot).setView([42.35, -71.08], 13);
  
              // load a tile layer
              L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
                {
                  attribution: 'Tiles by &lt;a href="http://mapc.org"&gt;MAPC&lt;/a&gt;, Data by &lt;a href="http://mass.gov/mgis"&gt;MassGIS&lt;/a&gt;',
                  maxZoom: 17,
                  minZoom: 9
                }).addTo(map);
          }, 100);
      }
  
      disconnectedCallback() {
          console.log('CustomLeafletMapWebComponent disconnected!');
      }
  
      attributeChangedCallback(name, oldVal, newVal) {
          console.log(`Attribute: ${name} changed!`);
      }
  
      adoptedCallback() {
          console.log('CustomLeafletMapWebComponent adopted!');
      }
  
      loadCssFile(cssfile){
          var link = document.createElement("link");
          link.rel = "stylesheet";
          link.href = cssfile
          this._shadowRoot.appendChild(link)
          // // Variation:
          // var head = document.getElementsByTagName("head")[0]
          // head.appendChild(link)
      }
      loadScriptFile(scriptfile){
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = scriptfile
          this._shadowRoot.appendChild(script)
          // // Variation:
          // var head = document.getElementsByTagName("head")[0]
          // head.appendChild(script)
      }
      loadDependencies(){
        this.loadCssFile("https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css")
        this.loadScriptFile("https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js")
      }
  }
  window.customElements.define('leaflet-map', CustomLeafletMapWebComponent);
  })()
  </code></pre>
  
  <p>In a slight variation, in which I append the script and css file to the document's head instead of the shadow dom, it looks like this:
  <a href="https://i.stack.imgur.com/WcaVZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WcaVZ.png" alt="enter image description here"></a></p>