A 716 byte custom element to conditionally render a template.
<if-else>
<template slot="if">
<div>Woo hoo!</div>
</template>
</if-else>
<script type="module">
import "https://unpkg.com/@matthewp/if-else/index.js";
document.querySelector('if-else').value = true;
// Content is now shown!
</script>
Install with npm
npm install @matthewp/if-else
Or Yarn
yarn add @matthewp/if-else
<if-else>
is an element. It has an attribute true
that when set, shows the slot named if
. This works like so:
<if-else true>
<template slot="if">This will be shown</template>
</if-else>
The children of if-else
must be template elements.
If you would like to show an else
condition provide a slot for else
:
<if-else>
<template slot="if">This is NOT shown</template>
<template slot="else">This is shown because no true attribute</template>
</if-else>
Also there is a value
property. It is set to true
when the condition is true and set to false
when the condition is false.
Just remember:
- true: Renders the
if
slot. - false: Renders the
else
slot.
BSD-2-Clause