blob: 8b64cca385db5821295e8963c84dc0085176ee57 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<!--
@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
-->
<link rel="import" href="../utils/boot.html">
<link rel="import" href="../mixins/property-effects.html">
<link rel="import" href="../mixins/mutable-data.html">
<link rel="import" href="../mixins/gesture-event-listeners.html">
<script>
(function() {
'use strict';
/**
* @constructor
* @extends {HTMLElement}
* @implements {Polymer_PropertyEffects}
* @implements {Polymer_OptionalMutableData}
* @implements {Polymer_GestureEventListeners}
*/
const domBindBase =
Polymer.GestureEventListeners(
Polymer.OptionalMutableData(
Polymer.PropertyEffects(HTMLElement)));
/**
* Custom element to allow using Polymer's template features (data binding,
* declarative event listeners, etc.) in the main document without defining
* a new custom element.
*
* `<template>` tags utilizing bindings may be wrapped with the `<dom-bind>`
* element, which will immediately stamp the wrapped template into the main
* document and bind elements to the `dom-bind` element itself as the
* binding scope.
*
* @polymer
* @customElement
* @appliesMixin Polymer.PropertyEffects
* @appliesMixin Polymer.OptionalMutableData
* @appliesMixin Polymer.GestureEventListeners
* @extends {domBindBase}
* @memberof Polymer
* @summary Custom element to allow using Polymer's template features (data
* binding, declarative event listeners, etc.) in the main document.
*/
class DomBind extends domBindBase {
static get observedAttributes() { return ['mutable-data']; }
constructor() {
super();
this.root = null;
this.$ = null;
this.__children = null;
}
/** @return {void} */
attributeChangedCallback() {
// assumes only one observed attribute
this.mutableData = true;
}
/** @return {void} */
connectedCallback() {
this.style.display = 'none';
this.render();
}
/** @return {void} */
disconnectedCallback() {
this.__removeChildren();
}
__insertChildren() {
this.parentNode.insertBefore(this.root, this);
}
__removeChildren() {
if (this.__children) {
for (let i=0; i<this.__children.length; i++) {
this.root.appendChild(this.__children[i]);
}
}
}
/**
* Forces the element to render its content. This is typically only
* necessary to call if HTMLImports with the async attribute are used.
* @return {void}
*/
render() {
let template;
if (!this.__children) {
template = /** @type {HTMLTemplateElement} */(template || this.querySelector('template'));
if (!template) {
// Wait until childList changes and template should be there by then
let observer = new MutationObserver(() => {
template = /** @type {HTMLTemplateElement} */(this.querySelector('template'));
if (template) {
observer.disconnect();
this.render();
} else {
throw new Error('dom-bind requires a <template> child');
}
});
observer.observe(this, {childList: true});
return;
}
this.root = this._stampTemplate(template);
this.$ = this.root.$;
this.__children = [];
for (let n=this.root.firstChild; n; n=n.nextSibling) {
this.__children[this.__children.length] = n;
}
this._enableProperties();
}
this.__insertChildren();
this.dispatchEvent(new CustomEvent('dom-change', {
bubbles: true,
composed: true
}));
}
}
customElements.define('dom-bind', DomBind);
Polymer.DomBind = DomBind;
})();
</script>
|
