Javascript Lit元素：从属性字符串输出原始HTML

我是Lit元素的新手，在作为属性字符串传递时输出原始HTML时遇到问题。我想有更好的方法来实现这一点，任何帮助都将不胜感激

JS Fiddle在这里显示我的问题：

从导入{LitElement，html}https://unpkg.com/@聚合物/照明-element@latest/lit element.js？模块'；
类MyElement扩展了LitElement{
静态获取属性（）{
返回{str:String}
}
render（）{
返回html`${this.str}`；
}  
}
自定义元素。定义（'my-element'，MyElement）；

输出：

---

line1
line2

我找到了一个使用文档片段的解决方法。不确定它是否理想，但它按预期工作

JS Fiddle显示解决方案：

从导入{LitElement，html}https://unpkg.com/@聚合物/照明-element@latest/lit element.js？模块'；
类MyElement扩展了LitElement{
静态获取属性（）{
返回{str:String}
}
returnString（）{
var frag=document.createRange（）.createContextalFragment（`${this.str}`）；
返回碎片；
}
render（）{
返回html`${this.returnString（）}`；
}  
}
自定义元素。定义（'my-element'，MyElement）；

这是一个危险的操作，因此您必须明确选择allowint呈现HTML。确保您的HTML是安全的，并且不是由用户设置的。您必须从lit html导入并将

this.str

包装在其中

从导入{LitElement，html}https://unpkg.com/@聚合物/照明-element@latest/lit element.js？模块'；
从导入{unsafeHTML}https://unpkg.com/lit-html@最新的/directions/unsafe html.js？模块'；
类MyElement扩展了LitElement{
静态获取属性（）{
返回{str:String}
}
render（）{
返回html`${unsafeHTML（this.str）}`；
}  
}
自定义元素。定义（'my-element'，MyElement）；

谢谢。我非常感谢你的回答。我知道这个范例的安全性问题，但是是的，用户永远不会设置传递的值。再次感谢你！你是个救生员

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>

<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

  class MyElement extends LitElement {

      static get properties() { 
        return { str: String }
     }

    render() {
      return html `${this.str}`;
    }  
  }

  customElements.define('my-element', MyElement);
</script>

<my-element str="line1<br />line2"></my-element>

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>

<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

  class MyElement extends LitElement {

      static get properties() { 
        return { str: String }
     }

    returnString() {
        var frag = document.createRange().createContextualFragment(`${ this.str }`);
      return frag;
    }

    render() {
      return html `${ this.returnString() }`;
    }  
  }

  customElements.define('my-element', MyElement);
</script>

<my-element str="line1<br />line2"></my-element>