Component Play

by AaronLayton

HTML

<script src="http://www.validatethis.co.uk/playground/components/polymer.js"></script>
<ul is="news">
    <li><a href="//example.com/stories/4">Yet another story</a></li>
    <li><a href="//example.com/stories/4">Awesome story</a></li>
    <li class="breaking"><a href="//example.com/stories/5">Horrible story</a></li>
    <li><a href="//example.com/stories/1">A story</a></li>
    <li><a href="//example.com/stories/2">Another story</a></li>
    <li class="breaking"><a href="//example.com/stories/3">Also a story</a></li>
</ul>

<element name="news" extends="ul">
    <template>
        <style scoped>
            div.breaking {
                color: Red;
                font-size: 20px;
                border: 1px dashed Purple;
            }
            div.other {
                padding: 2px 0 0 0;
                border: 1px solid Cyan;
            }
        </style>

        <div class="breaking">
            <h2>Breaking Stories</h2>
            <ul>
                <content select=".breaking"></content>
            </ul>
        </div>
        <div class="other">
            <h2>Other News</h2>
            <ul>
                <content></content>
            </ul>
        </div>
    </template>
    <script>
        Polymer.register(this);
    </script>
</element>

CSS

.wall-product-details {
    position: relative;
    height: 55px;
    z-index: 40;
    top: 0;
    text-align: left;
    background: #EEE;
    padding: 10px;
    border-top: solid 1px #F9F8F7;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}