webc icon indicating copy to clipboard operation
webc copied to clipboard

There's no way to opt out of rendering a component entirely.

Open kenmorechalfant opened this issue 1 year ago • 2 comments

@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.

kenmorechalfant avatar Feb 26 '23 20:02 kenmorechalfant

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

zachleat avatar Feb 27 '23 14:02 zachleat

<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?

kenmorechalfant avatar Feb 27 '23 21:02 kenmorechalfant