From the documentation it says that the
So we have this little description about the DOM Distribution:
To support composition of an element's light DOM with its local DOM, Polymer supports the
<content>element provides an insertion point at which an element's light DOM is combined with its local DOM. The
<content>element supports a select attribute which filters nodes via a simple selector.
In shadow DOM, the browser maintains separate light DOM and shadow DOM trees, and creates a merged view (the composed tree) for rendering purposes.
In shady DOM, Polymer maintains its own light DOM and shady DOM trees. The document's DOM tree is effectively the composed tree.
This is not too much if somebody want a little detail about what can the
<content> element do, so a working example could be the paper-toolbar element :) there is a little more than a simple class select, which is showing us that the select is a querySelector filter:
In HTML you can use the paper-toolbar like this:
<paper-toolbar class="tall"> <paper-icon-button icon="menu"></paper-icon-button> <div class="middle title">Middle Title</div> <div class="bottom title">Bottom Title</div> </paper-toolbar>
And the template has this:
<template> <!-- style ---> <div id="topBar" class$="toolbar-tools [[_computeBarExtraClasses(justify)]]"> <content select=":not(.middle):not(.bottom)"></content> </div> <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJustify)]]"> <content select=".middle"></content> </div> <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJustify)]]"> <content select=".bottom"></content> </div> </template>
So you can see that you able to filter the content "slot" with CSS selectors, and the content without the select is should have all of the children content.
<content> slots content two way; you can get the children from an container element which has the content in it and you can use
this.getContentChildren('#content_id') which will give you the elements Array.
Polymer has a more detailed API to work with
<content>, and the description on their site: