Web Components: executing code on the <content> added - web-component

Question

I have been tinkering with web components, and I had the idea to make a <slide-show> component that would work with this syntax:
<slide-show>
<img src="...."/>
<img src="...."/>
<img src="...."/>
<img src="...."/>
</slide-show>
For this, I took a code that was already working, and tried to separate it into a template. A first draft that worked perfectly was this:
Index.html
<slide-show></slide-show>
slideshow.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="slide-show" attributes="foo">
<template>
<div style="width:500px;">
<div id="slides">
<img src="http://placehold.it/300x200&text=6">
<img src="http://placehold.it/300x200&text=7">
<img src="http://placehold.it/300x200&text=8">
<img src="http://placehold.it/300x200&text=9">
<img src="http://placehold.it/300x200&text=0">
</div>
</div>
</template>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.slidesjs.com/examples/standard/js/jquery.slides.min.js"></script>
<script>
Polymer('slide-show', {
foo: 'bar',
ready: function(){
$(this.$.slides).slidesjs({ });
}
});
</script>
</polymer-element>
But when I tried to move the elements outside the template, it is when things went wrong:
Index.html
<slide-show>
<img src="http://placehold.it/300x200&text=6">
<img src="http://placehold.it/300x200&text=7">
<img src="http://placehold.it/300x200&text=8">
<img src="http://placehold.it/300x200&text=9">
<img src="http://placehold.it/300x200&text=0">
</slide-show>
slideshow.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="slide-show" attributes="foo">
<template>
<div style="width:500px;">
<div id="slides">
<content></content>
</div>
</div>
</template>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.slidesjs.com/examples/standard/js/jquery.slides.min.js"></script>
<script>
Polymer('slide-show', {
foo: 'bar',
ready: function(){
$(this.$.slides).slidesjs({ });
}
});
</script>
</polymer-element>
In this case, the slideshow behaves "weirdly". Maybe it is that I have not understand correctly how the <content> tag works. What is wrong in my coding?