如何設置Dart Web UI模板中的元素樣式？

說我有一個如何設置Dart Web UI模板中的元素樣式？

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

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

所參考的樣式表的條目

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

的問題是，我不能讓樣式應用到UL自定義組件。除非我將樣式屬性放在ul元素上，否則我嘗試過的任何工作都不起作用我曾嘗試將範圍屬性置於其下，但這也不起作用。它在ul的類變成「elem_foo」的時候做了一件奇怪的事情。

來源

2013-05-03 jz87

感謝您的問題！下面是我如何做到這一點：

在我的主要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>

有兩件事情會在這裏。我使用<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; 
}

Web用戶界面還添加一個鏈接到這個生成的CSS文件到您的主HTML文件。

來源

2013-05-03 04:43:17

你能否解釋一下/爲什麼/這種方式的工作方式？「 – 2013-05-03 05:52:27

」注意：範圍樣式尚未受支持。「因此，這只是簡單的解決方法（？）來製作我認爲的範圍化的樣式。我想這個頁面[外觀部分]（http://www.dartlang.org/articles/web-ui/spec.html#appearance）將在實際的作用域樣式開始工作時更新。人們會認爲它會在被支持時自動對寫入的css進行範圍。 – Ciantic 2013-05-22 21:26:24

如何設置Dart Web UI模板中的元素樣式？

回答

相關問題