I want to create custom element that displays its content, if content is tapped it will be displayed in paper-dialog. I have:
<paper-element name="my-element">
<template>
<div vertical layout center on-tap="{{contentClicked}}">
<content></content>
</div>
<paper-dialog id="dialog">
<content></content>
</paper-dialog>
</template>
<script>
Polymer({
contentClicked: function(){
this.$.dialog.toggle();
}
});
</script>
</paper-element>
Content is added only to first div, not to paper-dialog. Is there some easy way to duplicate content from div to dialog?
As mentioned in this elsewhere on Stack Overflow, you don't have to use the <content> insertion point to pull in the light DOM into your element. You could also use this.children to access the light DOM nodes from JavaScript.
There might be a simpler way of doing this, but just looping through all the children, cloning the nodes, and appending them multiple times does work. One thing to be aware of is that since you're adding clones of the original light DOM nodes to your element, any changes made to the light DOM during the lifetime of your page won't be reflected in those copies—each copy might get out of sync.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.min.js"></script>
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-dialog.html">
<polymer-element name="sample-element">
<template>
<div id="container" on-tap="{{contentClicked}}"></div>
<paper-dialog id="dialog"></paper-dialog>
</template>
<script>
Polymer({
contentClicked: function() {
this.$.dialog.toggle();
},
domReady: function() {
for (var i = 0; i < this.children.length; i++) {
this.$.container.appendChild(this.children[i].cloneNode(true));
this.$.dialog.appendChild(this.children[i].cloneNode(true));
}
}
});
</script>
</polymer-element>
<sample-element>
<h1>Hi!</h1>
<div>Hello!</div>
</sample-element>
</body>
</html>
