4

Specifically I want to create some SLDS tooltip content that includes HTML such as <br/> in my JavaScript LWC controller.

There is aura:unescapedHtml and this answer Using unescape HTML in lightning web component - use lightning-formatted-rich-text - but neither seem elegant to me.

Am I missing a better approach?

Improve this question
3
  • 1
    Define "elegant"? What are you hoping you'll find?
    – sfdcfox ♦
    Commented Mar 9, 2020 at 20:01
  • lightning-unescaped-html or Angular's <div [innerHTML]=propertyHoldingHtml"></div>.
    – Keith C
    Commented Mar 9, 2020 at 20:03
  • What about lwc:dom="manual", which would give you an element with more malleability?
    – sfdcfox ♦
    Commented Mar 9, 2020 at 20:12

1 Answer 1

Reset to default
3

I side-stepped the problem by turning my tooltip data into an array of lines so the template could insert the markup, the most basic <br/> in this case:

<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom schedule-tooltip">
    <div class="slds-popover__body tooltip">
        <template for:each={tooltipLines} for:item="line">
            {line}<br key={line}/>
        </template>
    </div>
</div>

which I suppose is the correct division of responsibilities between the template and the JavaScript. But not convenient for the developer.

Improve this answer
3
  • I clearly misunderstood your question, but yes, that's probably the closest approximation. This is more a security feature than bug, but definitely rather annoying.
    – sfdcfox ♦
    Commented Mar 9, 2020 at 22:21
  • @sfdcfox Your answer is legitimate and answers the question; my particular problem didn't require arbitrary markup but others might. Perhaps the "best" answer is to write an LWC that does what aura:unescapedHtml does...
    – Keith C
    Commented Mar 9, 2020 at 22:52
  • 1
    I concur. I'll see what I can come up with, not sure if the framework will like me for it.
    – sfdcfox ♦
    Commented Mar 9, 2020 at 23:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .