How do we render the html for creating a web component using litElement with the help of marked library

Question

my-element.ts

import marked from 'marked';

@customElement('my-element')
export class MyElement extends LitElement {
  constructor() {
    super();
    this.markdown = '<h2>Hello World</h2>';
  }

  @property()
  markdown;

  override render() {
    return html`${marked(this.markdown)}`;
  }
}

index.html

<my-element id="md"></my-element>

<script>
    document.getElementById('md').markdown = '## hello world';
</script>

In Browser, It's showing with HTML tag

<h2 id="hello-world">hello world</h2>

enter image description here

Answer 1

Lit wants you to use unsafeHTML: https://lit.dev/docs/templates/directives/#unsafehtml
Yet another dependency... and you probably do not need/want shadowDOM

It is all so much easier in vanilla JavaScript:

<script>
  customElements.define("marked-text", class extends HTMLElement {
    connectedCallback() {
      setTimeout( () => this.innerHTML = marked(this.innerHTML) )
    }
  })
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/marked/3.0.7/marked.min.js"></script>

<marked-text>
  # Hello Web Components
  Just great what you can do with **Vanilla** JavaScript!
</marked-text>

<style>
  marked-text strong { font-size:1.2em; color:green }
</style>