Only one reference to <content></content> in polymer element?


The boildown of the construct, is like this. Having a polymer element:

<dom-module id="demo-element">

This only gives one occurrence of content. e.g.
<demo-element>Hello</demo-element> only gives “Hello” and not “HelloHello”. Using a property with binding, gives the expected. Seems like some small detail missing, anyone who have been in similar parts?

 Dart version 1.14.0
 WebStorm 11.0.3

From pubspec.yaml:
  sdk: '>=1.9.0 <2.0.0'

  polymer: ^1.0.0-rc.15
  web_components: ^0.12.0
  polymer_elements: 1.0.0-rc.8
  browser: ^0.10.0
  reflectable: ^0.5.0
  polymer_interop: ^1.0.0-rc.5


That’s by design. <content> doesn’t produce elements, it just projects them.

More than one <content> without a selector doesn’t do anything. The first one “grabs” all children and projects them where it is placed.

You can have more than one <content> tag but then they should have different selectors like

  <content select=".header"></content>
  <content select=".drawer"></content>

used like

  <div class"header">header</div>
  <div class"drawer">header</div>

then the first <div> is projected to the last <content> element because it doesn’t match any specific selector, the other divs are projected to the <content> tags with the matching selectors.

Answered By – Günter Zöchbauer

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *