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
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>
<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)