There's no way to opt out of rendering a component entirely.
@11ty/eleventy: 2.0.0
@11ty/eleventy-plugin-webc: 0.9.0
<!-- index.webc -->
<is-lang :lang="meta.locale.lang" is="es">
<h1>Hola!</h1>
</is-lang>
<is-lang :lang="meta.locale.lang" is="en">
<h1>Hello!</h1>
</is-lang>
<is-lang :lang="meta.locale.lang" is="fr">
<h1>Bonjour!</h1>
</is-lang>
<!-- components/is-lang.webc -->
<script webc:setup>
function isLang(inputLang, targetLang) {
inputLang = String(inputLang).toLowerCase();
targetLang = String(targetLang).toLowerCase();
return inputLang && targetLang && (inputLang === targetLang);
}
</script>
<slot webc:if="isLang(lang,is)"></slot>
Output (e.g. meta.locale.lang === 'fr'):
<h1>Hola!</h1>
<h1>Hello!</h1>
<h1>Bonjour!</h1>
Instead of the expected output:
<h1>Bonjour!</h1>
If I add the following line to the end of is-lang.webc, it looks visually correct, but of course, outputs unnecessary markup.
<span webc:if="!isLang(lang,is)"></span>
Outputs:
<span></span>
<span></span>
<h1>Bonjour!</h1>
I believe webc:if should be respected on slots so the redundant inverted "if" is not needed.
I don’t know that I would expect a <slot webc:if> to control whether the host component renders or not.
This is likely a bit more confusing as this is an HTML-only component: https://www.11ty.dev/docs/languages/webc/#html-only-components
That said, I would expect webc:if on a webc:root to do this. https://www.11ty.dev/docs/languages/webc/#attributes-and-webcroot
<template webc:root="override" webc:if="isLang(lang,is)"><slot></slot></template>
Produces:
<h1>Hola!</h1>
<h1>Hello!</h1>
<template><h1>Bonjour!</h1></template>
Adding webc:nokeep:
<template webc:nokeep webc:root="override" webc:if="isLang(lang,is)"><slot></slot></template>
Produces:
<h1>Hola!</h1>
<h1>Hello!</h1>
<h1>Bonjour!</h1>
How do I prevent automatic slot insertion without any output?