@text attribute and Font Awesome Icons

[RMcNeely]

I believe this is a WebC bug after playing around with the code but it may also be related to Font Awesome Icon replacement.

I am working on a 11ty + WebC project utilizing FontAwesome for the icons on my buttons and I ran into an issue where the @text attribute replacement is overwriting the included icon element.

If my code looks like this inside my summary.webc component:

<output>
  <--- more stuff here -->
  <button id="email-quote" type="button" class="btn btn-primary w-fit self-center" @text="buttonText"><i class="fa-solid fa-paper-plane"></i>Email Quote</button>
</output>

Putting the @text attribute in a sibling component of the Icon element seems to be a decent workaround. Like this:

<output>
  <--- more stuff here -->
  <button id="email-quote" type="button" class="btn btn-primary w-fit self-center"><i class="fa-solid fa-paper-plane"></i><p @text="buttonText">Email Quote</p></button>
</output>

My guess is that @text is doing innerHTML replacement instead of innerText replacement?

[Ryuno-Ki]

It's defined in

https://github.com/11ty/webc/blob/a2f548c23490929aa8c9cd25159549eba3e869c7/src/ast.js#L146

And escaped in

https://github.com/11ty/webc/blob/a2f548c23490929aa8c9cd25159549eba3e869c7/src/ast.js#L832

That one is invoking

https://github.com/fb55/entities/blob/f69fb1cd147a189401c01212f9586265f78d5915/src/escape.ts#L134-L148

[zachleat]

I believe this one is a duplicate of #208, fix shipping with v0.12.0-beta.1