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

Issue

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

<dom-module id="demo-element">
  <template>
     <span><content></content></span>
     <span><content></content></span>
   </template>
</dom-module>

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?

Environment:
 Dart version 1.14.0
 WebStorm 11.0.3

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

dependencies:
  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

Solution

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

<header-elem>
  <content select=".header"></content>
</header-elem>
<drawer-elem>
  <content select=".drawer"></content>
</drawer-elem>
<body-elem>
  <content></content>
</body-elem>

used like

<my-component>
  <div>body</div>
  <div class"header">header</div>
  <div class"drawer">header</div>
</my-component>

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.