mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
95 lines
2.6 KiB
HTML
95 lines
2.6 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-accessors.js"></script>
|
|
<script type="module" src="../../lib/mixins/template-stamp.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"></span>
|
|
</template>
|
|
|
|
<script type="module">
|
|
import { PropertyAccessors } from '../../lib/mixins/property-accessors.js';
|
|
import { TemplateStamp } from '../../lib/mixins/template-stamp.js';
|
|
|
|
// Apply mixins to base class
|
|
let MyBaseClass =
|
|
TemplateStamp(
|
|
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> |