forked from googlearchive/polymer-patterns
-
Notifications
You must be signed in to change notification settings - Fork 0
/
accessing-the-dom-inside-a-content-tag.html
93 lines (74 loc) · 3.08 KB
/
accessing-the-dom-inside-a-content-tag.html
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
<!--
Copyright (c) 2014 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
-->
<!--
# Accessing the DOM inside a `content` tag
Shows how to access nodes distributed into an element's Shadow DOM using the
`<content>` tag.
To understand how to use the `<content>` tag
see
[Creating an insertion point using the `content` tag](creating-an-insertion-point-using-the-content-tag.html))
and
[Creating insertion points using the `select` attribute](creating-insertion-points-using-the-select-attribute.html)).
Also see this (Shadow DOM visualizer)[http://html5-demos.appspot.com/shadowdom-visualizer].
Not every node passed as a child to a Polymer element gets
distributed into the element's DOM. To get the nodes that are distributed, call
`getDistributedNodes()` on a `<content>` tag in a Polymer element.
For example, `<my-element>` let's you in distribute nodes with `class` 'crucial':
<content id="crucial" select=".crucial"></content>
You can get the nodes distributed through the above `<content>` tag
like this:
this.$.crucial.getDistributedNodes();
Getting the distributed nodes may or may not be the same as getting an
element's `children`.
Consider the case when you use `<my-element>` in this way:
<my-element>
<p>A para</p>
<p class="crucial">Crucial distributed para</p>
</my-element>
Using `this.$.crucial.getDistributedNodes()` returns the only `<p>` node
distributed through the `<content>` tag:
<p class="crucial">Crucial distributed para</p>
Using `this.children` returns both `<p>` nodes.
Using `this.children` only gets you _potentially_ distributed nodes. Using
`getDistributedNodes()` gets you the nodes that were _actually_ distributed.
[jsbin](http://jsbin.com/juyeme/edit)
-->
<link rel="import" href="../../components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<content id="crucial" select=".crucial"></content>
<button on-tap="{{showDistributedNodes}}">Show distributed nodes</button>
<button on-tap="{{showChildren}}">Show children</button>
<template repeat="{{node in nodes}}">
<div>{{node}}</div>
</template>
</template>
<script>
Polymer({
created: function() {
this.nodes = [];
},
showDistributedNodes: function() {
this.getNodes(this.$.crucial.getDistributedNodes());
},
showChildren: function() {
this.getNodes(this.children);
},
getNodes: function(_nodes) {
this.nodes = [];
for (var i = 0; i < _nodes.length; i++) {
var html = _nodes[i].outerHTML;
if (html && html.trim()) {
this.nodes.push(html);
}
}
}
});
</script>
</polymer-element>