html - polymer - 主机的样式子节点

Question

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

我构建了一个简单的图像 slider ，以通过一个真实世界的示例为自己理清 Web 组件的全部概念。

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

stage-slider

    stage-element
        h1
        stage-button

    stage-teaserdock
        stage-teaser

组件滑动良好。现在我想在底部添加预告片导航。所以首先我尝试添加一个预告片元素。

好的..我想做的是访问舞台 slider 内的元素:

<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-slider 元素中嵌套了一个 stage-teaser 元素。

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

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

它正确显示预告片元素。

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

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

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

我尝试了以下方法:

:主持人(舞台预告片)，:host(.teaser),:主持人(#预告片)，:内容.预告片，:host(:content .teaser),

如您所见..我有点卡住了。 :-/

任何想法都会很酷!

谢谢，罗布

Answer 1

我怀疑您看到的问题只是一个拼写错误。您需要 ::content 而不是 :content。这是一个显示简单示例的 jsbin:http://jsbin.com/mijifiru/1/edit有关使用影子 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>