我们如何在标记库的帮助下使用litElement来渲染用于创建web组件的html

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>

在浏览器中，它以HTML标记显示

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

在此处输入图像描述

Answer 1

Lit希望您使用unsafeHTML：https://lit.dev/docs/templates/directives/#unsafehtml
另一个依赖。。。并且您可能不需要/不想要shadowDOM

这一切在香草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>