Conditional rendering

[DrSensor]

This framework doesn't have special syntax or attribute for doing conditional rendering (i.e :if :else). However, you can use slot #8 to achieve this.

export default class {
  buttonText = "Show"

  show = false // bind to slot attribute

  toggle() {
    this.show = !this.show
    this.buttonText = this.show ? "Hide" : "Show"
  }
}

<render-scope>
  <script type="module" src="script.js"></script>
  <form method="post">
    <slot/>
    <input disabled type="submit" value="Submit" :: disabled="!show">
  </form>

  <template :: slot:="show">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" required>
  </template>

  <button :: on:click="toggle" value:="buttonText"/>
</render-scope>

Both normal slot (<slot>) and named slot (<slot name="…">) are supported

Rejected

```html ``` Changing `isCountEqualTo5` property will perform check whatever `[\\:if="isCountEqualTo5"]` and the next sibling `[\\:else]` should be inserted or removed. > **Note** ~~use `` in the shadow root to keep the logic simple~~ > Alternatively there is no need to implement this feature. Just use `` tag and `slot:="prop"` attribute for conditional rendering.

Rejected

```html ``` > **Warning** this feature require basic math parser to avoid CSP violation via Javascript `eval`. > - The parser should handle: [relational operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators), [equality operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#equality_operators), and [binary logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#binary_logical_operators) > - The parser and it's implementation should be loaded (`await import()`) only when `:if` attribute is found > - Re-evaluate the expression when the dependencies/properties change (similar to how reactive computation works) Rejected because the size can be quite big.

Rejected

Using svelte syntax is rejected. It's possible but implementing it in JavaScript can be slow in performance and bloat the bundle size. Compared to Vue or Alpine, Svelte syntax is more like parsing `.innerHTML` string rather than traversing elements then parsing it's `.textContent`. Ideally the parser should be implemented in WebAssembly but it still unknown how big it can be 🤔 (can **svelte-parser.wasm** be <2kB?)