Re: [WICG/webcomponents] Preventing re-renders prior to first call to `connectedCallback()` (Issue #1081)

@br3nt you can do conditional DOM with `<template>`s. Use those as the containers for branches, similar to blocks in JS.

So instead of:

```html
<script type="jst" name="jst-condition" condition>
  $ if (condition) {
    <slot name="true"></slot>
  $ } else {
    <slot name="false"></slot>
  $ }
</script>
```

Try:
```html
<template type="jst" name="jst-condition" condition>
  <template type="if">
    <slot name="true"></slot>
  </template>
  <template type="else">
    <slot name="false"></slot>
  </template>
</script>
```

(using whatever attribute names you want to signify the specific functionality of each `<template>` element).

My project Heximal (declarative HTML templates, custom elements, variables, and more) uses this technique: https://github.com/elematic/heximal/?tab=readme-ov-file#features

I'm happy to talk more about this on the WCCG Discord or more on-topic issues here :)

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1081#issuecomment-2427637874
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1081/2427637874@github.com>