聚合物-造型主机的子节点

首先,我搜索了类似的问题,但没有找到解决我问题的方法,我想这基本上很简单

我构建了一个简单的图像滑块,用一个真实世界的例子来清理web组件的整个概念。

我的自定义组件由5个组件和一个标题组成。

stage-slider

    stage-element
        h1
        stage-button

    stage-teaserdock
        stage-teaser

组件滑动良好。现在我想在底部添加摘要导航。所以,首先我尝试添加一个简单的项目。

好的,我要做的是访问舞台滑块内部的元素:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../stage-element/stage-element.html">
<link rel="import" href="../stage-button/stage-button.html">


<polymer-element name="stage-slider" attributes="items slideInterval">

<template>

    <style>

        :host {
            width: 960px;
            height: 485px;

            position: absolute;

            top: 50%;
            left: 50%;

            margin: -242px 0px 0px -480px;

            overflow: hidden;

            display: block;
        }

        :content .teaser
        {
            left: 30px;
        }

    </style>

    <div id="wrapper">

        <template id="slider" repeat="{{item in items}}">

            <stage-element headline="{{item.headline}}"
                                image="{{item.image}}"
                                buttonLabel="{{item.buttonLabel}}"
                                buttonTargetWindow="{{item.buttonTargetWindow}}"
                                buttonTargetURL="{{item.buttonTargetURL}}">
            </stage-element>

        </template>

        <content class="teaser" select="stage-teaser"></content>

    </div>

</template>

<script src="./libs/TweenLite/easing/EasePack.min.js"></script>
<script src="./libs/TweenLite/plugins/CSSPlugin.min.js"></script>
<script src="./libs/TweenLite/TweenLite.min.js"></script>


</polymer-element>


<script>
Polymer('stage-slider',
        {
            slideInterval: 7000,

            items: [],

            index: 0,

            ready: function ()
            {
                console.log('-----------------');
                console.log('stage slider ready!');
            },

            attached: function ()
            {
                console.log('-----------------');
                console.log('stage slider attached!');

                this.$.wrapper.style.width = (960 * (this.items.length)).toString() + "px";

                //

                if (this.items.length > 1 && this.slideInterval != 0)
                {
                    var that = this;
                    setInterval(function ()
                            {
                                that.startSliding(that);
                            }, this.slideInterval
                    );
                }
            },

            startSliding: function (shadowDom)
            {
                console.log('More children than 1 -> SLIDE EM!');

                TweenLite.to(shadowDom.$.wrapper, 1.5, {

                    marginLeft: -960,

                    ease: Expo.easeInOut,

                    onStart: function ()
                    {
                        console.log('tween started'); //, this = ', this);
                    },
                    onComplete: function ()
                    {
                        //                            console.log('tween complete');
                        //                            console.log(shadowDom.$.wrapper.getElementsByTagName('stage-slide')[0]);

                        shadowDom.$.wrapper.style.marginLeft = 0;
                        shadowDom.$.wrapper.appendChild(shadowDom.$.wrapper.getElementsByTagName('stage-element')[0]);
                    }});
            }
        });
</script>

我的标记是这样的:

<stage-slider slideInterval="0"
               items='[
                        {
                            "headline"              : "Test headline",
                            "image"                 : "img/slide0.jpg",
                            "buttonLabel"           : "Test buttonlabel",
                            "buttonTargetURL"       : "http://www.google.com"
                        }

                      ]'>

    <stage-teaser class="teaser"
                   image="img/teaser0.jpg"
                   headline="Test teasertext"
                   targetURL="http://google.com">

    </stage-teaser>

</stage-slider>

因此,在我的stage滑块元素中嵌套了一个stage摘要元素。

我想我必须将其分发到模板元素中的内容标签。这就是为什么有这样的内容标签:

<content class="teaser" select="stage-teaser"></content>

它将正确显示摘要项。

但现在我想在滑块组件中定义它的css。这就是我完全卡住的地方。。

我可以访问元素本身:host,这很好。

但是如何访问呈现摘要的内容元素?

我尝试了以下方法:

:主机(舞台摘要), :主机(.treaser), :host(#摘要), :content.treaser, :host(:content.treaser),

如你所见。。我有点卡住了-/

任何想法都很酷!

谢谢 抢劫