3

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".

Juniper Belmont
  • 3,296
  • 2
  • 18
  • 28
jz87
  • 9,199
  • 10
  • 37
  • 42

1 Answers1

3

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.

Juniper Belmont
  • 3,296
  • 2
  • 18
  • 28
Seth Ladd
  • 112,095
  • 66
  • 196
  • 279
  • "Note: scoped style is not supported yet." Thus this is just hacky workaround (?) to make scoped styles I assume. I suppose this page [Appearance section](http://www.dartlang.org/articles/web-ui/spec.html#appearance) will be updated when actual scoped styles start to work. One would assume it automatically scopes the css written when it becomes supported. – Ciantic May 22 '13 at 21:26