How do I style elements in Dart Web UI templates? -
say have custom component with
<head> <link rel="stylesheet" src="..."> </head> <body> <element name="elem"> <template> <ul class="foo"> ... where referenced style sheet has entry
ul .foo { list-style-type: none; } the problem can't style apply ul. nothing tried works unless put style attribute on ul element itself. have tried putting under scoped attribute , doesn't work either. weird thing class of ul becomes "elem_foo".
thanks question! here's how it:
in main html:
<div is="x-click-counter"> in 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 2 things going on here.
1) use form of <div is="x-foo"> instead of <x-foo>. how first form more backwards compatible, , it's more explicit how find element.
2) put <style scoped> inside <template> tag.
web ui see scope style tag, , generate css file you. looks this:
/* auto-generated components style tags. */ /* not edit. */ /* ==================================================== component x-click-counter stylesheet ==================================================== */ div[is=x-click-counter] span { color: #f00; } web ui adds link generated css file main html file.
Comments
Post a Comment