How do I style elements in Dart Web UI templates?

问题

Say I have a custom component with

<head>
  <link rel="stylesheet" src="...">
</head>

<body>
  <element name="elem">
    <template>
      <ul class="foo">
...

where the referenced style sheet has an entry

ul .foo {
  list-style-type: none;
}

The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul becomes "elem_foo".

回答1:

Thanks for the question! Here's how I do it:

In my main HTML:

<div is="x-click-counter">

In my custom element:

<element name="x-click-counter" constructor="CounterComponent" extends="div">
  <template>
    <button class="button1" on-click="increment()">Click me</button><br />
    <span>(click count: {{count}})</span>
    <style scoped>
      div[is=x-click-counter] span {
        color: red;
      }
    </style>
  </template>
  <script type="application/dart" src="xclickcounter.dart"></script>
</element>

There are two things going on here.

1) I use the form of <div is="x-foo"> instead of <x-foo>. I like how the first form is more backwards compatible, and it's more explicit with how I will find the element.

2) I put a <style scoped> inside my <template> tag.

Web UI will see the scope style tag, and generate a CSS file for you. It looks like this:

/* Auto-generated from components style tags. */
/* DO NOT EDIT. */

/* ==================================================== 
   Component x-click-counter stylesheet 
   ==================================================== */
div[is=x-click-counter] span {
  color: #f00;
}

Web UI also adds a link to this generated CSS file to your main HTML file.

来源：https://stackoverflow.com/questions/16351110/how-do-i-style-elements-in-dart-web-ui-templates

标签

dart

dart-webui