Question

首先，我搜索了类似的问题，但没有找到解决我的问题的方法，这基本上很简单，我猜。：）

我构建了一个简单的图像滑块，用于通过一个真实的例子为我自己清除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-teaser元素嵌套在我的stage-slider元素中。

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

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

正确显示预告片项目。

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

我可以使用：host访问元素本身，这很好。

但是我如何访问内容元素，这会呈现预告片？

我尝试了以下内容：

：主机（阶段挑逗），：主机（.teaser），：主机（#teaser），：content .teaser，：host（：content .teaser），

你可以看到..我有点卡住了。： - /

任何想法都会很酷！

感谢，罗布

Answer 1

我怀疑你看到的问题只是一个错字。而不是:content你想要::content。这是一个显示一个简单示例的jsbin：http://jsbin.com/mijifiru/1/edit以及有关使用shadow DOM设置Web组件样式的更多信息，请查看以下文章：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

如果这不能解决问题，那么将代码缩减到Minimal, Complete, and Verifiable example会有所帮助，而奖励积分则会在jsbin等在线编辑器中实现。

<polymer-element name='my-container' noscript>
  <template>
    <style>
      ::content .innerContent {
        background-color: red;
      }
    </style>
    Shadow Dom
    <content></content>
  </template>
</polymer-element>

<my-container>
    <div class='innerContent'>Contained matching Light DOM</div>
    <div>Contained unmatched Light DOM</div>
</my-container>

聚合物 - 主机的样式子节点

1 个答案: