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

Question

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.

Answer 1

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