Dart polymer styling shadow root element with css

Question

I'm trying to style the root element of a polymer element with css. Take the counter-click for example. If I have a polymer element in my main html and I want to give it a size (say width and height.) I try to use a global css in my main html like

click-counter{
width:100px;
height:100px;
}

This doesn't work.

I also tried to style inside the polymer element like

<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      @host{
        click-counter {
          width:100px;
          height:100px;
        }
      }
      ...

This doesn't work either. Does anyone know how am I gonna style the element with css? (I'm using dart 0.8.1.2)

Thanks, Yi

Answer 1

The click-counter is composed of a button and a text input. There is no div that holds the 2 together. So if you are setting the width and height on the component, what are you really setting it on?

<polymer-element name="click-counter">
  <template>
    <button on-click="increment">Click Me</button>
    <p>You clicked the button {{count}} times.</p>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

In case there would be a div wrapping the button and the text input, you could set the width of the div in the component like this:

<polymer-element name="click-counter">
  <template>
  <style type="text/css">
      div{
        width:100px;
        border-style:solid;
        background-color: #FF9900;
        font-weight: bold;
      }
    </style>
    <div>
      <button on-click="increment">Click Me</button>
      <p>You clicked the button {{count}} times.</p>
    </div>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

You can also declare a div style on the index file, but then you have to set applyAuthorStyles to true on the component.

@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement with ObservableMixin {
  @observable int count = 0;

  get applyAuthorStyles => true;

  void increment(Event e, var detail, Node target) {
    count += 1;
  }
}

This would affect all divs on the page though. I'm not sure how you would select only the root div in the click-counter component.

Answer 2

Is this what you want to do?

  @host {
    :scope {
       ...
    }
  }

See this section of the tutorial: Styling a custom element