具有内部 js 和 css 的 Web 组件不显示内容答案

【问题标题】：Webcomponent with internal js and css doesn't show content具有内部 js 和 css 的 Web 组件不显示内容
【发布时间】：2019-10-07 14:48:22
【问题描述】：

学习webcomponents，我试着做一个像这样不平凡的，包裹一个Leaflet滑图。然而，我无法让它工作......这是我的尝试 - 如你所见，没有地图：

website-with-webcomponent-online.html

<html>
<head>
  <title>A Leaflet map!</title>
  <script src="./leaflet-map-webcomponent-online.js"></script>
</head>
<body>

  Text before Leaflet.
  <leaflet-map></leaflet-map>
  Text after Leaflet.

</body>
</html>

leaflet-map-webcomponent-online.js

(function(){
const template = document.createElement('template');
template.innerHTML = `
<style>
    display: block;    
    .map-root{
        border: 1px solid black;
        height: 180px;
    }
</style>
<h1>Leaflet web component</h1>
<div id="map" class="map-root"></div>
`;

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 <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
                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);
})()

在一个轻微的变化中，我将脚本和 css 文件附加到文档的头部而不是影子 dom，它看起来像这样：

【问题讨论】：

标签： javascript css web-component

【解决方案1】：

找到了解决办法。将模板的 css 更改为：

template.innerHTML = `
<style>
        .map-root{
            border: 1px solid black;
            height: 180px;
        }
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<h1>Leaflet web component</h1>
<div id="map" class="map-root"></div>
`;

是否将leaflet.js 包含到shadowdom 或文档中并不重要——至少对于本示例而言。

loadScriptFile(scriptfile){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = scriptfile
    var head = document.getElementsByTagName("head")[0]
    this._shadowRoot.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")
}

【讨论】：