webc
webc copied to clipboard
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 slot
s 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?