incompatibility between webc:setup function, webc:root="override", and dynamic attribute

[awmottaz]

If you define a function in <script webc:setup> and try to call it to set a dynamic attribute value on an element that is also webc:root="override", then the build will fail with an error.

Example bad component:

<script webc:setup>
  const getVal = () => "value";
</script>

<div webc:root="override" :data-value="getVal()"></div>

$ DEBUG=* npx @11ty/eleventy
[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble rendering webc template ./index.webc (via TemplateContentRenderError)
[11ty] 2. Evaluating a dynamic attribute failed: `:data-value="getVal()"`.
[11ty] Original error message: getVal is not a function (via Error)
[11ty] Wrote 0 files in 0.07 seconds (v2.0.1)

Components that are nearly the same but work as expected

Using a static value instead of a function:

<script webc:setup>
  const val = "value";
</script>

<div webc:root="override" :data-value="val"></div>

<!-- output: -->
<div data-value="value"></div>

Not using webc:root="override":

<script webc:setup>
  const getVal = () => "value";
</script>

<div :data-value="getVal()"></div>

<!-- output: -->
<div data-value="value"></div>

Setting @text instead of an attribute:

<script webc:setup>
  const getVal = () => "value";
</script>

<div webc:root="override" @text="getVal()"></div>

<!-- output: -->
<div>value</div>

[dwighthouse]

Ran into this one myself today. Pulling my hair out trying to figure out what was going on.

Edit: So now knowing that webc:root="override somehow interferes, I can get around this by putting webc:nokeep on the component at the "callsite".