mirror of https://github.com/sveltejs/svelte
feat: allow for literal property definition with state on classes (#11326)
closes #11316 --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>pull/11373/head
parent
c7bdef595b
commit
2d2508a2cd
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
feat: allow for literal property definition with state on classes
|
@ -0,0 +1,15 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>false</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>true</button>`);
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>false</button>`);
|
||||
}
|
||||
});
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
class Toggle {
|
||||
"aria-pressed" = $state(false);
|
||||
|
||||
toggle(){
|
||||
this["aria-pressed"] = !this["aria-pressed"]
|
||||
}
|
||||
}
|
||||
const toggle = new Toggle();
|
||||
</script>
|
||||
|
||||
<button on:click={() => toggle.toggle()}>{toggle["aria-pressed"]}</button>
|
Loading…
Reference in new issue