Web组件：在<content>添加</content>上执行代码

Question

我一直在修改Web组件，我有一个想法，可以创建一个可以使用这种语法的<slide-show>组件：

<slide-show>
    <img src="...."/>
    <img src="...."/>
    <img src="...."/>
    <img src="...."/>
</slide-show>

为此，我拿了一个已经有效的代码，并尝试将其分成模板。一个完美运作的初稿是：

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

但是当我试图将元素移到模板外时，就会出现问题：

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

在这种情况下，幻灯片显示表现得很奇怪＆＃34;。也许是因为我无法正确理解<content>标签的工作原理。我的编码出了什么问题？