Рендеринг динамического html из string.

Столкнулся с такой задачей.

Есть какой-то текст которые я получаю с бэкенда. Мне надо выделить в нем определенные слова.

Обычно в Ангуляре я решал такую задачу очень просто. Брал строку, находил в ней искомые слова, обрамлял html тегами с определенным классом и делал такую штуку <div [innerHTML]="variable"></div>. Мой html появляется на странице и я могу применять к нему стили.

В LWC я нашел только такую магическую компоненту lightning-input-rich-text Но мне не нравится что это будет именно компонента со своим shadow dom и кучей логики на каждый чих. Может есть способ вставить html в template напрямую без всяких дополнительных компонент?

Dmitry Shnyrev

Столкнулся с такой задачей. 

Есть какой-то текст которые я получаю с бэкенда. Мне надо выделить в нем определенные слова.

Обычно в Ангуляре я решал такую задачу очень просто. Брал строку, находил в ней искомые слова, обрамлял html тегами с определенным классом и делал такую штуку [b]<div [innerHTML]="variable"></div>[/b]. Мой html появляется на странице и я могу применять к нему стили.

В LWC я нашел только такую магическую компоненту [url=https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-rich-text/documentation]lightning-input-rich-text[/url] Но мне не нравится что это будет именно компонента со своим shadow dom и кучей логики на каждый чих. Может есть способ вставить html в template напрямую без всяких дополнительных компонент?

В принципе нашел еще такую штуку
Add Custom HTML To a Component
может получится, но опять же придется делать отдельный компонент - слишком большой оверхед для простой задачи. Как интересно это скажется на производительности когда такие компоненты нужно будет использовать в циклах.

Dmitry Shnyrev

В принципе нашел еще такую штуку
[url=https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_email_builder_components_HTML]Add Custom HTML To a Component[/url]
может получится, но опять же придется делать отдельный компонент - слишком большой оверхед для простой задачи. Как интересно это скажется на производительности когда такие компоненты нужно будет использовать в циклах.

Решение по второй ссылке работает как часы. Да и похеру на производительность. Это просто во мне перфекционист все никак не умрет

Dmitry Shnyrev

Решение по второй ссылке работает как часы. Да и похеру на производительность. Это просто во мне перфекционист все никак не умрет :rolling:

Я никогда этаким не заморачивался, наверное не было нужды, мне всегда хватало formatted-rich-text

Maxim Elets

Я никогда этаким не заморачивался, наверное не было нужды, мне всегда хватало formatted-rich-text