<script src="http://www.polymer-project.org/platform.js"></script>

<script src="http://www.polymer-project.org/polymer.js"></script>

​

<polymer-element name="traffic-light" attributes="color attributes" noscript>

  <template>

    <svg>

      <circle cx="80" cy="80" r="50" stroke="black" fill="{{color}}" />

    </svg>

  </template>

</polymer-element>

​

<polymer-element name="traffic-enclosure" noscript>

  <template>

    <svg width="460" height="440">

      <rect width="160" height="440" fill="white" stroke="black" />

      <foreignObject width="180" height="1440">

        <traffic-light color="red"></traffic-light>

        <content></content>

      </foreignObject>

    </svg>

  </template>

</polymer-element>

​

<traffic-enclosure>

  <traffic-light color="yellow"></traffic-light>

  <traffic-light color="green"></traffic-light>

</traffic-enclosure>