Polymer - styling childnodes of host

Question

first, i searched for similar questions but haven't found a solution for my problem, which is basically simple, i guess. :)

I built a simple image-slider for clearing up the whole concepts of web components for myself with a real world example.

My custom component is made out of 5 components and a headline.

stage-slider

    stage-element
        h1
        stage-button

    stage-teaserdock
        stage-teaser

The component slides fine. Now i wanted to add teaser navigation at the bottom. So first i tried adding a single teaser item.

Ok.. what i want to do is access an element inside of the stage-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>

This is how my markup looks like:

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

So there is a stage-teaser element nested inside my stage-slider element.

I thought i have to distribute it to the content tag inside my template element. Which is why there is a content tag like this:

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

It displays the teaser item correctly.

But now i want to define its css from within the slider component. This is where i am totally stuck..

I can access the element itself with :host, thats good.

But how do i access the content element, which renders the teaser?

i tried the following:

:host(stage-teaser), :host(.teaser), :host(#teaser), :content .teaser, :host(:content .teaser),

as you can see.. i am kinda stuck. :-/

any idea would be cool!

thanks, Rob

Answer 1

I suspect that the issue you're seeing is just a typo. Instead of :content you want ::content. Here's a jsbin showing a simple example: http://jsbin.com/mijifiru/1/edit and for more info on styling web components with the shadow DOM, check out this article: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

If that doesn't solve the issue it would be helpful if you reduced your code down to a Minimal, Complete, and Verifiable example, and for bonus points do so in an online editor like 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>