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>
CodePudding user response:
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>