@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
138 lines (133 loc) • 4.41 kB
HTML
<!--
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="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
</head>
<body>
<script>
class XA extends Polymer.Element {
static get template() {
return `<x-b prop="[[prop]]"></x-b>`;
}
static get observers() { return ['propChanged(prop)']}
propChanged() {
console.log(this.localName, 'propChanged', this.shadowRoot);
}
constructor() {
console.log('x-a', 'constructed');
super();
this.childList = [];
this.addEventListener('child-is-here', e => {
let target = e.composedPath()[0];
if (target !== this) {
this.childList.push(target);
}
});
this.prop = 'prop';
}
connectedCallback() {
console.group(this.localName, 'connected');
console.warn(this.localName, 'connected (user)', this.shadowRoot);
super.connectedCallback();
console.groupEnd(this.localName, 'connected');
}
_flushProperties() {
console.log(this.localName, 'flush');
super._flushProperties();
}
ready() {
console.group(this.localName, 'ready');
super.ready();
console.warn(this.localName, 'ready (user)', this.shadowRoot);
console.log(this.localName, 'childList', this.childList);
console.groupEnd(this.localName, 'ready');
}
}
customElements.define('x-a', XA);
class XB extends Polymer.Element {
static get template() {
return `<x-c prop="[[prop]]"></x-c>`;
}
static get observers() { return ['propChanged(prop)']}
propChanged() {
console.log(this.localName, 'propChanged', this.shadowRoot);
}
constructor() {
console.log('x-b', 'constructed');
super();
this.childList = [];
this.addEventListener('child-is-here', e => {
let target = e.composedPath()[0];
if (target !== this) {
this.childList.push(target);
}
});
}
connectedCallback() {
console.group(this.localName, 'connected');
console.warn(this.localName, 'connected (user)', this.shadowRoot);
super.connectedCallback();
console.groupEnd(this.localName, 'connected');
}
_flushProperties() {
console.log(this.localName, 'flush');
super._flushProperties();
}
ready() {
console.group(this.localName, 'ready');
this.dispatchEvent(new CustomEvent('child-is-here', {bubbles: true, composed: true}));
super.ready();
console.warn(this.localName, 'ready (user)', this.shadowRoot);
console.log(this.localName, 'childList', this.childList);
console.groupEnd(this.localName, 'ready');
}
}
customElements.define('x-b', XB);
class XC extends Polymer.Element {
static get template() {
return `<div></div>`;
}
static get observers() { return ['propChanged(prop)']}
propChanged() {
console.log(this.localName, 'propChanged', this.shadowRoot);
}
constructor() {
console.log('x-c', 'constructed');
super();
this.childList = [];
}
connectedCallback() {
console.group(this.localName, 'connected');
console.warn(this.localName, 'connected (user)', this.shadowRoot);
super.connectedCallback();
console.groupEnd(this.localName, 'connected');
}
_flushProperties() {
console.log(this.localName, 'flush');
super._flushProperties();
}
ready() {
console.group(this.localName, 'ready');
this.dispatchEvent(new CustomEvent('child-is-here', {bubbles: true, composed: true}));
super.ready();
console.warn(this.localName, 'ready (user)', this.shadowRoot);
console.groupEnd(this.localName, 'ready');
}
}
customElements.define('x-c', XC);
</script>
<x-a></x-a>
</body>
</html>