@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
57 lines (45 loc) • 1.64 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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../lib/mixins/property-accessors.html">
</head>
<body>
<script>
// Apply mixins to base class
class MyElement extends Polymer.PropertyAccessors(HTMLElement) {
// Declare observed attributes
static get observedAttributes() { return ['foo', 'bar']; }
// Enable accessors and flush any queued property changes
connectedCallback() {
this._enableProperties();
}
// React to changes
_propertiesChanged(currentProps, changedProps, oldProps) {
for (let p in changedProps) {
this.innerHTML += `${p}: ${changedProps[p]}<br>`;
}
}
}
// Generate property accessors for all observed attributes
MyElement.createPropertiesForAttributes();
// Register element
customElements.define('my-element', MyElement);
</script>
<my-element foo="5" bar="10"></my-element>
<script>
document.querySelector('my-element').foo = 20;
</script>
</body>
</html>