@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
97 lines (82 loc) • 2.19 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-test">
<template>
<div>behavior says: {{behaviorProp}}</div>
<div>element says: {{prop}}</div>
</template>
</dom-module>
<script>
/** @polymerBehavior */
var MyBehavior = {
properties: {
behaviorProp: {
value: 'prop from behavior!',
observer: '_propChanged'
}
},
_propChanged: function(value) {
console.log(this.localName, '_propChanged', value);
},
ready: function() {
console.log(this.localName, 'MyBehavior.ready');
}
}
/** @polymerBehavior */
var MyBehavior2 = {
ready: function() {
console.log(this.localName, 'MyBehavior2.ready');
}
}
Polymer({
is: 'x-test',
behaviors: [MyBehavior],
properties: {
prop: {
value: 'prop from x-test'
}
},
ready: function() {
console.log(this.localName, 'x-test.ready');
}
});
// ***********
var XTest = customElements.get('x-test');
class XClass extends Polymer.mixinBehaviors([MyBehavior, MyBehavior2], XTest) {
static get is() { return 'x-class'}
static get template() {
return Polymer.DomModule.import('x-test', 'template');
}
static get config() {
return {
properties: {
prop: {
value: 'prop from x-class'
}
}
}
}
ready() {
super.ready();
console.log('x-class ready');
}
}
customElements.define(XClass.is, XClass);
</script>
<x-class></x-class>
</body>
</html>