how to render components with no props?

[edenian-prince]

I'm trying to learn how this all works and wanted to make a simple doc that renders a button like in the svelte tutorials.

I have my svelte component that creates a button and has a count variable, in a file called Test.svelte. I want it to return the button, but I'm not sure how to call that button from the ojs cell. I tried to just call myTest object, I tried things like myTest.button, and then finally just calling my-test in an {=html} cell. Is this something that quarto svelte isn't designed for? like is it more geared towards having a prop and data to render?

Here is my example:

Test.svelte

<!-- this line is needed to add your svelte component to quarto! -->
<svelte:options customElement={{
  tag: "my-test"
}} />

<script>
    let count = $state(0);

    function increment(){
        count += 1
    }
        
</script>

<button onclick={increment}>
    Clicked {count}
</button>

and then in my qmd file:

---
title: svelte testing
filters:
  - quarto-svelte
quarto-svelte:
  use:
    - Test.svelte
---

```{ojs}
myTest = html`<my-test></my-test>`
```

```{ojs}
myTest
```

Is there something in that htmlElement that I can call?

[edenian-prince]

oops! nevermind, i had unused variables in my svelte component and it was causing errors. I checked the console log and that seemed to not let it render

Uncaught (in promise) ReferenceError: assignment to undeclared variable xScale

[jimjam-slam]

Glad to hear you worked it out, @edenian-prince!