html - How to use the content element in Polymer? -

from documentation says <content> element supports select attribute filters nodes via simple selector.

so should light dom elements targeted @ content element contain css class label/tag/value allows browser map corresponding content element has css tag/label/value set in select attribute? contained light dom elements no such labels mapped <content> element no select attribute? example enumerates possibilities helpful.

so have little description dom distribution:

to support composition of element's light dom local dom, polymer supports <content> element. <content> element provides insertion point @ element's light dom combined local dom. <content> element supports select attribute filters nodes via simple selector.

in shadow dom, browser maintains separate light dom , shadow dom trees, , creates merged view (the composed tree) rendering purposes.

in shady dom, polymer maintains own light dom , shady dom trees. document's dom tree composed tree.

this not if want little detail can <content> element do, working example paper-toolbar element :) there little more simple class select, showing select queryselector filter:

in html can use paper-toolbar 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 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 can see able filter content "slot" css selectors, , content without select should have of children content.

in javascript can access <content> slots content 2 way; can children container element has content in , can use this.getcontentchildren('#content_id') give elements array.

polymer has more detailed api work <content>, , description on site:

https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children

update

from 2.0 <content> <slot> , 1.7 added slot element pre-migration, should use that. it's bit different content element selector can set name property , outside have use name specify slot want put in:

<template>     <!-- style -->     <paper-toolbar>         <slot name="header"></slot>     </paper-toolbar>     <slot name="content"></slot> </template>  <my-element>     <div class="title" slot="header">title</div>     <div slot="content">content</div> </my-element> 

sadly slot not of specified slotted elements first 1 dom have redesign few element used css selector before.