@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

webc/src/ast.js

Line 146 in a2f548c

TEXT: "@text",

And escaped in

webc/src/ast.js

Line 832 in a2f548c

content = escapeText(content);

That one is invoking

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