Use aurelia component in string from api

vNext
1

I get back a string from an api request I make in binding method. This string has text which may have a component like

blah bloop beep shoop <highlight>shquerp merp derp</highlight> plerp.

I have a highlight component that I want to use where the <highlight> is, and I want to have the text inside highlight passed to default slot of highlight component.

Thanks and happy new year!

2

Hi @nnnn! Wish you a happy new year as well!

I think firstly you need, synthetic view. That way, you can hydrate this string into DOM nodes, and attach those to some host node.

If you are using the native slot element in highlight, then that’s probably all you need. In case, you are using au-slot then you can do one of the following:

  • Wrap the projected content for highlightfrom the server; example: <highlight><span au-slot>shquerp merp derp</span></highlight>.
  • Or, use the processContent hook in the highlight to make this wrapping happen on client side.
1 Like