Skip to content

Commit ec4f497

Browse files
kevinpschaafkevinpschaaf
committed
Merge pull request #1917 from Polymer/fix-1902
Fixes: #1902.
2 parents 291a11d + fa2cb80 commit ec4f497

File tree

6 files changed

+187
-10
lines changed

6 files changed

+187
-10
lines changed

‎src/lib/annotations/annotations.html

+3
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,9 @@
121121
bindings: [],
122122
events: []
123123
};
124+
if (element.localName === 'content') {
125+
list._hasContent = true;
126+
}
124127
this._parseChildNodesAnnotations(element, annote, list);
125128
// TODO(sjmiles): is this for non-ELEMENT nodes? If so, we should
126129
// change the contract of this method, or filter these out above.

‎src/lib/dom-api.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -172,10 +172,11 @@
172172
// when the need arises. For now, the user must call
173173
// distributeContent(true), which updates insertion points manually
174174
// and forces distribution.
175-
var fragContent = (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) &&
176-
node.querySelector(CONTENT);
175+
var fragContent = (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) &&
176+
!node.__noContent && Polymer.dom(node).querySelector(CONTENT);
177177
var wrappedContent = fragContent &&
178-
(fragContent.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE);
178+
(Polymer.dom(fragContent).parentNode.nodeType !==
179+
Node.DOCUMENT_FRAGMENT_NODE);
179180
var hasContent = fragContent || (node.localName === CONTENT);
180181
// There are 2 possible cases where a distribution may need to occur:
181182
// 1. <content> being inserted (the host of the shady root where
@@ -260,7 +261,7 @@
260261
var dc$ = factory(content).getDistributedNodes();
261262
for (var j=0; j<dc$.length; j++) {
262263
hostNeedsDist = true;
263-
var node = dc$[i];
264+
var node = dc$[j];
264265
var parent = node.parentNode;
265266
if (parent) {
266267
removeFromComposedParent(parent, node);

‎src/lib/template/templatizer.html

+1
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@
248248
this._setupConfigure(model);
249249
this._pushHost(host);
250250
this.root = this.instanceTemplate(this._template);
251+
this.root.__noContent = !this._notes._hasContent;
251252
this.root.__styleScoped = true;
252253
this._popHost();
253254
this._marshalAnnotatedNodes();

‎src/mini/shady.html

+2-6
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@
2323
_prepShady: function() {
2424
// Use this system iff localDom is needed.
2525
this._useContent = this._useContent || Boolean(this._template);
26-
if (this._useContent) {
27-
this._template._hasInsertionPoint =
28-
this._template.content.querySelector('content');
29-
}
3026
},
3127

3228
// called as part of content initialization, prior to template stamping
@@ -57,8 +53,8 @@
5753
this.shadyRoot._isShadyRoot = true;
5854
this.shadyRoot._dirtyRoots = [];
5955
// capture insertion point list
60-
// TODO(sorvell): it's faster to do this via native qSA than annotator.
61-
this.shadyRoot._insertionPoints = this._template._hasInsertionPoint ?
56+
this.shadyRoot._insertionPoints = !this._notes ||
57+
this._notes._hasContent ?
6258
this.shadyRoot.querySelectorAll('content') : [];
6359
// save logical tree info for shadyRoot.
6460
saveLightChildrenIfNeeded(this.shadyRoot);

‎test/smoke/dom-if-content.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
5+
<title>dom-if</title>
6+
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
10+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
11+
<link rel="import" href="../../polymer.html">
12+
<link rel="import" href="../../src/lib/template/dom-if.html">
13+
14+
</head>
15+
<body>
16+
17+
<dom-module id="x-inner">
18+
<style>
19+
:host {
20+
display: block;
21+
border: 1px dashed green;
22+
margin: 8px;
23+
padding: 8px;
24+
}
25+
</style>
26+
<template>
27+
x-inner: <content></content>
28+
</template>
29+
<script>
30+
Polymer({
31+
is: 'x-inner',
32+
});
33+
</script>
34+
</dom-module>
35+
36+
37+
<dom-module id="x-test">
38+
<style>
39+
:host {
40+
display: block;
41+
border: 1px dashed orange;
42+
margin: 8px;
43+
padding: 8px;
44+
}
45+
</style>
46+
<template>
47+
<template is="dom-if" if>
48+
<x-inner>
49+
x-test: <content></content>
50+
</x-inner>
51+
</template>
52+
53+
</template>
54+
</dom-module>
55+
56+
<script>
57+
HTMLImports.whenReady(function() {
58+
Polymer({
59+
is: 'x-test',
60+
properties: {
61+
value: {
62+
value: 'stamped!'
63+
}
64+
}
65+
});
66+
});
67+
</script>
68+
69+
<x-test>
70+
I see you!
71+
</x-test>
72+
73+
</body>
74+
</html>

‎test/unit/polymer-dom-content.html

+102
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,21 @@
107107
</script>
108108
</dom-module>
109109

110+
<dom-module id="x-dynamic-content-redist-element">
111+
<template>
112+
<template is="dom-if" id="redistDomif">
113+
<x-dist id="redistContainer">
114+
<content select=".insert" id="redistContent"></content>
115+
</x-dist>
116+
</template>
117+
</template>
118+
<script>
119+
HTMLImports.whenReady(function() {
120+
Polymer({is: 'x-dynamic-content-redist-element'});
121+
});
122+
</script>
123+
</dom-module>
124+
110125
<dom-module id="x-multi-dist">
111126
<template>
112127
<x-dist id="dist1"><content id="content1"></content></x-dist>
@@ -138,6 +153,38 @@
138153
</script>
139154
</dom-module>
140155

156+
<dom-module id="x-toggle-if">
157+
<template>
158+
<div id="container1">
159+
<template id="foo" is="dom-if" if="{{foo}}" restamp>
160+
<span>foo</span>
161+
<content select="#one"></content>
162+
<content select="#two"></content>
163+
</template>
164+
</div>
165+
<div id="container2">
166+
<template id="notFoo" is="dom-if" if="{{!foo}}" restamp>
167+
<span>Not foo</span>
168+
<content select="#one"></content>
169+
<content select="#two"></content>
170+
</template>
171+
</div>
172+
</template>
173+
<script>
174+
HTMLImports.whenReady(function() {
175+
Polymer({
176+
is: 'x-toggle-if',
177+
properties: {
178+
foo: {
179+
type: Boolean,
180+
value: true
181+
}
182+
}
183+
});
184+
});
185+
</script>
186+
</dom-module>
187+
141188
<x-compose-lazy-no-dist><span>Child</span></x-compose-lazy-no-dist>
142189

143190

@@ -901,6 +948,61 @@
901948
document.body.removeChild(el);
902949
});
903950

951+
test('x-dynamic-content-redist-element', function() {
952+
var el = document.createElement('x-dynamic-content-redist-element');
953+
document.body.appendChild(el);
954+
var div = document.createElement('div');
955+
div.classList.add('insert');
956+
Polymer.dom(el).appendChild(div);
957+
assert(!el.querySelector('#redistContainer .insert'));
958+
el.$.redistDomif.if = true;
959+
el.$.redistDomif.render();
960+
Polymer.dom.flush();
961+
assert.ok(el.querySelector('#redistContainer .insert'));
962+
document.body.removeChild(el);
963+
});
964+
965+
test('x-toggle-if', function() {
966+
var el = document.createElement('x-toggle-if');
967+
document.body.appendChild(el);
968+
var c1 = document.createElement('div');
969+
c1.id = 'one';
970+
Polymer.dom(el).appendChild(c1);
971+
var c2 = document.createElement('div');
972+
c2.id = 'two';
973+
Polymer.dom(el).appendChild(c2);
974+
el.$.foo.render();
975+
el.$.notFoo.render();
976+
Polymer.dom.flush();
977+
assert.equal(c1.parentNode, el.$.container1);
978+
assert.equal(c2.parentNode, el.$.container1);
979+
el.foo = !el.foo;
980+
el.$.foo.render();
981+
el.$.notFoo.render();
982+
Polymer.dom.flush();
983+
assert.equal(c1.parentNode, el.$.container2);
984+
assert.equal(c2.parentNode, el.$.container2);
985+
el.foo = !el.foo;
986+
el.$.foo.render();
987+
el.$.notFoo.render();
988+
Polymer.dom.flush();
989+
assert.equal(c1.parentNode, el.$.container1);
990+
assert.equal(c2.parentNode, el.$.container1);
991+
el.foo = !el.foo;
992+
el.$.foo.render();
993+
el.$.notFoo.render();
994+
Polymer.dom.flush();
995+
assert.equal(c1.parentNode, el.$.container2);
996+
assert.equal(c2.parentNode, el.$.container2);
997+
el.foo = !el.foo;
998+
el.$.foo.render();
999+
el.$.notFoo.render();
1000+
Polymer.dom.flush();
1001+
assert.equal(c1.parentNode, el.$.container1);
1002+
assert.equal(c2.parentNode, el.$.container1);
1003+
document.body.removeChild(el);
1004+
});
1005+
9041006
});
9051007

9061008
</script>

0 commit comments

Comments
 (0)