Как оформить элементы в шаблонах Dart Web UI?

Скажем, у меня есть пользовательский компонент с

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

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

где ссылка на таблицу стилей имеет запись

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

Проблема в том, что я не могу заставить стиль применить к ул. Ничто из того, что я пробовал, не работает, если я не добавлю атрибут style к самому элементу ul. Я попытался положить под с атрибутом scoped, и это тоже не работает. Это делает странную вещь, когда класс ul становится "elem_foo".

Источник

1 ответ

Решение

Спасибо за вопрос! Вот как я это делаю:

В моем основном HTML:

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

В моем пользовательском элементе:

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

Здесь происходят две вещи.

1) Я использую форму <div is="x-foo"> вместо <x-foo>, Мне нравится, как первая форма более обратно совместима, и она более понятна, как я найду элемент.

2) Я положил <style scoped> внутри моего <template> тег.

Веб-интерфейс увидит тег стиля области и сгенерирует для вас файл CSS. Это выглядит так:

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

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

Веб-интерфейс также добавляет ссылку на этот сгенерированный файл CSS в ваш основной файл HTML.

Источник
Другие вопросы по тегам