mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
86 lines
2.3 KiB
HTML
86 lines
2.3 KiB
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
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
|
<script type="module" src="../../lib/mixins/property-effects.js"></script>
|
|
</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">[[limited]]</span>
|
|
</template>
|
|
|
|
<script type="module">
|
|
import { PropertyEffects } from '../../lib/mixins/property-effects.js';
|
|
|
|
let template = document.getElementById('my-element-template');
|
|
|
|
class MyElement extends PropertyEffects(HTMLElement) {
|
|
|
|
// 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() {
|
|
this.dom = this._stampTemplate(template);
|
|
this.attachShadow({mode: 'open'}).appendChild(this.dom);
|
|
super.ready();
|
|
}
|
|
|
|
computeLimited(counter, limit) {
|
|
return Math.min(counter, limit);
|
|
}
|
|
|
|
handleIncrement() {
|
|
this.counter++;
|
|
}
|
|
|
|
}
|
|
|
|
// Generate property accessors for all observed attributes
|
|
MyElement.createComputedProperty('limited', 'computeLimited(counter, limit)');
|
|
MyElement.bindTemplate(template);
|
|
|
|
// Register element
|
|
customElements.define('my-element', MyElement);
|
|
</script>
|
|
|
|
|
|
<my-element counter="10" limit="20"></my-element>
|
|
|
|
</body>
|
|
</html> |