11ty / webc

Single File Web Components
MIT License
1.32k stars 38 forks source link

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

Open kenmorechalfant opened 1 year ago

kenmorechalfant commented 1 year ago
@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.

zachleat commented 1 year ago

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

kenmorechalfant commented 1 year ago
<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?