Dart webUI CSS issues
I replicated your issue, and got a fix (though I'm afraid it's a hack).
I created a new application using the WebUI stub code, then replaced the content of xclickcomponent.dart with the following (I also used your supplied HTML as the content of the component and your CSS):
@observableString theFlow = "";String connect = "connect";String aboutUs = "";String business = "business";CounterComponent() { // Delay adding the value so CSS has a chance to be drawn. new Timer(new Duration(seconds: 3), () {this.setFlow();});}void setFlow() { theFlow = "New Flow"; // Now refresh the CSS by removing then adding the stylesheet var style = query("head>link[rel=stylesheet]"); style.remove(); var elem = new LinkElement(); elem.attributes["rel"] = "stylesheet"; elem.attributes["href"] = "../stackoverflow.css"; var header = query("head"); header.append(elem);}Even if this is too hacky for you, hopefully it'll help you along :)
UPDATE: Issue raised: https://github.com/dart-lang/web-ui/issues/487
Looked into this a bit more, a simplified repro is:
<!DOCTYPE html><html><head> <title>JS</title> <style>span { display:inline-block; text-transform: uppercase;} </style> <script>window.setTimeout(function() { var s1 = document.getElementById('s1').textContent = 'Something';}, 1000); </script></head><body> <span id='s1'></span>Else</body></html>This appears to be a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=111299