带有附加项的 LitElement 插槽不工作

Question

当我尝试在 LitElement 上的组件上附加插槽子项时，它不起作用并且不接受创建它。

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

这是一个现场演示

至于您以前的代码没有像预期的那样工作的原因，LitElement 在大多数情况下希望您将与模板相关的代码保留在渲染函数中，因为您使用appendChild或类似的 DOM 函数添加的任何内容都将在下次组件更新时被"删除"，因此您必须在每次更新后自行附加它。

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

Answer 2

该元素(Web 组件技术套件的一部分(是 Web 组件中的一个占位符，您可以使用自己的标记填充该占位符，从而允许您创建单独的 DOM 树并将它们一起显示。

您的代码是正确的，但您等待另一种行为 您在 DOM 中等待 spot 元素，但没有出现 spot，因为您没有在 spot 中输入任何数据 当您尝试在通信中使用 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>