Как использовать div внутри Shadow DOM в качестве контейнера карты Leaflet?

Question

Пользовательский элемент на основе JS, показанный ниже, работает, но не может найти mapid div, который я добавляю в теневой корень DOM. Есть ли способ в Leaflet или пользовательских элементах, позволяющий стандартному Leaflet (версия 1.4, последняя на момент написания этой статьи) находить и использовать теневую DOM-основу mapid div?

ошибка:

Uncaught Error: Map container not found.
    at NewClass._initContainer (Map.js:1102)
    at NewClass.initialize (Map.js:136)
    at new NewClass (Class.js:22)
    at Module.createMap (Map.js:1717)
    at new GDMap (gd-map.js:16)
    at gd-map.js:30
    at gd-map.js:31

Я продолжаю подход, согласно которому это просто тот случай, когда Leaflet ищет div mapid в корне dom и не может найти его в тени dom.

1010 * Javascript *

import * as L from './leaflet/leaflet-src.esm.js';

(function () {
    class GDMap extends HTMLElement {
        constructor() {
            super();

            this.attachShadow({ mode: 'open' });
            this.shadowRoot.innerHTML = `<div style="height:180px" id="mapid"></div>`;

           var map = L.map('mapid').setView([51.505, -0.09], 13);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

            }).addTo(map);


            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();

        }
    }
    window.customElements.define('geodex-map', GDMap);
})();

отредактировал сообщение, чтобы выровнять div id, как указано, но проблема все еще та же.

Answer 1

Создание экземпляра карты Leaflet до того, как его контейнер находится в DOM, является известной проблемой , с известным решением:

<div id="leafletmap"> необходимо добавить кДом до звонит L.map('leafletmap').

Но вы уже знаете это, потому что задаете очень хороший и конкретный вопрос:

в [Leaflet 1.4] есть способ найти и использовать теневую DOM-основу mapid div?

Ответ «нет, но».

Если вы внимательно прочиталиВ справочнике по Leaflet API вы заметите, что L.Map может быть создан двумя способами : либо предоставив id из HTMLElement, который будет контейнером карты, либо предоставление HTMLElement экземпляра контейнера.

Другими словами, что-то вроде:

var mapdiv = document.createElement('div');
shadow.appendChild(mapdiv);
var map = L.map(mapdiv)

Answer 2

Я думаю, что теперь это разрешается следующим образом.

Необходимо передать div карты как элемент, не предоставляющий строку идентификатора для Leaflet, которую нужно найти.Также пройти по CSS.

import * as L from './leaflet/leaflet-src.esm.js';

(function () {
    class GDMap extends HTMLElement {
        constructor() {
            super();

            let shadow = this.attachShadow({mode: 'open'});
            var mapdiv = document.createElement('div');
            mapdiv.setAttribute('id', 'mapid');
            // mapdiv.setAttribute('style', 'height:180px');
            mapdiv.style.height = "180px";
            mapdiv.innerHTML = ' <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="crossorigin=""/>';
            shadow.appendChild(mapdiv);

            var map = L.map(mapdiv).setView([51.505, -0.09], 13);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

            }).addTo(map);

            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();

        }
    }
    window.customElements.define('geodex-map', GDMap);
})();