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.
