@polymer/polymer
Version:
The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to
70 lines (64 loc) • 1.84 kB
HTML
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
</head>
<body>
<dom-module id="x-host">
<template>
<h1>1 + [[foo]] = [[bar]]</h1>
<x-child id="child" foo="[[foo]]" bar="{{bar}}"></x-child>
</template>
<script>
class XHost extends Polymer.Element {
static get config() {
return {
properties: {
obj: {
observer: 'objChanged'
}
}
}
}
objChanged(val, old) {
console.log('new', val, 'old', old);
}
_shouldPropertyChange(prop, val, old) {
if (this.strict) {
return val !== old;
} else if (val instanceof Date) {
return !(old instanceof Date) || val.getTime() !== old.getTime();
} else {
return super._shouldPropertyChange(prop, val, old);
}
}
}
customElements.define('x-host', XHost);
</script>
</dom-module>
<x-host id="host"></x-host>
<script>
var obj = {foo: true};
host.obj = obj;
host.obj = obj;
console.log('strict on')
host.strict = true;
host.obj = obj;
console.log('strict off')
host.strict = false;
host.obj = obj;
host.obj = new Date();
host.obj = new Date(host.obj.getTime());
</script>
</body>
</html>