polymer-elem-switch.html

<link rel="import" href="/bower_components/polymer/polymer.html">

<link rel="import" href="child-elements/vonage-element.html">
<link rel="import" href="child-elements/twilio-element.html">

<dom-module id="polymer-elem-switch">
  <template>
    <style>
      :host {
        display: block;
        padding:  12px;
        border-radius: 8px;
        border: 1px solid #333;
      }

      vonage-element,
      twilio-element {
        padding:  10px;
        border-radius: 8px;
        border: 1px solid #999;
        margin: 12px 0;
      }
    </style>

    <h2>Parent</h2>

    <h3> Value: [[value]] </h3>

    <template is="dom-if" if="[[!useTwilioElement]]" restamp="true">
      <vonage-element value="{{value}}"></vonage-element>
    </template>

    <template is="dom-if" if="[[useTwilioElement]]" restamp="true">
      <twilio-element value="{{value}}"></twilio-element>
    </template>
  </template>

  <script>
    'use strict'

    Polymer({

      is: 'polymer-elem-switch',

      properties: {
        useTwilioElement: {
          type: Boolean,
          value: true
        },

        value: {
          notify: true
        }
      },

      attached: function() {
        window.parentElement = this
      }
    })
  </script>
</dom-module>