[Dart+Polymer] Styling Elements

Styling custom elements is sometimes tricky. In general the website styles do NOT apply to the custom element. There is a special attribute called „apply-author-styles“ that can be set to „true“ to apply your website’s styles to your custom element.

In general each custom element should have its  styles separated from the website so it can be reused easily. Let’s have a look at a simple example:

dart_polymer_styling.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dart polymer styling</title>
    <link rel="import" href="external-styles.html">
    <link rel="import" href="internal-styles.html">
    <style>
      .styled {
        background-color: yellow;
        font-weight: bold;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <external-styles></external-styles>
    <internal-styles></internal-styles>

    <script type="application/dart" src="dart_polymer_styling.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

This simple HTML file imports two custom elements from two separate files and defines a small CSS rule.

dart_polymer_styling.dart

import 'package:polymer/polymer.dart';

void main() {
  initPolymer();
}

The corresponding .dart-file is rather small and could be avoided if the init script from polymer is used directly

The two custom elements look like this:

external-styles.dart

<polymer-element name="external-styles">
  <template>
    <div class="styled">Externally Styled</div>
  </template>
  <script type="application/dart" src="external-styles.dart"></script>
</polymer-element>

external-styles.html

import 'package:polymer/polymer.dart';

@CustomTag('external-styles')
class ExternalStylesElement extends PolymerElement {
  bool get applyAuthorStyles =&gt; true;

  ExternalStylesElement.created() : super.created() {
    print(this.toString() + " created");
  }
}

internal-styles.dart

<polymer-element name="internal-styles">
  <template>
    <style>
      .styled {
        color: #f00;
      }
    </style>
    <div class="styled">Internally Styles</div>
  </template>
  <script type="application/dart" src="internal-styles.dart"></script>
</polymer-element>

internal-styles.html

import 'package:polymer/polymer.dart';

@CustomTag('internal-styles')
class InternalStylesElement extends PolymerElement {
  // applyAuthorStyles is false by default

  InternalStylesElement.created() : super.created() {
    print(this.toString() + " created");
  }
}

As you can see here the trick with polymer elements in Dart is to define/overwrite the getter for applyAuthorStyles. Also make sure the <style>-tag is inside of your <template>-tag.

Ein Gedanke zu „[Dart+Polymer] Styling Elements

  1. Rather than exposing the details of an element’s internal implementation for theming, instead an element author defines one or more custom CSS properties as part of the element’s API.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Please enter the captcha *