带有 appendChild 的 LitElement 插槽不起作用

Question

当我尝试在我的 LitElement 组件上添加 slot child 时，它不起作用并且不接受创建它。

render() {
    return html `<div class="wizard-container ${this.className}"></div>`;
  }

  firstUpdated() {
    let wizardContainer = this.shadowRoot.querySelector('.wizard-container');
    for (let i = 0; i < this.steps; i++) {
      let slot = document.createElement('SLOT');
      slot.setAttribute('name', 'step_' + (i + 1))
      wizardContainer.appendChild(slot);
    };
  }

Answer 1

虽然我个人不建议您为 Web 组件动态创建插槽您可以实现它，您只需要将创建代码保留在渲染函数中

例如，您可以从 steps 变量创建一个数组，然后使用 map 函数对其进行迭代以创建槽，如下所示：

render() {
  return html`<div class="wizard-container ${this.className}">
    ${Array.from({ length: this.steps }, (v, k) => k).map(
      item =>
        html`<slot name="step_${item}"><div>Default content ${item}</div></slot>`
    )}
  </div>`;
}

然后像这样使用你的组件：

<my-element steps="3">
  <div slot="step_1">Custom content</div>
</my-element>

这会导致类似的结果：

默认内容0 自定义内容默认内容 2

Here's a live demo

至于为什么你之前的代码没有像你预期的那样工作，LitElement 在很大程度上希望你将与模板相关的代码保留在渲染函数中，就像你使用 appendChild 或添加的任何东西一样下次组件更新时，类似的 DOM 函数将得到 "deleted"，因此您必须自己在每次更新后附加它

通过直接在渲染方法中添加插槽，可以保证它们不会以意外的方式被删除

Answer 2

元素（Web 组件技术套件的一部分）是 Web 组件内的占位符，您可以用自己的标记填充它，这样您就可以创建单独的 DOM 树并将它们一起呈现。

你的代码是正确的，但你在等待另一个行为您在 DOM 中等待点元素，但是不会出现点，因为您没有在点中输入任何数据当您尝试在组件中使用 spot 时，它会正常工作试试吧

<element-details>
  <span slot="element-name">slot</span>
  <span slot="description">A placeholder inside a web
    component that users can fill with their own markup,
    with the effect of composing different DOM trees
    together.</span>
  <dl slot="attributes">
    <dt>name</dt>
    <dd>The name of the slot.</dd>
  </dl>
</element-details>

带有 appendChild 的 LitElement 插槽不起作用

LitElement slot with appendChild not working

html

javascript

lit-element

lit-html