Method _connect

src/map-style.js:68–106

()

    super();
  }
  _connect() {
    this.styleElement = document.createElement('style');
    this.styleElement.mapStyle = this;
    this.styleElement.textContent = this.textContent;
    copyAttributes(this, this.styleElement);
    // IMPORTANT: Only render if the correct container exists for THIS element's parent.
    // Don't fall back to _extentLayer if this is a layer child - wait for _layer instead.
    const isLayerChild = this._stylesheetHost.tagName === 'MAP-LAYER';
    const isExtentChild = this._stylesheetHost.tagName === 'MAP-EXTENT';

    if (isLayerChild && this._stylesheetHost._layer) {
      this._stylesheetHost._layer.renderStyles(this);
    } else if (isExtentChild && this._stylesheetHost._extentLayer) {
      this._stylesheetHost._extentLayer.renderStyles(this);
    } else if (this._stylesheetHost._templatedLayer) {
      this._stylesheetHost._templatedLayer.renderStyles(this);
    }

    function copyAttributes(source, target) {
      return Array.from(source.attributes).forEach((attribute) => {
        if (
          attribute.nodeName !== 'media' &&
          attribute.nodeName !== 'data-testid'
        ) {
          target.setAttribute(attribute.nodeName, attribute.nodeValue);
        }
      });
    }

    // use observer to monitor the changes in mapStyle textContent
    this._observer = new MutationObserver(() => {
      this.styleElement.textContent = this.textContent;
    });
    this._observer.observe(this, {
      childList: true,
      subtree: true,
      characterData: true
    });
  }
  _disconnect() {
    if (this._observer) {
      this._observer.disconnect();