Issue
Say I have a custom component with
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
where the referenced style sheet has an entry
ul .foo {
list-style-type: none;
}
The problem is that I can’t get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn’t work either. It does a weird thing where the class of the ul becomes “elem_foo”.
Solution
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.
Answered By – Seth Ladd
Answer Checked By – Jay B. (FlutterFixes Admin)