LWC not able render Html tag in JS?

Question

How to pass html tag from parent to child component in LWC ?

Parentcmp.js

 msg =''
 init()
  {
   this.msg =`<h1>Watch out!</h1><p>Unauthorized hockeying can result in penalties of up to minutes.</p>`
   }

<c-child message={msg}></c-child>

ChildCmp.js

@api Message;

ChildHtml

 <div>{message}</div>


  Result :<h1>Watch out!</h1><p>Unauthorized hockeying can result in penalties of up to minutes.</p>
  Expected Result :**Watch out! Unauthorized hockeying can result in penalties of up to minutes** 

Not the tag .

How to dynamic binding Html template string value in LWC ?

Answer 1

Use <slot></slot> to pass HTML markup from parent to child Lightning Web Component.

Child

<template>
    <h4>This is a child component</h4>
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>
</template>

Parent

<template>
    <c-slot-child>
        <div slot="slot1">
            Hello
        </div>
        <div slot="slot2">
            <span>
                <p>
                    World!
                </p>
            </span>
        </div>
    </c-slot-child>
</template>

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_slots