7

谁能告诉我为什么我不能在 lit-html 的html方法中使用变量？

const h1 = 'h1';
return html`
  <${h1} class="a-heading ${classes}">
    <slot></slot>
  </${h1}>
`;

如果我${h1}用h1那个替换它没有问题。

4

2 回答 2

6

对于对我的解决方案感兴趣的每个人：unsafeHTML如果可以，请使用（如果您在其中包含任何输入字段，则不应这样做）。

    import { unsafeHTML } from 'lit-html/directives/unsafe-html';
   
     // ...

    const template = `
      <h${this.rank} class="a-heading">
        <slot></slot>
      </h${this.rank}>
    `;

    return html`
      ${unsafeHTML(template)}
    `;
于 2020-01-10T14:12:07.533 回答
6

lit-html不允许使用动态标记名称的原因是 lit-html 通过用特殊标记替换表达式然后<template>使用结果创建 HTML 元素来工作。

这里的关键，稍微微妙的部分是它不使用值来创建模板。在模板被克隆之后，它们被插入到模板中，也就是在 HTML 被解析之后。没有办法进入 DOM 树并更改一个元素的标签名称。我们必须删除元素，替换它，设置任何绑定，并将任何子元素移动到新元素中。这将非常昂贵。

我们确实计划支持在创建 HTML之前<template>插入的静态绑定（一旦我们可以放弃对没有完全正确实现模板文字的旧版 Edge 浏览器的支持） ，这将允许对标签名称使用表达式。然而，静态绑定不能用新数据更新——模板创建时的值是唯一使用的值。

于 2020-01-21T02:15:33.843 回答