将 unsafeHTML 与 lit-element 一起使用时出错

Question

这是我的代码：

import {customElement, LitElement, html, property, css} from 'lit-element';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';

@customElement('my-component')
export class myComponent extends LitElement {
  render() {
    const markup = '<div>Some HTML to render.</div>';
    return html`
      ${unsafeHTML(markup)}
    `;
  }
}

但是当我在浏览器上运行时，我得到这样的错误：

part => { if (!(part instanceof NodePart)) { throw new Error('unsafeHTML can only be used in text bindings'); } const previousValue = previousValues.get(part); if (previousValue !== undefined && isPrimitive(value) && value === previousValue.value && part.value === previousValue.fragment) { return; } const template = document.createElement('template'); template.innerHTML = value; // innerHTML casts to string internally const fragment = document.importNode(template.content, true); part.setValue(fragment); previousValues.set(part, { value, fragment }); }

enter image description here

我的代码很简单，但我仍然遇到错误，所以任何人都可以向我建议如何让它工作。

Answer 1

这种类型的error通常是由多个版本的lit-html在同一个项目中交互引起的。一个常见的情况是当您开始使用 LitElement（它在内部使用 lit-html 的一个版本）然后单独安装 lit-html 以便能够使用内置指令。这有时会导致重复，可以通过运行

轻松修复

$ npm dedupe

此外，对于 yarn 用户：

$ yarn install --flat

在这种情况下会有所帮助。

将 unsafeHTML 与 lit-element 一起使用时出错

Error when using unsafeHTML with lit-element

javascript

web-component

lit-element

lit-html