/index.html

## index.html
<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Polymer Colliding Property</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js"></script>
  <link href="https://raw.githubusercontent.com/Polymer/polymer/v1.7.1/polymer.html" rel="import">
</head>
<body>
  <colliding-element></colliding-element>

  <dom-module id="colliding-element">
    <template>
      <ul>
        <template is="dom-repeat" items="[[list]]" as="colliding">
          <li><button on-click="alert">[[colliding.num]]</button></li>
        </template>
      </ul>
    </template>
  </dom-module>
<script id="jsbin-javascript">
Polymer({
  is: 'colliding-element',

  properties: {},

  ready() {
    this.list = [
      {num: [1]},
      {num: [2]},
      {num: [3]},
      {num: [4]},
      {num: [5]},
      {num: [6]},
      {num: [7]},
      {num: [8]},
      {num: [9]}
    ];
  },

  colliding(i) {
    return this.list[i];
  },

  alert() {
    try {
      // this.colliding has been overwritten by
      // the as="colliding" attribute on the
      // dom-repeat
      alert(this.colliding(0).num[0]);
    } catch (e) {
      alert(e.message);
    }
  }
});
</script>

<script id="jsbin-source-html" type="text/html"><!doctype html>
<head>
  <meta charset="utf-8">
  <title>Polymer Colliding Property</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js"><\/script>
  <link href="https://raw.githubusercontent.com/Polymer/polymer/v1.7.1/polymer.html" rel="import">
</head>
<body>
  <colliding-element></colliding-element>

  <dom-module id="colliding-element">
    <template>
      <ul>
        <template is="dom-repeat" items="[[list]]" as="colliding">
          <li><button on-click="alert">[[colliding.num]]</button></li>
        </template>
      </ul>
    </template>
  </dom-module>
</body>
</script>


<script id="jsbin-source-javascript" type="text/javascript">Polymer({
  is: 'colliding-element',

  properties: {},

  ready() {
    this.list = [
      {num: [1]},
      {num: [2]},
      {num: [3]},
      {num: [4]},
      {num: [5]},
      {num: [6]},
      {num: [7]},
      {num: [8]},
      {num: [9]}
    ];
  },

  colliding(i) {
    return this.list[i];
  },

  alert() {
    try {
      // this.colliding has been overwritten by
      // the as="colliding" attribute on the
      // dom-repeat
      alert(this.colliding(0).num[0]);
    } catch (e) {
      alert(e.message);
    }
  }
});</script></body>

## jsbin.suwupas.js
Polymer({
  is: 'colliding-element',

  properties: {},

  ready() {
    this.list = [
      {num: [1]},
      {num: [2]},
      {num: [3]},
      {num: [4]},
      {num: [5]},
      {num: [6]},
      {num: [7]},
      {num: [8]},
      {num: [9]}
    ];
  },

  colliding(i) {
    return this.list[i];
  },

  alert() {
    try {
      // this.colliding has been overwritten by
      // the as="colliding" attribute on the
      // dom-repeat
      alert(this.colliding(0).num[0]);
    } catch (e) {
      alert(e.message);
    }
  }
});
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<title>Polymer Colliding Property</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js"></script>
	<link href="https://raw.githubusercontent.com/Polymer/polymer/v1.7.1/polymer.html" rel="import">
	</head>
	<body>
	<colliding-element></colliding-element>

	<dom-module id="colliding-element">
	<template>
	<ul>
	<template is="dom-repeat" items="[[list]]" as="colliding">
	<li><button on-click="alert">[[colliding.num]]</button></li>
	</template>
	</ul>
	</template>
	</dom-module>
	<script id="jsbin-javascript">
	Polymer({
	is: 'colliding-element',

	properties: {},

	ready() {
	this.list = [
	{num: [1]},
	{num: [2]},
	{num: [3]},
	{num: [4]},
	{num: [5]},
	{num: [6]},
	{num: [7]},
	{num: [8]},
	{num: [9]}
	];
	},

	colliding(i) {
	return this.list[i];
	},

	alert() {
	try {
	// this.colliding has been overwritten by
	// the as="colliding" attribute on the
	// dom-repeat
	alert(this.colliding(0).num[0]);
	} catch (e) {
	alert(e.message);
	}
	}
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!doctype html>
	<head>
	<meta charset="utf-8">
	<title>Polymer Colliding Property</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.min.js"><\/script>
	<link href="https://raw.githubusercontent.com/Polymer/polymer/v1.7.1/polymer.html" rel="import">
	</head>
	<body>
	<colliding-element></colliding-element>

	<dom-module id="colliding-element">
	<template>
	<ul>
	<template is="dom-repeat" items="[[list]]" as="colliding">
	<li><button on-click="alert">[[colliding.num]]</button></li>
	</template>
	</ul>
	</template>
	</dom-module>
	</body>
	</script>


	<script id="jsbin-source-javascript" type="text/javascript">Polymer({
	is: 'colliding-element',

	properties: {},

	ready() {
	this.list = [
	{num: [1]},
	{num: [2]},
	{num: [3]},
	{num: [4]},
	{num: [5]},
	{num: [6]},
	{num: [7]},
	{num: [8]},
	{num: [9]}
	];
	},

	colliding(i) {
	return this.list[i];
	},

	alert() {
	try {
	// this.colliding has been overwritten by
	// the as="colliding" attribute on the
	// dom-repeat
	alert(this.colliding(0).num[0]);
	} catch (e) {
	alert(e.message);
	}
	}
	});</script></body>