CODEWITHSUNDEEP
htmlpolymerweb-componentshadow-dom
vvMINOvv
vvMINOvv

Reputation: 1850

Can we put <content> inside a <shadow> tag?

Is there a way to put something like <content select=".someClass"></content> inside a <shadow> tag in a polymer template like so:

<shadow>
    <content select=".someClass"></content>
</shadow>

If so how? because when I try it doesn't show at all.

Upvotes: 0

Views: 371

Answers (1)

robdodson
robdodson

Reputation: 6786

There's no declarative way to do this. It is possible to do it with JavaScript by selecting an element that you know exists in the <shadow> and then using getDistributedNodes() to pull the content out of your insertion point and append it to that known element.

In Polymer you can do this pretty easily leveraging automatic node finding

If you know that the parent element has an element in it with an id of foo you could do something like this:

// hacky pseudo code
// assuming you have a <content id="content"> element
var content = this.$.content.getDistributedNodes().array();
content.forEach(function(node) {
  this.$.foo.appendChild(node);
}.bind(this));

Upvotes: 1

Related Questions