1. A concise explanation of the problem you're experiencing.
I'm trying to create a Polymer 2.0 web component that uses Cesium JS. I have included the Cesium files, created a <div> element in the Polymer template with an id 'globeContainer', and then attempted to initialize it with `new Cesium.Viewer('globeContainer'). However, the console reports the error: "Uncaught TypeError: Cannot read property 'appendChild' of null". I noticed this also happens if I run the 'HelloWorld' demo and provide an incorrect id name to the Viewer() constructor (i.e. an id for an element not in the DOM).
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
DIRECTORY STRUCTURE: ----------------------------------------------------------
app/src
>_ cesium-globe
>_ Cesium-1.43/
>_ cesium-globe.html
CODE: -------------------------------------------------------------------------
<!-- Import the base Polymer element dependencies -->
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<!-- Import other dependencies -->
....
<dom-module id="cesium-globe">
<template>
<style>
@import url([[importPath]]Cesium-1.43/Build/Cesium/Widgets/widgets.css);
:host{
...
}
#globeContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<div id="globeContainer"></div>
<!-- Import cesium script -->
<script src="[[importPath]]Cesium-1.43/Build/Cesium/Cesium.js"></script>
</template>
<script>
class CesiumGlobe extends Polymer.Element {
static get is() { return 'cesium-globe'; }
static get properties(){ ... }
ready() {
super.ready();
var viewer = new Cesium.Viewer('globeContainer');
}
}
window.customElements.define(CesiumGlobe.is, CesiumGlobe);
</script>
</dom-module>
ERROR: -----------------------------------------------------------------------
Uncaught TypeError: Cannot read property 'appendChild' of null
at new $ (Cesium.js:558)
at HTMLElement.ready (cesium-globe.html:44)
at HTMLElement._enableProperties (properties-changed.html:321)
at HTMLElement.connectedCallback (properties-mixin.html:208)
at HTMLElement.connectedCallback (element-mixin.html:532)
at HTMLElement._attachDom (element-mixin.html:588)
at HTMLElement._readyClients (element-mixin.html:561)
at HTMLElement._flushClients (property-effects.html:1565)
at HTMLElement._propertiesChanged (property-effects.html:1699)
at HTMLElement._flushProperties (properties-changed.html:338)
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I need to create a plug-able web component using Polymer that provides a 3D globe view that we can add data to. Cesium provides a really slick interface for this, so I would like to use it. However, it doesn't seem to play nice with the shadow DOM Polymer uses.
4. The Cesium version you're using, your operating system and browser.
Cesium 1.43
Kubuntu 17.10
Chrome