From 6d51d125812a0ebbac79472361312dd821808c7d Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Wed, 28 Feb 2018 09:09:29 +0100
Subject: [PATCH 01/10] Full height and width to ensure that the div fills the
 whole element.

Otherwise, it was possible that percentual heights were not propagated correctly as the saw-div did not have the same height as the resize-aware element.
Also fixed the CSS style which refered to the element saw but was probably meant for the div with the id "saw"
---
 resize-aware.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resize-aware.html b/resize-aware.html
index e3cd96a..1d44848 100644
--- a/resize-aware.html
+++ b/resize-aware.html
@@ -11,7 +11,9 @@
 				position: relative;
 			}
 			
-			saw {
+			#saw {
+				height: 100%;
+				width: 100%;
 				display: inline-block;
 				margin: 0px;
 				padding: 0px;

From 03254c3201d39dab6edc9127d17a956abeb5532c Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Fri, 1 Jun 2018 09:40:14 +0200
Subject: [PATCH 02/10] Update to 3.0

---
 .gitignore                                |   2 +
 bower.json                                |  29 --
 demo/index.html                           |  44 +-
 modulizer_out/demo/index.html             |  96 ++++
 modulizer_out/index.html                  |  16 +
 modulizer_out/resize-aware.js             | 550 +++++++++++++++++++++
 modulizer_out/test/index.html             |  14 +
 modulizer_out/test/resize-aware_test.html |  55 +++
 package.json                              |  32 ++
 resize-aware.html                         | 552 ----------------------
 resize-aware.js                           | 550 +++++++++++++++++++++
 test/index.html                           |   6 +-
 test/resize-aware_test.html               |  45 +-
 13 files changed, 1374 insertions(+), 617 deletions(-)
 delete mode 100644 bower.json
 create mode 100644 modulizer_out/demo/index.html
 create mode 100644 modulizer_out/index.html
 create mode 100644 modulizer_out/resize-aware.js
 create mode 100644 modulizer_out/test/index.html
 create mode 100644 modulizer_out/test/resize-aware_test.html
 create mode 100644 package.json
 delete mode 100644 resize-aware.html
 create mode 100644 resize-aware.js

diff --git a/.gitignore b/.gitignore
index 8d4ae25..820b767 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 bower_components
+
+node_modules
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 091372a..0000000
--- a/bower.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "name": "resize-aware",
-  "description": "Container element that is aware of and notifies of changes to its size",
-  "main": "resize-aware.html",
-  "version": "2.0.0",
-  "keywords": [
-    "polymer",
-    "container",
-    "resize",
-    "ResizeSensor",
-    "sensor",
-    "responsive",
-    "custom-element",
-    "web-components"
-  ],
-  "dependencies": {
-    "polymer": "Polymer/polymer#^2.0.2"
-  },
-  "demo": "demo/index.html",
-  "license": "MIT",
-  "devDependencies": {
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
-    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
-  },
-  "resolutions": {
-    "polymer": "^2.0.0"
-  }
-}
diff --git a/demo/index.html b/demo/index.html
index 7d3be34..3b35e6a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,17 +8,38 @@
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
-    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-    <link rel="import" href="../resize-aware.html">
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>-pages-shared-styles.js"></script>
+    <script type="module" src="../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
+    <script type="module" src="../resize-aware.js"></script>
 
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
       </style>
     </custom-style>
-  </head>
-  <body>
-    <div class="vertical-section-container centered">
+  </<!-- FIXME(polymer-modulizer):
+        These imperative modules that innerHTML your HTML are
+        a hacky way to be sure that any mixins in included style
+        modules are ready before any elements that reference them are
+        instantiated, otherwise the CSS @apply mixin polyfill won't be
+        able to expand the underlying CSS custom properties.
+        See: https://github.com/Polymer/polymer-modulizer/issues/154
+        -->
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>ize-aware Demo</h3>
+      <demo-snippet>
+        <template>
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
       <h3>Basic resize-aware Demo</h3>
       <demo-snippet>
         <template>
@@ -64,9 +85,12 @@ <h3>Basic resize-aware Demo</h3>
               t.innerHTML =
                  '<p>This azure area is resize-aware.</p><p>It fires an event when its size changes. For example, if the content size changes.</p><p>Or, of course, if the viewport changes. (try resizing the window).</p><p>The control is event driven, no polling loops.</p>';
             }, 19000);
-          </script>
+          &lt;/script>
         </template>
       </demo-snippet>
-    </div>
-  </body>
-</html>
+    </div>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
+}, 19000);
+</script>
diff --git a/modulizer_out/demo/index.html b/modulizer_out/demo/index.html
new file mode 100644
index 0000000..3b35e6a
--- /dev/null
+++ b/modulizer_out/demo/index.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>resize-aware demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>-pages-shared-styles.js"></script>
+    <script type="module" src="../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
+    <script type="module" src="../resize-aware.js"></script>
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </<!-- FIXME(polymer-modulizer):
+        These imperative modules that innerHTML your HTML are
+        a hacky way to be sure that any mixins in included style
+        modules are ready before any elements that reference them are
+        instantiated, otherwise the CSS @apply mixin polyfill won't be
+        able to expand the underlying CSS custom properties.
+        See: https://github.com/Polymer/polymer-modulizer/issues/154
+        -->
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>ize-aware Demo</h3>
+      <demo-snippet>
+        <template>
+    <script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
+      <h3>Basic resize-aware Demo</h3>
+      <demo-snippet>
+        <template>
+          <div style="display: -webkit-flex; display: flex; max-width: 500px; min-height: 80px;">
+            <resize-aware>
+              <div id="tester" style="background-color: azure; margin: 5px; padding: 5px;">
+                <p>
+                  This azure area is resize-aware.
+                </p>
+              </div>
+            </resize-aware>
+            <div id="col2info" style=" margin: 5px; padding: 5px;"></div>
+          </div>
+          <ul id="chglist">
+  
+          </ul>
+          <script>
+            window.addEventListener('WebComponentsReady', function (e) {
+              document.querySelector('resize-aware').addEventListener('element-resize', function (e) {
+                var li = document.createElement('li');
+                li.innerHTML = 'Changed to ' + e.detail.width + ' x ' + e.detail.height;
+                document.querySelector('#chglist').appendChild(li);
+              });
+            });
+  
+            setTimeout(function () {
+              var t = document.querySelector('#tester');
+              t.innerHTML =
+                '<p>This azure area is resize-aware.</p><p>It fires an event when its size changes. For example, if the content size changes.</p>';
+            }, 5000);
+            setTimeout(function () {
+              var t = document.querySelector('#col2info');
+              t.innerHTML =
+                '<p>... Or if other elements in the layout change the available space.</p>';
+            }, 10000);
+            setTimeout(function () {
+              var t = document.querySelector('#tester');
+              t.innerHTML =
+                 '<p>This azure area is resize-aware.</p><p>It fires an event when its size changes. For example, if the content size changes.</p><p>Or, of course, if the viewport changes. (try resizing the window).</p>';
+            }, 15000);
+            setTimeout(function () {
+              var t = document.querySelector('#tester');
+              t.innerHTML =
+                 '<p>This azure area is resize-aware.</p><p>It fires an event when its size changes. For example, if the content size changes.</p><p>Or, of course, if the viewport changes. (try resizing the window).</p><p>The control is event driven, no polling loops.</p>';
+            }, 19000);
+          &lt;/script>
+        </template>
+      </demo-snippet>
+    </div>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
+}, 19000);
+</script>
diff --git a/modulizer_out/index.html b/modulizer_out/index.html
new file mode 100644
index 0000000..5de68cc
--- /dev/null
+++ b/modulizer_out/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>resize-aware</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>
diff --git a/modulizer_out/resize-aware.js b/modulizer_out/resize-aware.js
new file mode 100644
index 0000000..f5bded1
--- /dev/null
+++ b/modulizer_out/resize-aware.js
@@ -0,0 +1,550 @@
+import { PolymerElement } from '../../@polymer/polymer/polymer-element.js';
+import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
+/**
+* `resize-aware`
+*
+* Container element that is aware of, and notifies of, changes to its size
+*
+* Use `resize-aware` in place of a `div` when you need to take some action
+* if the rendered dimensions of the element change (content change affecting the
+* size, layout changes, viewport change). `resize-aware` will fire an event when
+* its dimensions change that includes the new size.
+* 
+* Example:
+* 
+* ```
+* <resize-aware on-element-size-changed="handleChange">
+*  any content that could have been in a div
+* </resize-aware>
+* ``` 
+* 
+* ```
+* <resize-aware>
+*  any content that could have been in a div
+* </resize-aware>
+* 
+* this.$$('resize-aware').addEventListener('element-resize', this.someHandlerName);
+* ``` 
+* 
+* @demo demo/index.html
+**/
+class ResizeAware extends PolymerElement {
+  static get template() {
+    return html`
+		<style>
+			:host {
+				display: block;
+				margin: 0px;
+				padding: 0px;
+				border: none;
+				position: relative;
+			}
+			
+			#saw {
+				height: 100%;
+				width: 100%;
+				display: inline-block;
+				margin: 0px;
+				padding: 0px;
+				border: none;
+				position: relative;
+			}
+			
+			@keyframes resizeanim {
+				from {
+					opacity: 0;
+				}
+				to {
+					opacity: 0;
+				}
+			}
+			
+			.ResizeSensor__resizeTriggers {
+				animation: 1ms resizeanim;
+				visibility: hidden;
+				opacity: 0;
+			}
+			
+			.ResizeSensor__resizeTriggers,
+			.ResizeSensor__resizeTriggers>div,
+			.ResizeSensor__contractTrigger:before {
+				content: ' ';
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				width: 100%;
+				overflow: hidden;
+			}
+			
+			.ResizeSensor__resizeTriggers>div {
+				background: #eee;
+				overflow: auto;
+			}
+			
+			.ResizeSensor__contractTrigger:before {
+				width: 200%;
+				height: 200%;
+			}
+		</style>
+		<div id="saw">
+			<slot></slot>
+			<div id="rsrt" class="ResizeSensor ResizeSensor__resizeTriggers">
+				<div id="rsexpt" class="ResizeSensor__expandTrigger">
+					<div id="rsexptc" style="width: 1px; height: 1px;"></div>
+				</div>
+				<div id="rscntrt" class="ResizeSensor__contractTrigger">
+				</div>
+			</div>
+		</div>
+`;
+  }
+
+  static get is() {
+      return 'resize-aware';
+  }
+
+  static get properties() {
+      return {
+          /**
+           * Current element size in px. { height: width: }
+           * @type {Object}
+           */
+          elementSize: {
+              type: Object,
+              notify: true,
+              readOnly: true,
+              value: function () {
+                  return {
+                      width: 0,
+                      height: 0
+                  };
+              }
+          },
+          _rsApi: {
+              type: Object
+          }
+      }
+  }
+  /**
+   * Initialize listening for size changes
+   */
+  ready() {
+      super.ready();
+      this._rsApi = this._resizeSensorApi(this._resizeSensor(this));
+      this._rsApi.create(this.$.saw, [this.$.rsrt, this.$.rsexpt, this.$.rsexptc, this.$.rscntrt], this._handleResize.bind(this));
+  }
+
+  /**
+   * Handle resize events
+   * @param  {[type]} e [description]
+   * @return {[type]}   [description]
+   */
+  _handleResize(e) {
+      this.dispatchEvent(new CustomEvent('element-resize', { detail: e }));
+      this._setElementSize({
+					width: e.width,
+					height: e.height
+      });
+  }
+
+  /**
+   * The API for resize sensor
+   *
+   * Adapted from procurios/ResizeSensor - https://github.com/procurios/ResizeSensor
+   * in order to work in Polymer and Shadow DOM. This includes removing dynamic generation
+   * of CSS styles and the sensor divs and moving that into the template markup.
+   * @param  ResizeSensor ResizeSensor
+   * @return ResizeSensorApi              public API of ResizeSensor
+   */
+  _resizeSensorApi(ResizeSensor) {
+      'use strict';
+
+      /** {{}} Map of all resize sensors (id => ResizeSensor) */
+      var allResizeSensors = {};
+
+      /**
+       * @constructor
+       */
+      var ResizeSensorApi = function () {};
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @param {Function} callback
+       * @returns {ResizeSensor}
+       */
+      ResizeSensorApi.prototype.create = function (targetElement, trigElements, callback) {
+					var sensorId = this.getSensorId(targetElement);
+
+					if (allResizeSensors[sensorId]) {
+              return allResizeSensors[sensorId];
+					}
+
+					var Instance = new ResizeSensor(targetElement, trigElements, callback);
+					allResizeSensors[sensorId] = Instance;
+					return Instance;
+      };
+
+      /**
+       * @param {HTMLElement} targetElement
+       */
+      ResizeSensorApi.prototype.destroy = function (targetElement) {
+					var sensorId = this.getSensorId(targetElement);
+
+					/** @var ResizeSensor */
+					var Sensor = allResizeSensors[sensorId];
+
+					if (!Sensor) {
+              console && console.error("Can't destroy ResizeSensor (404 not found).", targetElement);
+					}
+
+					Sensor.destroy();
+					delete allResizeSensors[sensorId];
+      };
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @returns {string}
+       */
+      ResizeSensorApi.prototype.getSensorId = function (targetElement) {
+					return targetElement.id;
+      };
+
+      return new ResizeSensorApi();
+  }
+
+  /**
+   * Resize sensor core function
+   *
+   * Adapted with fairly minor changes from
+   * procurios/ResizeSensor - https://github.com/procurios/ResizeSensor
+   * in order to work in Polymer and Shadow DOM
+   *
+   * @param  HTMLElement rootNode the shadow root of this component
+   * @return ResizeSensor          core function class
+   */
+  _resizeSensor(rootNode) {
+      /** ----- Feature tests and polyfills ----- */
+      /** {array} */
+      var unsuitableElements = ['IMG', 'COL', 'TR', 'THEAD', 'TFOOT'];
+      /** {boolean} */
+      var supportsAttachEvent = ('attachEvent' in document);
+
+      if (!supportsAttachEvent) {
+					var browserSupportsCSSAnimations = isCSSAnimationSupported();
+					var animationPropertiesForBrowser = (browserSupportsCSSAnimations) ? getAnimationPropertiesForBrowser() : {};
+					insertResizeSensorStyles();
+
+					if (!('requestAnimationFrame' in window) || !('cancelAnimationFrame' in window)) {
+              polyfillRAF();
+					}
+      }
+
+      /** ----- ResizeSensor ----- */
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @param {Function} callback
+       * @constructor
+       */
+      var ResizeSensor = function (targetElement, trigElements, callback) {
+					if (isUnsuitableElement(targetElement)) {
+              console && console.error(
+                  "Given element isn't suitable to act as a resize sensor. Try wrapping it with one that is. Unsuitable elements are:",
+                  unsuitableElements);
+              return;
+					}
+
+					/** @var {HTMLElement} */
+					this.targetElement = targetElement;
+					/** @var {Function} */
+					this.callback = callback;
+					/** @var {{width: int, height: int}} */
+					this.dimensions = {
+              width: 0,
+              height: 0
+					};
+
+					if (supportsAttachEvent) {
+              this.boundOnResizeHandler = this.onElementResize.bind(this);
+              this.targetElement.attachEvent('onresize', this.boundOnResizeHandler);
+              return;
+					}
+
+					/** @var {{container: HTMLElement, expand: HTMLElement, expandChild: HTMLElement, contract: HTMLElement}} */
+					/** trigger elements */
+					this.triggerElements = {};
+					this.triggerElements.container = trigElements[0];
+					this.triggerElements.expand = trigElements[1];
+					this.triggerElements.expandChild = trigElements[2];
+					this.triggerElements.contract = trigElements[3];
+					/** @var {int} */
+					this.resizeRAF = 0;
+
+					this.setup();
+      };
+
+      ResizeSensor.prototype.setup = function () {
+					// Make sure the target element is "positioned"
+					forcePositionedBox(this.targetElement);
+
+					// Create and append resize trigger elements
+					this.insertResizeTriggerElements();
+
+					// Start listening to events
+					this.boundScrollListener = this.handleElementScroll.bind(this);
+					this.targetElement.addEventListener('scroll', this.boundScrollListener, true);
+
+					if (browserSupportsCSSAnimations) {
+              this.boundAnimationStartListener = this.resetTriggersOnAnimationStart.bind(this);
+              this.triggerElements.container.addEventListener(animationPropertiesForBrowser.animationStartEvent, this.boundAnimationStartListener);
+					}
+
+					// Initial value reset of all triggers
+					this.resetTriggers();
+      };
+
+      ResizeSensor.prototype.insertResizeTriggerElements = function () {
+					
+      };
+
+      ResizeSensor.prototype.onElementResize = function () {
+					var currentDimensions = this.getDimensions();
+
+					if (this.isResized(currentDimensions)) {
+              this.dimensions.width = currentDimensions.width;
+              this.dimensions.height = currentDimensions.height;
+              this.elementResized();
+					}
+      };
+
+      ResizeSensor.prototype.handleElementScroll = function () {
+					var _this = this;
+
+					this.resetTriggers();
+
+					if (this.resizeRAF) {
+              window.cancelAnimationFrame(this.resizeRAF);
+					}
+
+					this.resizeRAF = window.requestAnimationFrame(function () {
+              var currentDimensions = _this.getDimensions();
+              if (_this.isResized(currentDimensions)) {
+                  _this.dimensions.width = currentDimensions.width;
+                  _this.dimensions.height = currentDimensions.height;
+                  _this.elementResized();
+              }
+					});
+      };
+
+      /**
+       * @param {{width: number, height: number}} currentDimensions
+       * @returns {boolean}
+       */
+      ResizeSensor.prototype.isResized = function (currentDimensions) {
+					return (currentDimensions.width !== this.dimensions.width || currentDimensions.height !== this.dimensions.height)
+      };
+
+      /**
+       * @returns {{width: number, height: number}}
+       */
+      ResizeSensor.prototype.getDimensions = function () {
+					return {
+              width: this.targetElement.offsetWidth,
+              height: this.targetElement.offsetHeight
+					};
+      };
+
+      /**
+       * @param {Event} event
+       */
+      ResizeSensor.prototype.resetTriggersOnAnimationStart = function (event) {
+					if (event.animationName === animationPropertiesForBrowser.animationName) {
+              this.resetTriggers();
+					}
+      };
+
+      ResizeSensor.prototype.resetTriggers = function () {
+					this.triggerElements.contract.scrollLeft = this.triggerElements.contract.scrollWidth;
+					this.triggerElements.contract.scrollTop = this.triggerElements.contract.scrollHeight;
+					this.triggerElements.expandChild.style.width = this.triggerElements.expand.offsetWidth + 1 + 'px';
+					this.triggerElements.expandChild.style.height = this.triggerElements.expand.offsetHeight + 1 + 'px';
+					this.triggerElements.expand.scrollLeft = this.triggerElements.expand.scrollWidth;
+					this.triggerElements.expand.scrollTop = this.triggerElements.expand.scrollHeight;
+      };
+
+      ResizeSensor.prototype.elementResized = function () {
+					this.callback(this.dimensions);
+      };
+
+      ResizeSensor.prototype.destroy = function () {
+					this.removeEventListeners();
+					this.targetElement.removeChild(this.triggerElements.container);
+					delete this.boundAnimationStartListener;
+					delete this.boundScrollListener;
+					delete this.callback;
+					delete this.targetElement;
+      };
+
+      ResizeSensor.prototype.removeEventListeners = function () {
+					if (supportsAttachEvent) {
+              this.targetElement.detachEvent('onresize', this.boundOnResizeHandler);
+					}
+
+					this.triggerElements.container.removeEventListener(animationPropertiesForBrowser.animationStartEvent, this.boundAnimationStartListener);
+					this.targetElement.removeEventListener('scroll', this.boundScrollListener, true);
+      };
+
+      /** ----- Various helper functions ----- */
+
+      /**
+       * An element is said to be positioned if its 'position' property has a value other than 'static'
+       * @see http://www.w3.org/TR/CSS2/visuren.html#propdef-position
+       * @param {HTMLElement} element
+       */
+      function forcePositionedBox(element) {
+					var position = getStyle(element, 'position');
+
+					if (position === 'static') {
+              element.style.position = 'relative';
+					}
+      }
+
+      /**
+       * @returns {boolean}
+       */
+      function isCSSAnimationSupported() {
+					var testElement = document.createElement('div');
+					var isAnimationSupported = ('animationName' in testElement.style);
+
+					if (isAnimationSupported) {
+              return true;
+					}
+
+					var browserPrefixes = 'Webkit Moz O ms'.split(' ');
+					var i = 0;
+					var l = browserPrefixes.length;
+
+					for (; i < l; i++) {
+              if ((browserPrefixes[i] + 'AnimationName') in testElement.style) {
+                  return true;
+              }
+					}
+
+					return false;
+      }
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @returns {boolean}
+       */
+      function isUnsuitableElement(targetElement) {
+					var tagName = targetElement.tagName.toUpperCase();
+					return (unsuitableElements.indexOf(tagName) > -1);
+      }
+
+      /**
+       * Determines which style convention (properties) to follow
+       * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support
+       * @returns {{keyframesRule: string, styleDeclaration: string, animationStartEvent: string, animationName: string}}
+       */
+      function getAnimationPropertiesForBrowser() {
+					var testElement = document.createElement('div');
+					var supportsUnprefixedAnimationProperties = ('animationName' in testElement.style);
+
+					// Unprefixed animation properties
+					var animationStartEvent = 'animationstart';
+					var animationName = 'resizeanim';
+
+					if (supportsUnprefixedAnimationProperties) {
+              return {
+                  keyframesRule: '@keyframes ' + animationName + ' {from { opacity: 0; } to { opacity: 0; }}',
+                  styleDeclaration: 'animation: 1ms ' + animationName + ';',
+                  animationStartEvent: animationStartEvent,
+                  animationName: animationName
+              };
+					}
+
+					// Browser specific animation properties
+					var keyframePrefix = '';
+					var browserPrefixes = 'Webkit Moz O ms'.split(' ');
+					var startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
+
+					var i;
+					var l = browserPrefixes.length;
+
+					for (i = 0; i < l; i++) {
+              if ((browserPrefixes[i] + 'AnimationName') in testElement.style) {
+                  keyframePrefix = '-' + browserPrefixes[i].toLowerCase() + '-';
+                  animationStartEvent = startEvents[i];
+                  break;
+              }
+					}
+
+					return {
+              keyframesRule: '@' + keyframePrefix + 'keyframes ' + animationName +
+                  ' {from { opacity: 0; } to { opacity: 0; }}',
+              styleDeclaration: keyframePrefix + 'animation: 1ms ' + animationName + ';',
+              animationStartEvent: animationStartEvent,
+              animationName: animationName
+					};
+      }
+
+      /**
+       * Provides requestAnimationFrame in a cross browser way
+       * @see https://gist.github.com/mrdoob/838785
+       */
+      function polyfillRAF() {
+					if (!window.requestAnimationFrame) {
+              window.requestAnimationFrame = (function () {
+                  return window.webkitRequestAnimationFrame ||
+                      window.mozRequestAnimationFrame ||
+                      window.oRequestAnimationFrame ||
+                      window.msRequestAnimationFrame ||
+                      function (callback) {
+                          window.setTimeout(callback, 1000 / 60);
+                      };
+              })();
+					}
+
+					if (!window.cancelAnimationFrame) {
+              window.cancelAnimationFrame = (function () {
+                  return window.webkitCancelAnimationFrame ||
+                      window.mozCancelAnimationFrame ||
+                      window.oCancelAnimationFrame ||
+                      window.msCancelAnimationFrame ||
+                      window.clearTimeout;
+              })();
+					}
+      }
+
+      /**
+       * Adds a style block that contains CSS essential for detecting resize events
+       */
+      function insertResizeSensorStyles() {
+					
+      }
+
+      /**
+       *
+       * @param {HTMLElement} element
+       * @param {string} property
+       * @returns {null|string}
+       */
+      function getStyle(element, property) {
+					var value = null;
+
+					if (element.currentStyle) {
+              value = element.currentStyle[property];
+					} else if (window.getComputedStyle) {
+              value = document.defaultView.getComputedStyle(element, null).getPropertyValue(property);
+					}
+
+					return value;
+      }
+
+      return ResizeSensor;
+  }
+}
+window.customElements.define(ResizeAware.is, ResizeAware);
diff --git a/modulizer_out/test/index.html b/modulizer_out/test/index.html
new file mode 100644
index 0000000..2b99a5f
--- /dev/null
+++ b/modulizer_out/test/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script><script src="../../../wct-browser-legacy/browser.js"></script>s (.html, .js):
+      WCT.loadSuites([
+        'resize-aware_test.html'
+      ]);
+    </script>
+
+</body></html>
diff --git a/modulizer_out/test/resize-aware_test.html b/modulizer_out/test/resize-aware_test.html
new file mode 100644
index 0000000..40ef001
--- /dev/null
+++ b/modulizer_out/test/resize-aware_test.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>resize-aware test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>ad>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <resize-aware></resize-aware>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <resize-aware prop1="new-prop1"></resize-aware>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('resize-aware', function() {
+
+        // test('instantiating the element with default properties works', function() {
+        //   var element = fixture('BasicTestFixture');
+        //   assert.equal(element.prop1, 'resize-aware');
+    <script type="module">
+import '../resize-aware.js';
+suite('resize-aware', function() {
+
+  // test('instantiating the element with default properties works', function() {
+  //   var element = fixture('BasicTestFixture');
+  //   assert.equal(element.prop1, 'resize-aware');
+  //   var elementShadowRoot = element.shadowRoot;
+  //   var elementHeader = elementShadowRoot.querySelector('h2');
+  //   assert.equal(elementHeader.innerHTML, 'Hello resize-aware!');
+  // });
+
+  // test('setting a property on the element works', function() {
+  //   // Create a test fixture
+  //   var element = fixture('ChangedPropertyTestFixture');
+  //   assert.equal(element.prop1, 'new-prop1');
+  //   var elementShadowRoot = element.shadowRoot;
+  //   var elementHeader = elementShadowRoot.querySelector('h2');
+  //   assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+  // });
+
+});
+</script>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bdc6723
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "description": "Container element that is aware of and notifies of changes to its size",
+  "keywords": [
+    "polymer",
+    "container",
+    "resize",
+    "ResizeSensor",
+    "sensor",
+    "responsive",
+    "custom-element",
+    "web-components"
+  ],
+  "name": "@polymer/resize-aware",
+  "version": "3.0.0",
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0",
+    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
+  },
+  "main": "resize-aware.js",
+  "license": "MIT",
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0"
+  },
+  "devDependencies": {
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "wct-browser-legacy": "^0.0.1-pre.11",
+    "@webcomponents/webcomponentsjs": "^2.0.0"
+  }
+}
diff --git a/resize-aware.html b/resize-aware.html
deleted file mode 100644
index 1d44848..0000000
--- a/resize-aware.html
+++ /dev/null
@@ -1,552 +0,0 @@
-<link rel="import" href="../polymer/polymer-element.html">
-
-<dom-module id="resize-aware">
-	<template>
-		<style>
-			:host {
-				display: block;
-				margin: 0px;
-				padding: 0px;
-				border: none;
-				position: relative;
-			}
-			
-			#saw {
-				height: 100%;
-				width: 100%;
-				display: inline-block;
-				margin: 0px;
-				padding: 0px;
-				border: none;
-				position: relative;
-			}
-			
-			@keyframes resizeanim {
-				from {
-					opacity: 0;
-				}
-				to {
-					opacity: 0;
-				}
-			}
-			
-			.ResizeSensor__resizeTriggers {
-				animation: 1ms resizeanim;
-				visibility: hidden;
-				opacity: 0;
-			}
-			
-			.ResizeSensor__resizeTriggers,
-			.ResizeSensor__resizeTriggers>div,
-			.ResizeSensor__contractTrigger:before {
-				content: ' ';
-				display: block;
-				position: absolute;
-				top: 0;
-				left: 0;
-				height: 100%;
-				width: 100%;
-				overflow: hidden;
-			}
-			
-			.ResizeSensor__resizeTriggers>div {
-				background: #eee;
-				overflow: auto;
-			}
-			
-			.ResizeSensor__contractTrigger:before {
-				width: 200%;
-				height: 200%;
-			}
-		</style>
-		<div id="saw">
-			<slot></slot>
-			<div id="rsrt" class="ResizeSensor ResizeSensor__resizeTriggers">
-				<div id="rsexpt" class="ResizeSensor__expandTrigger">
-					<div id="rsexptc" style="width: 1px; height: 1px;"></div>
-				</div>
-				<div id="rscntrt" class="ResizeSensor__contractTrigger">
-				</div>
-			</div>
-		</div>
-	</template>
-
-	<script>
-        /**
-        * `resize-aware`
-        *
-        * Container element that is aware of, and notifies of, changes to its size
-        *
-        * Use `resize-aware` in place of a `div` when you need to take some action
-        * if the rendered dimensions of the element change (content change affecting the
-        * size, layout changes, viewport change). `resize-aware` will fire an event when
-        * its dimensions change that includes the new size.
-        * 
-        * Example:
-        * 
-        * ```
-        * <resize-aware on-element-size-changed="handleChange">
-        *  any content that could have been in a div
-        * </resize-aware>
-        * ``` 
-        * 
-        * ```
-        * <resize-aware>
-        *  any content that could have been in a div
-        * </resize-aware>
-        * 
-        * this.$$('resize-aware').addEventListener('element-resize', this.someHandlerName);
-        * ``` 
-        * 
-        * @demo demo/index.html
-        **/
-        class ResizeAware extends Polymer.Element {
-            static get is() {
-                return 'resize-aware';
-            }
-
-            static get properties() {
-                return {
-                    /**
-                     * Current element size in px. { height: width: }
-                     * @type {Object}
-                     */
-                    elementSize: {
-                        type: Object,
-                        notify: true,
-                        readOnly: true,
-                        value: function () {
-                            return {
-                                width: 0,
-                                height: 0
-                            };
-                        }
-                    },
-                    _rsApi: {
-                        type: Object
-                    }
-                }
-            }
-            /**
-			 * Initialize listening for size changes
-			 */
-			ready() {
-                super.ready();
-				this._rsApi = this._resizeSensorApi(this._resizeSensor(this));
-				this._rsApi.create(this.$.saw, [this.$.rsrt, this.$.rsexpt, this.$.rsexptc, this.$.rscntrt], this._handleResize.bind(this));
-            }
-            
-			/**
-			 * Handle resize events
-			 * @param  {[type]} e [description]
-			 * @return {[type]}   [description]
-			 */
-			_handleResize(e) {
-				this.dispatchEvent(new CustomEvent('element-resize', { detail: e }));
-				this._setElementSize({
-					width: e.width,
-					height: e.height
-				});
-            }
-            
-			/**
-			 * The API for resize sensor
-			 *
-			 * Adapted from procurios/ResizeSensor - https://github.com/procurios/ResizeSensor
-			 * in order to work in Polymer and Shadow DOM. This includes removing dynamic generation
-			 * of CSS styles and the sensor divs and moving that into the template markup.
-			 * @param  ResizeSensor ResizeSensor
-			 * @return ResizeSensorApi              public API of ResizeSensor
-			 */
-			_resizeSensorApi(ResizeSensor) {
-				'use strict';
-
-				/** {{}} Map of all resize sensors (id => ResizeSensor) */
-				var allResizeSensors = {};
-
-				/**
-				 * @constructor
-				 */
-				var ResizeSensorApi = function () {};
-
-				/**
-				 * @param {HTMLElement} targetElement
-				 * @param {Function} callback
-				 * @returns {ResizeSensor}
-				 */
-				ResizeSensorApi.prototype.create = function (targetElement, trigElements, callback) {
-					var sensorId = this.getSensorId(targetElement);
-
-					if (allResizeSensors[sensorId]) {
-						return allResizeSensors[sensorId];
-					}
-
-					var Instance = new ResizeSensor(targetElement, trigElements, callback);
-					allResizeSensors[sensorId] = Instance;
-					return Instance;
-				};
-
-				/**
-				 * @param {HTMLElement} targetElement
-				 */
-				ResizeSensorApi.prototype.destroy = function (targetElement) {
-					var sensorId = this.getSensorId(targetElement);
-
-					/** @var ResizeSensor */
-					var Sensor = allResizeSensors[sensorId];
-
-					if (!Sensor) {
-						console && console.error("Can't destroy ResizeSensor (404 not found).", targetElement);
-					}
-
-					Sensor.destroy();
-					delete allResizeSensors[sensorId];
-				};
-
-				/**
-				 * @param {HTMLElement} targetElement
-				 * @returns {string}
-				 */
-				ResizeSensorApi.prototype.getSensorId = function (targetElement) {
-					return targetElement.id;
-				};
-
-				return new ResizeSensorApi();
-			}
-
-			/**
-			 * Resize sensor core function
-			 *
-			 * Adapted with fairly minor changes from
-			 * procurios/ResizeSensor - https://github.com/procurios/ResizeSensor
-			 * in order to work in Polymer and Shadow DOM
-			 *
-			 * @param  HTMLElement rootNode the shadow root of this component
-			 * @return ResizeSensor          core function class
-			 */
-			_resizeSensor(rootNode) {
-				/** ----- Feature tests and polyfills ----- */
-				/** {array} */
-				var unsuitableElements = ['IMG', 'COL', 'TR', 'THEAD', 'TFOOT'];
-				/** {boolean} */
-				var supportsAttachEvent = ('attachEvent' in document);
-
-				if (!supportsAttachEvent) {
-					var browserSupportsCSSAnimations = isCSSAnimationSupported();
-					var animationPropertiesForBrowser = (browserSupportsCSSAnimations) ? getAnimationPropertiesForBrowser() : {};
-					insertResizeSensorStyles();
-
-					if (!('requestAnimationFrame' in window) || !('cancelAnimationFrame' in window)) {
-						polyfillRAF();
-					}
-				}
-
-				/** ----- ResizeSensor ----- */
-
-				/**
-				 * @param {HTMLElement} targetElement
-				 * @param {Function} callback
-				 * @constructor
-				 */
-				var ResizeSensor = function (targetElement, trigElements, callback) {
-					if (isUnsuitableElement(targetElement)) {
-						console && console.error(
-							"Given element isn't suitable to act as a resize sensor. Try wrapping it with one that is. Unsuitable elements are:",
-							unsuitableElements);
-						return;
-					}
-
-					/** @var {HTMLElement} */
-					this.targetElement = targetElement;
-					/** @var {Function} */
-					this.callback = callback;
-					/** @var {{width: int, height: int}} */
-					this.dimensions = {
-						width: 0,
-						height: 0
-					};
-
-					if (supportsAttachEvent) {
-						this.boundOnResizeHandler = this.onElementResize.bind(this);
-						this.targetElement.attachEvent('onresize', this.boundOnResizeHandler);
-						return;
-					}
-
-					/** @var {{container: HTMLElement, expand: HTMLElement, expandChild: HTMLElement, contract: HTMLElement}} */
-					/** trigger elements */
-					this.triggerElements = {};
-					this.triggerElements.container = trigElements[0];
-					this.triggerElements.expand = trigElements[1];
-					this.triggerElements.expandChild = trigElements[2];
-					this.triggerElements.contract = trigElements[3];
-					/** @var {int} */
-					this.resizeRAF = 0;
-
-					this.setup();
-				};
-
-				ResizeSensor.prototype.setup = function () {
-					// Make sure the target element is "positioned"
-					forcePositionedBox(this.targetElement);
-
-					// Create and append resize trigger elements
-					this.insertResizeTriggerElements();
-
-					// Start listening to events
-					this.boundScrollListener = this.handleElementScroll.bind(this);
-					this.targetElement.addEventListener('scroll', this.boundScrollListener, true);
-
-					if (browserSupportsCSSAnimations) {
-						this.boundAnimationStartListener = this.resetTriggersOnAnimationStart.bind(this);
-						this.triggerElements.container.addEventListener(animationPropertiesForBrowser.animationStartEvent, this.boundAnimationStartListener);
-					}
-
-					// Initial value reset of all triggers
-					this.resetTriggers();
-				};
-
-				ResizeSensor.prototype.insertResizeTriggerElements = function () {
-					
-				};
-
-				ResizeSensor.prototype.onElementResize = function () {
-					var currentDimensions = this.getDimensions();
-
-					if (this.isResized(currentDimensions)) {
-						this.dimensions.width = currentDimensions.width;
-						this.dimensions.height = currentDimensions.height;
-						this.elementResized();
-					}
-				};
-
-				ResizeSensor.prototype.handleElementScroll = function () {
-					var _this = this;
-
-					this.resetTriggers();
-
-					if (this.resizeRAF) {
-						window.cancelAnimationFrame(this.resizeRAF);
-					}
-
-					this.resizeRAF = window.requestAnimationFrame(function () {
-						var currentDimensions = _this.getDimensions();
-						if (_this.isResized(currentDimensions)) {
-							_this.dimensions.width = currentDimensions.width;
-							_this.dimensions.height = currentDimensions.height;
-							_this.elementResized();
-						}
-					});
-				};
-
-				/**
-				 * @param {{width: number, height: number}} currentDimensions
-				 * @returns {boolean}
-				 */
-				ResizeSensor.prototype.isResized = function (currentDimensions) {
-					return (currentDimensions.width !== this.dimensions.width || currentDimensions.height !== this.dimensions.height)
-				};
-
-				/**
-				 * @returns {{width: number, height: number}}
-				 */
-				ResizeSensor.prototype.getDimensions = function () {
-					return {
-						width: this.targetElement.offsetWidth,
-						height: this.targetElement.offsetHeight
-					};
-				};
-
-				/**
-				 * @param {Event} event
-				 */
-				ResizeSensor.prototype.resetTriggersOnAnimationStart = function (event) {
-					if (event.animationName === animationPropertiesForBrowser.animationName) {
-						this.resetTriggers();
-					}
-				};
-
-				ResizeSensor.prototype.resetTriggers = function () {
-					this.triggerElements.contract.scrollLeft = this.triggerElements.contract.scrollWidth;
-					this.triggerElements.contract.scrollTop = this.triggerElements.contract.scrollHeight;
-					this.triggerElements.expandChild.style.width = this.triggerElements.expand.offsetWidth + 1 + 'px';
-					this.triggerElements.expandChild.style.height = this.triggerElements.expand.offsetHeight + 1 + 'px';
-					this.triggerElements.expand.scrollLeft = this.triggerElements.expand.scrollWidth;
-					this.triggerElements.expand.scrollTop = this.triggerElements.expand.scrollHeight;
-				};
-
-				ResizeSensor.prototype.elementResized = function () {
-					this.callback(this.dimensions);
-				};
-
-				ResizeSensor.prototype.destroy = function () {
-					this.removeEventListeners();
-					this.targetElement.removeChild(this.triggerElements.container);
-					delete this.boundAnimationStartListener;
-					delete this.boundScrollListener;
-					delete this.callback;
-					delete this.targetElement;
-				};
-
-				ResizeSensor.prototype.removeEventListeners = function () {
-					if (supportsAttachEvent) {
-						this.targetElement.detachEvent('onresize', this.boundOnResizeHandler);
-					}
-
-					this.triggerElements.container.removeEventListener(animationPropertiesForBrowser.animationStartEvent, this.boundAnimationStartListener);
-					this.targetElement.removeEventListener('scroll', this.boundScrollListener, true);
-				};
-
-				/** ----- Various helper functions ----- */
-
-				/**
-				 * An element is said to be positioned if its 'position' property has a value other than 'static'
-				 * @see http://www.w3.org/TR/CSS2/visuren.html#propdef-position
-				 * @param {HTMLElement} element
-				 */
-				function forcePositionedBox(element) {
-					var position = getStyle(element, 'position');
-
-					if (position === 'static') {
-						element.style.position = 'relative';
-					}
-				}
-
-				/**
-				 * @returns {boolean}
-				 */
-				function isCSSAnimationSupported() {
-					var testElement = document.createElement('div');
-					var isAnimationSupported = ('animationName' in testElement.style);
-
-					if (isAnimationSupported) {
-						return true;
-					}
-
-					var browserPrefixes = 'Webkit Moz O ms'.split(' ');
-					var i = 0;
-					var l = browserPrefixes.length;
-
-					for (; i < l; i++) {
-						if ((browserPrefixes[i] + 'AnimationName') in testElement.style) {
-							return true;
-						}
-					}
-
-					return false;
-				}
-
-				/**
-				 * @param {HTMLElement} targetElement
-				 * @returns {boolean}
-				 */
-				function isUnsuitableElement(targetElement) {
-					var tagName = targetElement.tagName.toUpperCase();
-					return (unsuitableElements.indexOf(tagName) > -1);
-				}
-
-				/**
-				 * Determines which style convention (properties) to follow
-				 * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support
-				 * @returns {{keyframesRule: string, styleDeclaration: string, animationStartEvent: string, animationName: string}}
-				 */
-				function getAnimationPropertiesForBrowser() {
-					var testElement = document.createElement('div');
-					var supportsUnprefixedAnimationProperties = ('animationName' in testElement.style);
-
-					// Unprefixed animation properties
-					var animationStartEvent = 'animationstart';
-					var animationName = 'resizeanim';
-
-					if (supportsUnprefixedAnimationProperties) {
-						return {
-							keyframesRule: '@keyframes ' + animationName + ' {from { opacity: 0; } to { opacity: 0; }}',
-							styleDeclaration: 'animation: 1ms ' + animationName + ';',
-							animationStartEvent: animationStartEvent,
-							animationName: animationName
-						};
-					}
-
-					// Browser specific animation properties
-					var keyframePrefix = '';
-					var browserPrefixes = 'Webkit Moz O ms'.split(' ');
-					var startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
-
-					var i;
-					var l = browserPrefixes.length;
-
-					for (i = 0; i < l; i++) {
-						if ((browserPrefixes[i] + 'AnimationName') in testElement.style) {
-							keyframePrefix = '-' + browserPrefixes[i].toLowerCase() + '-';
-							animationStartEvent = startEvents[i];
-							break;
-						}
-					}
-
-					return {
-						keyframesRule: '@' + keyframePrefix + 'keyframes ' + animationName +
-							' {from { opacity: 0; } to { opacity: 0; }}',
-						styleDeclaration: keyframePrefix + 'animation: 1ms ' + animationName + ';',
-						animationStartEvent: animationStartEvent,
-						animationName: animationName
-					};
-				}
-
-				/**
-				 * Provides requestAnimationFrame in a cross browser way
-				 * @see https://gist.github.com/mrdoob/838785
-				 */
-				function polyfillRAF() {
-					if (!window.requestAnimationFrame) {
-						window.requestAnimationFrame = (function () {
-							return window.webkitRequestAnimationFrame ||
-								window.mozRequestAnimationFrame ||
-								window.oRequestAnimationFrame ||
-								window.msRequestAnimationFrame ||
-								function (callback) {
-									window.setTimeout(callback, 1000 / 60);
-								};
-						})();
-					}
-
-					if (!window.cancelAnimationFrame) {
-						window.cancelAnimationFrame = (function () {
-							return window.webkitCancelAnimationFrame ||
-								window.mozCancelAnimationFrame ||
-								window.oCancelAnimationFrame ||
-								window.msCancelAnimationFrame ||
-								window.clearTimeout;
-						})();
-					}
-				}
-
-				/**
-				 * Adds a style block that contains CSS essential for detecting resize events
-				 */
-				function insertResizeSensorStyles() {
-					
-				}
-
-				/**
-				 *
-				 * @param {HTMLElement} element
-				 * @param {string} property
-				 * @returns {null|string}
-				 */
-				function getStyle(element, property) {
-					var value = null;
-
-					if (element.currentStyle) {
-						value = element.currentStyle[property];
-					} else if (window.getComputedStyle) {
-						value = document.defaultView.getComputedStyle(element, null).getPropertyValue(property);
-					}
-
-					return value;
-				}
-
-				return ResizeSensor;
-			}
-        }
-        window.customElements.define(ResizeAware.is, ResizeAware);
-	</script>
-</dom-module>
\ No newline at end of file
diff --git a/resize-aware.js b/resize-aware.js
new file mode 100644
index 0000000..f5bded1
--- /dev/null
+++ b/resize-aware.js
@@ -0,0 +1,550 @@
+import { PolymerElement } from '../../@polymer/polymer/polymer-element.js';
+import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
+/**
+* `resize-aware`
+*
+* Container element that is aware of, and notifies of, changes to its size
+*
+* Use `resize-aware` in place of a `div` when you need to take some action
+* if the rendered dimensions of the element change (content change affecting the
+* size, layout changes, viewport change). `resize-aware` will fire an event when
+* its dimensions change that includes the new size.
+* 
+* Example:
+* 
+* ```
+* <resize-aware on-element-size-changed="handleChange">
+*  any content that could have been in a div
+* </resize-aware>
+* ``` 
+* 
+* ```
+* <resize-aware>
+*  any content that could have been in a div
+* </resize-aware>
+* 
+* this.$$('resize-aware').addEventListener('element-resize', this.someHandlerName);
+* ``` 
+* 
+* @demo demo/index.html
+**/
+class ResizeAware extends PolymerElement {
+  static get template() {
+    return html`
+		<style>
+			:host {
+				display: block;
+				margin: 0px;
+				padding: 0px;
+				border: none;
+				position: relative;
+			}
+			
+			#saw {
+				height: 100%;
+				width: 100%;
+				display: inline-block;
+				margin: 0px;
+				padding: 0px;
+				border: none;
+				position: relative;
+			}
+			
+			@keyframes resizeanim {
+				from {
+					opacity: 0;
+				}
+				to {
+					opacity: 0;
+				}
+			}
+			
+			.ResizeSensor__resizeTriggers {
+				animation: 1ms resizeanim;
+				visibility: hidden;
+				opacity: 0;
+			}
+			
+			.ResizeSensor__resizeTriggers,
+			.ResizeSensor__resizeTriggers>div,
+			.ResizeSensor__contractTrigger:before {
+				content: ' ';
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				width: 100%;
+				overflow: hidden;
+			}
+			
+			.ResizeSensor__resizeTriggers>div {
+				background: #eee;
+				overflow: auto;
+			}
+			
+			.ResizeSensor__contractTrigger:before {
+				width: 200%;
+				height: 200%;
+			}
+		</style>
+		<div id="saw">
+			<slot></slot>
+			<div id="rsrt" class="ResizeSensor ResizeSensor__resizeTriggers">
+				<div id="rsexpt" class="ResizeSensor__expandTrigger">
+					<div id="rsexptc" style="width: 1px; height: 1px;"></div>
+				</div>
+				<div id="rscntrt" class="ResizeSensor__contractTrigger">
+				</div>
+			</div>
+		</div>
+`;
+  }
+
+  static get is() {
+      return 'resize-aware';
+  }
+
+  static get properties() {
+      return {
+          /**
+           * Current element size in px. { height: width: }
+           * @type {Object}
+           */
+          elementSize: {
+              type: Object,
+              notify: true,
+              readOnly: true,
+              value: function () {
+                  return {
+                      width: 0,
+                      height: 0
+                  };
+              }
+          },
+          _rsApi: {
+              type: Object
+          }
+      }
+  }
+  /**
+   * Initialize listening for size changes
+   */
+  ready() {
+      super.ready();
+      this._rsApi = this._resizeSensorApi(this._resizeSensor(this));
+      this._rsApi.create(this.$.saw, [this.$.rsrt, this.$.rsexpt, this.$.rsexptc, this.$.rscntrt], this._handleResize.bind(this));
+  }
+
+  /**
+   * Handle resize events
+   * @param  {[type]} e [description]
+   * @return {[type]}   [description]
+   */
+  _handleResize(e) {
+      this.dispatchEvent(new CustomEvent('element-resize', { detail: e }));
+      this._setElementSize({
+					width: e.width,
+					height: e.height
+      });
+  }
+
+  /**
+   * The API for resize sensor
+   *
+   * Adapted from procurios/ResizeSensor - https://github.com/procurios/ResizeSensor
+   * in order to work in Polymer and Shadow DOM. This includes removing dynamic generation
+   * of CSS styles and the sensor divs and moving that into the template markup.
+   * @param  ResizeSensor ResizeSensor
+   * @return ResizeSensorApi              public API of ResizeSensor
+   */
+  _resizeSensorApi(ResizeSensor) {
+      'use strict';
+
+      /** {{}} Map of all resize sensors (id => ResizeSensor) */
+      var allResizeSensors = {};
+
+      /**
+       * @constructor
+       */
+      var ResizeSensorApi = function () {};
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @param {Function} callback
+       * @returns {ResizeSensor}
+       */
+      ResizeSensorApi.prototype.create = function (targetElement, trigElements, callback) {
+					var sensorId = this.getSensorId(targetElement);
+
+					if (allResizeSensors[sensorId]) {
+              return allResizeSensors[sensorId];
+					}
+
+					var Instance = new ResizeSensor(targetElement, trigElements, callback);
+					allResizeSensors[sensorId] = Instance;
+					return Instance;
+      };
+
+      /**
+       * @param {HTMLElement} targetElement
+       */
+      ResizeSensorApi.prototype.destroy = function (targetElement) {
+					var sensorId = this.getSensorId(targetElement);
+
+					/** @var ResizeSensor */
+					var Sensor = allResizeSensors[sensorId];
+
+					if (!Sensor) {
+              console && console.error("Can't destroy ResizeSensor (404 not found).", targetElement);
+					}
+
+					Sensor.destroy();
+					delete allResizeSensors[sensorId];
+      };
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @returns {string}
+       */
+      ResizeSensorApi.prototype.getSensorId = function (targetElement) {
+					return targetElement.id;
+      };
+
+      return new ResizeSensorApi();
+  }
+
+  /**
+   * Resize sensor core function
+   *
+   * Adapted with fairly minor changes from
+   * procurios/ResizeSensor - https://github.com/procurios/ResizeSensor
+   * in order to work in Polymer and Shadow DOM
+   *
+   * @param  HTMLElement rootNode the shadow root of this component
+   * @return ResizeSensor          core function class
+   */
+  _resizeSensor(rootNode) {
+      /** ----- Feature tests and polyfills ----- */
+      /** {array} */
+      var unsuitableElements = ['IMG', 'COL', 'TR', 'THEAD', 'TFOOT'];
+      /** {boolean} */
+      var supportsAttachEvent = ('attachEvent' in document);
+
+      if (!supportsAttachEvent) {
+					var browserSupportsCSSAnimations = isCSSAnimationSupported();
+					var animationPropertiesForBrowser = (browserSupportsCSSAnimations) ? getAnimationPropertiesForBrowser() : {};
+					insertResizeSensorStyles();
+
+					if (!('requestAnimationFrame' in window) || !('cancelAnimationFrame' in window)) {
+              polyfillRAF();
+					}
+      }
+
+      /** ----- ResizeSensor ----- */
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @param {Function} callback
+       * @constructor
+       */
+      var ResizeSensor = function (targetElement, trigElements, callback) {
+					if (isUnsuitableElement(targetElement)) {
+              console && console.error(
+                  "Given element isn't suitable to act as a resize sensor. Try wrapping it with one that is. Unsuitable elements are:",
+                  unsuitableElements);
+              return;
+					}
+
+					/** @var {HTMLElement} */
+					this.targetElement = targetElement;
+					/** @var {Function} */
+					this.callback = callback;
+					/** @var {{width: int, height: int}} */
+					this.dimensions = {
+              width: 0,
+              height: 0
+					};
+
+					if (supportsAttachEvent) {
+              this.boundOnResizeHandler = this.onElementResize.bind(this);
+              this.targetElement.attachEvent('onresize', this.boundOnResizeHandler);
+              return;
+					}
+
+					/** @var {{container: HTMLElement, expand: HTMLElement, expandChild: HTMLElement, contract: HTMLElement}} */
+					/** trigger elements */
+					this.triggerElements = {};
+					this.triggerElements.container = trigElements[0];
+					this.triggerElements.expand = trigElements[1];
+					this.triggerElements.expandChild = trigElements[2];
+					this.triggerElements.contract = trigElements[3];
+					/** @var {int} */
+					this.resizeRAF = 0;
+
+					this.setup();
+      };
+
+      ResizeSensor.prototype.setup = function () {
+					// Make sure the target element is "positioned"
+					forcePositionedBox(this.targetElement);
+
+					// Create and append resize trigger elements
+					this.insertResizeTriggerElements();
+
+					// Start listening to events
+					this.boundScrollListener = this.handleElementScroll.bind(this);
+					this.targetElement.addEventListener('scroll', this.boundScrollListener, true);
+
+					if (browserSupportsCSSAnimations) {
+              this.boundAnimationStartListener = this.resetTriggersOnAnimationStart.bind(this);
+              this.triggerElements.container.addEventListener(animationPropertiesForBrowser.animationStartEvent, this.boundAnimationStartListener);
+					}
+
+					// Initial value reset of all triggers
+					this.resetTriggers();
+      };
+
+      ResizeSensor.prototype.insertResizeTriggerElements = function () {
+					
+      };
+
+      ResizeSensor.prototype.onElementResize = function () {
+					var currentDimensions = this.getDimensions();
+
+					if (this.isResized(currentDimensions)) {
+              this.dimensions.width = currentDimensions.width;
+              this.dimensions.height = currentDimensions.height;
+              this.elementResized();
+					}
+      };
+
+      ResizeSensor.prototype.handleElementScroll = function () {
+					var _this = this;
+
+					this.resetTriggers();
+
+					if (this.resizeRAF) {
+              window.cancelAnimationFrame(this.resizeRAF);
+					}
+
+					this.resizeRAF = window.requestAnimationFrame(function () {
+              var currentDimensions = _this.getDimensions();
+              if (_this.isResized(currentDimensions)) {
+                  _this.dimensions.width = currentDimensions.width;
+                  _this.dimensions.height = currentDimensions.height;
+                  _this.elementResized();
+              }
+					});
+      };
+
+      /**
+       * @param {{width: number, height: number}} currentDimensions
+       * @returns {boolean}
+       */
+      ResizeSensor.prototype.isResized = function (currentDimensions) {
+					return (currentDimensions.width !== this.dimensions.width || currentDimensions.height !== this.dimensions.height)
+      };
+
+      /**
+       * @returns {{width: number, height: number}}
+       */
+      ResizeSensor.prototype.getDimensions = function () {
+					return {
+              width: this.targetElement.offsetWidth,
+              height: this.targetElement.offsetHeight
+					};
+      };
+
+      /**
+       * @param {Event} event
+       */
+      ResizeSensor.prototype.resetTriggersOnAnimationStart = function (event) {
+					if (event.animationName === animationPropertiesForBrowser.animationName) {
+              this.resetTriggers();
+					}
+      };
+
+      ResizeSensor.prototype.resetTriggers = function () {
+					this.triggerElements.contract.scrollLeft = this.triggerElements.contract.scrollWidth;
+					this.triggerElements.contract.scrollTop = this.triggerElements.contract.scrollHeight;
+					this.triggerElements.expandChild.style.width = this.triggerElements.expand.offsetWidth + 1 + 'px';
+					this.triggerElements.expandChild.style.height = this.triggerElements.expand.offsetHeight + 1 + 'px';
+					this.triggerElements.expand.scrollLeft = this.triggerElements.expand.scrollWidth;
+					this.triggerElements.expand.scrollTop = this.triggerElements.expand.scrollHeight;
+      };
+
+      ResizeSensor.prototype.elementResized = function () {
+					this.callback(this.dimensions);
+      };
+
+      ResizeSensor.prototype.destroy = function () {
+					this.removeEventListeners();
+					this.targetElement.removeChild(this.triggerElements.container);
+					delete this.boundAnimationStartListener;
+					delete this.boundScrollListener;
+					delete this.callback;
+					delete this.targetElement;
+      };
+
+      ResizeSensor.prototype.removeEventListeners = function () {
+					if (supportsAttachEvent) {
+              this.targetElement.detachEvent('onresize', this.boundOnResizeHandler);
+					}
+
+					this.triggerElements.container.removeEventListener(animationPropertiesForBrowser.animationStartEvent, this.boundAnimationStartListener);
+					this.targetElement.removeEventListener('scroll', this.boundScrollListener, true);
+      };
+
+      /** ----- Various helper functions ----- */
+
+      /**
+       * An element is said to be positioned if its 'position' property has a value other than 'static'
+       * @see http://www.w3.org/TR/CSS2/visuren.html#propdef-position
+       * @param {HTMLElement} element
+       */
+      function forcePositionedBox(element) {
+					var position = getStyle(element, 'position');
+
+					if (position === 'static') {
+              element.style.position = 'relative';
+					}
+      }
+
+      /**
+       * @returns {boolean}
+       */
+      function isCSSAnimationSupported() {
+					var testElement = document.createElement('div');
+					var isAnimationSupported = ('animationName' in testElement.style);
+
+					if (isAnimationSupported) {
+              return true;
+					}
+
+					var browserPrefixes = 'Webkit Moz O ms'.split(' ');
+					var i = 0;
+					var l = browserPrefixes.length;
+
+					for (; i < l; i++) {
+              if ((browserPrefixes[i] + 'AnimationName') in testElement.style) {
+                  return true;
+              }
+					}
+
+					return false;
+      }
+
+      /**
+       * @param {HTMLElement} targetElement
+       * @returns {boolean}
+       */
+      function isUnsuitableElement(targetElement) {
+					var tagName = targetElement.tagName.toUpperCase();
+					return (unsuitableElements.indexOf(tagName) > -1);
+      }
+
+      /**
+       * Determines which style convention (properties) to follow
+       * @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support
+       * @returns {{keyframesRule: string, styleDeclaration: string, animationStartEvent: string, animationName: string}}
+       */
+      function getAnimationPropertiesForBrowser() {
+					var testElement = document.createElement('div');
+					var supportsUnprefixedAnimationProperties = ('animationName' in testElement.style);
+
+					// Unprefixed animation properties
+					var animationStartEvent = 'animationstart';
+					var animationName = 'resizeanim';
+
+					if (supportsUnprefixedAnimationProperties) {
+              return {
+                  keyframesRule: '@keyframes ' + animationName + ' {from { opacity: 0; } to { opacity: 0; }}',
+                  styleDeclaration: 'animation: 1ms ' + animationName + ';',
+                  animationStartEvent: animationStartEvent,
+                  animationName: animationName
+              };
+					}
+
+					// Browser specific animation properties
+					var keyframePrefix = '';
+					var browserPrefixes = 'Webkit Moz O ms'.split(' ');
+					var startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
+
+					var i;
+					var l = browserPrefixes.length;
+
+					for (i = 0; i < l; i++) {
+              if ((browserPrefixes[i] + 'AnimationName') in testElement.style) {
+                  keyframePrefix = '-' + browserPrefixes[i].toLowerCase() + '-';
+                  animationStartEvent = startEvents[i];
+                  break;
+              }
+					}
+
+					return {
+              keyframesRule: '@' + keyframePrefix + 'keyframes ' + animationName +
+                  ' {from { opacity: 0; } to { opacity: 0; }}',
+              styleDeclaration: keyframePrefix + 'animation: 1ms ' + animationName + ';',
+              animationStartEvent: animationStartEvent,
+              animationName: animationName
+					};
+      }
+
+      /**
+       * Provides requestAnimationFrame in a cross browser way
+       * @see https://gist.github.com/mrdoob/838785
+       */
+      function polyfillRAF() {
+					if (!window.requestAnimationFrame) {
+              window.requestAnimationFrame = (function () {
+                  return window.webkitRequestAnimationFrame ||
+                      window.mozRequestAnimationFrame ||
+                      window.oRequestAnimationFrame ||
+                      window.msRequestAnimationFrame ||
+                      function (callback) {
+                          window.setTimeout(callback, 1000 / 60);
+                      };
+              })();
+					}
+
+					if (!window.cancelAnimationFrame) {
+              window.cancelAnimationFrame = (function () {
+                  return window.webkitCancelAnimationFrame ||
+                      window.mozCancelAnimationFrame ||
+                      window.oCancelAnimationFrame ||
+                      window.msCancelAnimationFrame ||
+                      window.clearTimeout;
+              })();
+					}
+      }
+
+      /**
+       * Adds a style block that contains CSS essential for detecting resize events
+       */
+      function insertResizeSensorStyles() {
+					
+      }
+
+      /**
+       *
+       * @param {HTMLElement} element
+       * @param {string} property
+       * @returns {null|string}
+       */
+      function getStyle(element, property) {
+					var value = null;
+
+					if (element.currentStyle) {
+              value = element.currentStyle[property];
+					} else if (window.getComputedStyle) {
+              value = document.defaultView.getComputedStyle(element, null).getPropertyValue(property);
+					}
+
+					return value;
+      }
+
+      return ResizeSensor;
+  }
+}
+window.customElements.define(ResizeAware.is, ResizeAware);
diff --git a/test/index.html b/test/index.html
index 44869aa..2b99a5f 100644
--- a/test/index.html
+++ b/test/index.html
@@ -5,11 +5,7 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
-  </head>
-  <body>
-    <script>
-      // Load and run all tests (.html, .js):
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script><script src="../../../wct-browser-legacy/browser.js"></script>s (.html, .js):
       WCT.loadSuites([
         'resize-aware_test.html'
       ]);
diff --git a/test/resize-aware_test.html b/test/resize-aware_test.html
index c4deee1..40ef001 100644
--- a/test/resize-aware_test.html
+++ b/test/resize-aware_test.html
@@ -9,8 +9,7 @@
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
 
-    <link rel="import" href="../resize-aware.html">
-  </head>
+  <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>ad>
   <body>
 
     <test-fixture id="BasicTestFixture">
@@ -31,22 +30,26 @@
         // test('instantiating the element with default properties works', function() {
         //   var element = fixture('BasicTestFixture');
         //   assert.equal(element.prop1, 'resize-aware');
-        //   var elementShadowRoot = element.shadowRoot;
-        //   var elementHeader = elementShadowRoot.querySelector('h2');
-        //   assert.equal(elementHeader.innerHTML, 'Hello resize-aware!');
-        // });
-
-        // test('setting a property on the element works', function() {
-        //   // Create a test fixture
-        //   var element = fixture('ChangedPropertyTestFixture');
-        //   assert.equal(element.prop1, 'new-prop1');
-        //   var elementShadowRoot = element.shadowRoot;
-        //   var elementHeader = elementShadowRoot.querySelector('h2');
-        //   assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
-        // });
-
-      });
-    </script>
-
-  </body>
-</html>
+    <script type="module">
+import '../resize-aware.js';
+suite('resize-aware', function() {
+
+  // test('instantiating the element with default properties works', function() {
+  //   var element = fixture('BasicTestFixture');
+  //   assert.equal(element.prop1, 'resize-aware');
+  //   var elementShadowRoot = element.shadowRoot;
+  //   var elementHeader = elementShadowRoot.querySelector('h2');
+  //   assert.equal(elementHeader.innerHTML, 'Hello resize-aware!');
+  // });
+
+  // test('setting a property on the element works', function() {
+  //   // Create a test fixture
+  //   var element = fixture('ChangedPropertyTestFixture');
+  //   assert.equal(element.prop1, 'new-prop1');
+  //   var elementShadowRoot = element.shadowRoot;
+  //   var elementHeader = elementShadowRoot.querySelector('h2');
+  //   assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+  // });
+
+});
+</script>
\ No newline at end of file

From c7f610de879add187f05bda2bd62bce02cd19922 Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Fri, 1 Jun 2018 10:14:57 +0200
Subject: [PATCH 03/10] Update name, so it's a non-private npm package

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bdc6723..fad12fa 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "custom-element",
     "web-components"
   ],
-  "name": "@polymer/resize-aware",
+  "name": "dr-niels-resize-aware",
   "version": "3.0.0",
   "resolutions": {
     "inherits": "2.0.3",

From 9f86c51cdafcb735a9a6f1edf3eca30c652791f5 Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Fri, 1 Jun 2018 10:15:11 +0200
Subject: [PATCH 04/10] Import elements properly

---
 resize-aware.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resize-aware.js b/resize-aware.js
index f5bded1..e6df50f 100644
--- a/resize-aware.js
+++ b/resize-aware.js
@@ -1,5 +1,5 @@
-import { PolymerElement } from '../../@polymer/polymer/polymer-element.js';
-import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
 * `resize-aware`
 *

From eb1fc2f41b73699c60bd26fa0f73e45da898ca96 Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Fri, 1 Jun 2018 10:19:57 +0200
Subject: [PATCH 05/10] 3.0.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fad12fa..db24f31 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "web-components"
   ],
   "name": "dr-niels-resize-aware",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "resolutions": {
     "inherits": "2.0.3",
     "samsam": "1.1.3",

From 9b0a1c87764c8471e8c58999cd9bf6befa30a8af Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Mon, 24 Sep 2018 14:13:20 +0200
Subject: [PATCH 06/10] Remove inline-block styling as it may increase the size
 of the container

---
 resize-aware.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resize-aware.js b/resize-aware.js
index e6df50f..e44017a 100644
--- a/resize-aware.js
+++ b/resize-aware.js
@@ -43,7 +43,6 @@ class ResizeAware extends PolymerElement {
 			#saw {
 				height: 100%;
 				width: 100%;
-				display: inline-block;
 				margin: 0px;
 				padding: 0px;
 				border: none;

From 4a73a8f9bfa62f6368806a48e4770ec3004e9914 Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Mon, 24 Sep 2018 14:17:37 +0200
Subject: [PATCH 07/10] Proper links for demo

---
 demo/index.html | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 3b35e6a..0ba621b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -6,10 +6,8 @@
 
     <title>resize-aware demo</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>-pages-shared-styles.js"></script>
-    <script type="module" src="../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
+    <script src="@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>-pages-shared-styles.js"></script>
+    <script type="module" src="@polymer/iron-demo-helpers/demo-snippet.js"></script>
     <script type="module" src="../resize-aware.js"></script>
 
     <custom-style>

From 2f649f8a4689cfe6fd49ed23318d6f666c0d8842 Mon Sep 17 00:00:00 2001
From: Niels Thole <niels.thole@gmail.com>
Date: Mon, 24 Sep 2018 14:18:05 +0200
Subject: [PATCH 08/10] 3.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index db24f31..a2adc57 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "web-components"
   ],
   "name": "dr-niels-resize-aware",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "resolutions": {
     "inherits": "2.0.3",
     "samsam": "1.1.3",

From cecaab599915ffc5ce916b7c093f0fe36ce2a232 Mon Sep 17 00:00:00 2001
From: DrNiels <nt@symcon.de>
Date: Fri, 24 Apr 2020 15:36:40 +0200
Subject: [PATCH 09/10] Remove style that does not seem to be relevant and
 causes problems in Safari

---
 resize-aware.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resize-aware.js b/resize-aware.js
index e44017a..562b873 100644
--- a/resize-aware.js
+++ b/resize-aware.js
@@ -79,7 +79,6 @@ class ResizeAware extends PolymerElement {
 			
 			.ResizeSensor__resizeTriggers>div {
 				background: #eee;
-				overflow: auto;
 			}
 			
 			.ResizeSensor__contractTrigger:before {

From 0e5898ef44d2ac799b2d37114344cc5c45764d5e Mon Sep 17 00:00:00 2001
From: DrNiels <nt@symcon.de>
Date: Fri, 24 Apr 2020 15:37:41 +0200
Subject: [PATCH 10/10] 3.0.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a2adc57..2acc248 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "web-components"
   ],
   "name": "dr-niels-resize-aware",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "resolutions": {
     "inherits": "2.0.3",
     "samsam": "1.1.3",