<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdnjs.cloudflare.com/ajax/libs/polymer/1.7.0/polymer.html">
html
<dom-module id="resizable-element">
<template>
<style>
:host {
display: block;
width: 200px;
height: 200px;
background-color: grey;
}
</style>
</template>
<script>
Polymer({
is: "resizable-element",
behaviors: [ Polymer.IronResizableBehavior ],
listeners: {
"iron-resize": "_onResize"
},
_onResize: function() {
console.log("Element resized!");
}
});
</script>
</dom-module>
html
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="import" href="resizable-element.html">
</head>
<body>
<resizable-element></resizable-element>
</body>
</html>
