I was experimenting with adding CSS to the Table component, to see if I could pass in styles from my component that has a table in it. I put the following in my <style> section to make it obvious if the style had been applied:
I then wrote <Table class="foo">...</Table> and no red border appeared; inspecting the HTML showed there was no "foo" class listed on the <table> element or any of its children.
Changing class to divClass worked: a <div class="foo"> was wrapped around the <table>, which displayed a thick red border so I knew my test was successful. But the class attribute on the Table component had no effect, where I had been expecting it to add the chosen class(es) to the <table> element.
I have not yet tried with other components in svelte-5-ui-lib, but I'm guessing they would show similar behavior.
Note: the browser I use is actually Firefox 129; I have no idea why npx envinfo below didn't pick up Firefox and only sees Chromium. But all browsers will behave the same way with this particular issue, since it's a matter of the string "foo" not being added to the class attribute of the element. (Indeed, I tested with Chromium and had the same results).
Describe the bug
I was experimenting with adding CSS to the Table component, to see if I could pass in styles from my component that has a table in it. I put the following in my
<style>
section to make it obvious if the style had been applied:I then wrote
<Table class="foo">...</Table>
and no red border appeared; inspecting the HTML showed there was no "foo" class listed on the<table>
element or any of its children.Changing
class
todivClass
worked: a<div class="foo">
was wrapped around the<table>
, which displayed a thick red border so I knew my test was successful. But theclass
attribute on the Table component had no effect, where I had been expecting it to add the chosen class(es) to the<table>
element.I have not yet tried with other components in svelte-5-ui-lib, but I'm guessing they would show similar behavior.
Reproduction
Note: the browser I use is actually Firefox 129; I have no idea why
npx envinfo
below didn't pick up Firefox and only sees Chromium. But all browsers will behave the same way with this particular issue, since it's a matter of the string "foo" not being added to the class attribute of the element. (Indeed, I tested with Chromium and had the same results).Version and System Info