How to deal with a property which can be a String or an Object in Polymer?

Question

Am trying to create a polymer web component out of mapbox-gl-js.

I want to set the circle-color paint property (https://www.mapbox.com/mapbox-gl-js/style-spec/#paint-circle-color) with a property on a Polymer Custom Element, but this property can be a string OR an object, see :

"circle-color": "#ff0"

or in the case of a data-driven property

"circle-color": {
    "property": "temperature",
    "stops": [

      // "temperature" is 0   -> circle color will be blue
      [0, 'blue'],

      // "temperature" is 100 -> circle color will be red
      [100, 'red']

    ]
  }

so what should I use in the properties function of the Polymer component ? String or Object ?

class XCustom extends Polymer.Element {

  static get properties() {
    return {
      circle-color: String,
      // or circle-color: Object ?
    }
  }
}

customElements.define('x-custom', XCustom);

Thanks for your help ! (and I've checked https://www.webcomponents.org/element/PolymerVis/mapbox-gl, it doesn't do the job)

Answer 1

It doesn't really matter. You can store both, but for clarity, store it as an object and, if the variable is a string, make it into an object.