CODEWITHSUNDEEP
javascriptcsspolymerweb-componentshadow-dom
emanguy
emanguy

Reputation: 91

Polymer CSS ::content selector not working

I haven't used Polymer since version 0.5 so I decided to give it a shot again. I've been having some trouble with the :host and ::content selectors, especially given I found that the :host selector only works when my style tag is placed outside the tag.

Anyway, my problem is that I cannot get the host selector to work unless I specify display: block in my CSS under :host. Second, apparently there isn't a difference between the selectors ":host" and ":host ::content". I'm trying to ONLY style content which is inserted into the content tag without using a wrapper element.

Here is my code from custom-element.html:

<dom-module id="custom-element">
    <style>
        /* Demonstrating how to specify inserted content

           any content added here is styled
        */
        :host ::content
        {
            color: green;
        }

        /* This CSS targets the custom-element tag itself */
        :host
        {
            padding: 4px;
            background-color: gray;
        }
    </style>
<template>

    <!-- Title will be placed here before the content -->
    <h2 id="title">{{title}}</h2>
    <!-- Any content inside the tag will be placed here -->
    <content></content>
</template>
....

And here is the relevant location where it is used in index.html:

<!-- Auto-binding templates -->
    <template id="t" is="dom-bind">
        <h1>Your input was <span>{{inputValue}}</span></h1>
        <br>
        <input is="iron-input" bind-value="{{inputValue}}">
        <input type="button" value="Add to list" onClick="pushItem()">

        <ul>
        <!-- Repeating templates -->
        <!-- Here, the items attribute specifies the array of items to bind to. -->
        <template id="repeatingList" is="dom-repeat" items="{{listItems}}">
            <!-- This demonstrates that we can find the index and data for every item in the specified array -->
            <li>Array index <span>{{index}}</span>- <span>{{item}}</span></li>
        </template>
        </ul>
        <br>
        <custom-element title="{{inputValue}}"><p>Lorem ipsum!</p></custom-element>
    </template>

Here's how it appears (the gray background doesn't appear behind the element content and the color should only be applied to the content tag): https://goo.gl/photos/p2EjTSjySCh2srY78

Upvotes: 0

Views: 2064

Answers (2)

Keith
Keith

Reputation: 155602

Your shadow DOM styles should be inside your <template> tag.

::content doesn't directly map to an element and so styles applied directly to it will be ignored. Instead it allows you to override styles inside the content.

So:

:host { background-color: gray; } /* Styles <custom-element> */

:host ::content { color: green; } /* Does nothing */

:host ::content > p { color: green; } /* Overrides the <p>Lorem ipsum!</p> to be green */

Finally note that <custom-element> has no default styles at all of its own - it only has what you specify in :host. For any visual components you'll find that you just about always need to specify display in the :host.

Upvotes: 0

Neil John Ramal
Neil John Ramal

Reputation: 3734

From https://www.polymer-project.org/1.0/docs/devguide/styling.html#styling-distributed-children-content

You must have a selector to the left of the ::content pseudo-element

Upvotes: 3

Related Questions