CODEWITHSUNDEEP
dartpolymer
Justin Fagnani
Justin Fagnani

Reputation: 11201

How do you style a custom element's tag from within the element?

I'm trying to style a custom element tag, and can't seem to do it from within the element's <style> tag, or at least I don't know what selector to use. I've tried the custom element's tag name and template, but neither work.

<polymer-element name="my-test" constructor="MyTest">
  <template>
    <style>
      my-test {
        border: solid 1px #888; /* doesn't work */
      }
      .title {
        color: blue; /* works */
      }
    </style>
    <div class="title">{{ title }}</div>
  </template>

I'm using polymer.dart, so there may be some lag in its implementation, but I'd like to know how it should work in polymer.js.

Upvotes: 10

Views: 1820

Answers (2)

Seth Ladd
Seth Ladd

Reputation: 120739

As mentioned in another answer, to style the host of the shadow DOM, use @host selector. In the case of a custom element, the host of the custom element is itself.

Here is an example of how to style the host element, or the custom element itself, from within a custom element's <style> tag.

<!DOCTYPE html>

<html>
<head>
    <title>index</title>
    <script src="packages/polymer/boot.js"></script>
</head>

<body>

    <polymer-element name="my-element">
        <template>
            <style>
                @host {
                  my-element {
                    display: block;
                    border: 1px solid black;
                  }
                }

                p {
                    color: red;
                }

                #message {
                    color: pink;
                }

                .important {
                    color: green;
                }
            </style>
            <p>Inside element, should be red</p>

            <div id="message">
                The message should be pink
            </div>

            <div class="important">
                Important is green
            </div>

            <div>
              <content></content>
            </div>
        </template>
        <script type="application/dart" src="index.dart"></script>
    </polymer-element>

    <p>outside of element, should be black</p>

    <div id="message">
        The outside message should be black
    </div>

    <div class="important">
        Outside important is black
    </div>

    <my-element>Hello from content</my-element>

    <!-- If the script is just an empty main, it's OK to include inline. -->
    <!-- Otherwise, put the app into a separate .dart file. -->

    <script type="application/dart">main() {}</script>
</body>
</html>

Notice the @host block in the style:

            @host {
              my-element {
                display: block;
                border: 1px solid black;
              }
            }

Because this particular custom element does not extend any element, it does not default to a block.

Here is what it looks like when styled:

enter image description here

Upvotes: 8

oskbor
oskbor

Reputation: 1592

I think what you want is the @hostcss selector. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host

Upvotes: 9

Related Questions