How does the style section work with a Polymer.dart template?

Question

I am wondering how the style (...) section in a Polymer.dart Element declaration interacts internally and can it inherit any styling from the containter?

I am looking at the Dart Polymer tutorial:

Define a Custom Element

This shows a style section. The example suggests that the element will have a LemonChiffon background colour. When I run this with the Dart Editor, the background is same as the container, viz.

<template>
  <style>
    @host {
      :scope {
        background-color: LemonChiffon;
        text-align: center;
        display: inline-block;
        border: solid 1px;
        padding: 10px 10px 10px 10px;
      }
    }
  </style>
  <div>
    <div>
      {{counter}}
    </div>
    <div>
      <button on-click="{{start}}" id="startButton">Start</button>
      <button on-click="{{stop}}"  id="stopButton">Stop</button>
      <button on-click="{{reset}}" id="resetButton">Reset</button>
    </div>
  </div>
</template>

Is that a bug? There are times when one wants the Element to maintain its style as shown in this example.

At other times I may want to override the internal style settings. Is there a setting to override the style?

Similarly, can a method on the dart object access the style like private data?

I haven't found documentation for the style section. I'm working on the assumption that this section intends to follow the

W3C HTML Templates draft

Anyway I think the Polymer implementation for selectors can be explicit about what works and what it is expected to do. All insights on the style section for Polymer are welcome.

thx.

FYI -- Per the response below, the example and source code download linked are out-of-date. — will

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-03-13T11:02:49

The image where you copied the code from is outdated.

Please use one of these pages as reference how to style custom elements:

The CSS should look like:

  :host {
    background-color: LemonChiffon;
    text-align: center;
    display: inline-block;
    border: solid 1px;
    padding: 10px 10px 10px 10px;
  }

NOTE
Dartium (the Dart development browser) is usually some weeks behind.
The recent changes from ^ and ^^ to /shadow/ and /shadow-deep/ don't work in Dartium yet.

How does the style section work with a Polymer.dart template?

1 Answers