Question

我想知道如何使LitElement类似于Polymer 2/3模板化器，即从light dom（childElement）中获取模板，模板化并标记它。它曾经是可能的，并且在dom-repeat等元素中使用，但是在LitElement及其内部使用标记字符串模板的情况下，我看不到如何使元素接受模板以供内部使用，但是该模板由附带元素的用户（即与允许重复使用的dom-repeat相同）。

我知道编写代码时该怎么做，我只想允许我的自定义元素的使用者能够提供模板及其绑定，而不是继承我的元素，而是使用更简单的元素并且已经是由polymer2 / 3制成的众所周知的html组成

Answer 1

你真的不能只用 lit-html 来做到这一点，因为一切都是建立在 JS 模板字符串上的。您可能对基于 lit-html 构建的 Stampino 感兴趣。在撰写本文时，它处于预发布阶段。

<template id="root">
  <h1>{{ title }}</h1>
  <ul>
    <template type="repeat" repeat="{{ items }}">
      <li>{{ toUpperCase(item) }}</li>
    </template>
  </ul>
</template>

<output></output>

<script type="module">
  import { render } from 'stampino';
  render(
    document.getElementById('root'),
    document.querySelector('output'),
    {
      letters: ['a', 'b', 'c'],
      title: 'Hello World',
      toUpperCase(string) {
        return string.toUpperCase();
      }
    }
  );
</script>

这会将以下内容呈现给 <output> 元素：

<h1>Hello World</h1>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

如果您已经在 lit-html 模板中编写 HTML，那么可能适合您使用的模式就是所谓的“渲染道具”。这是一个简化的示例：

html`
  <list-renderer
      .items="${[...items]}"
      .template="${item => html`
         <list-item>${item}</list-item>
  `}"></list-renderer>
`;

其中，

class ListRenderer extends LitHTML {
  render() {
    return html`
      <ul>
        ${this.items.map(item => this.template(item))}
      </ul>
    `;
  }
}

LitElement结合使用模板

1 个答案: