@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
94 lines (77 loc) • 2.59 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">
<link rel="import" href="../../lib/mixins/template-stamp.html">
</head>
<body>
<template id="my-element-template">
<style>
:host {
display: block;
}
#counter {
padding: 10px;
background: lightblue;
}
</style>
<!-- can use declarative event listeners -->
<button on-click="handleIncrement">Increment!</button>
<span id="counter"></span>
</template>
<script>
// Apply mixins to base class
let MyBaseClass =
Polymer.TemplateStamp(
Polymer.PropertyAccessors(
HTMLElement));
class MyElement extends MyBaseClass {
// Declare observed attributes
static get observedAttributes() { return ['counter', 'limit']; }
constructor() {
super();
this.counter = 0;
this.limit = Infinity;
}
// Enable accessors and flush any queued property changes
connectedCallback() {
this._enableProperties();
}
// Called once by PropertyAccessors during first property flush
// Do one-time work like setting up Shadow DOM
ready() {
let template = document.getElementById('my-element-template');
this.dom = this._stampTemplate(template);
this.attachShadow({mode: 'open'}).appendChild(this.dom);
super.ready();
}
// React to changes
_propertiesChanged(currentProps, changedProps, oldProps) {
// Can use this.$ to access id'ed nodes in template
this.dom.$.counter.textContent =
Math.min(currentProps.counter, currentProps.limit);
}
handleIncrement() {
this.counter++;
}
}
// Generate property accessors for all observed attributes
MyElement.createPropertiesForAttributes();
// Register element
customElements.define('my-element', MyElement);
</script>
<my-element counter="10" limit="20"></my-element>
</body>
</html>