设置slotAssignment为manual后调用slot.assign()无法分配内容

问题原因 #

你的代码中插槽（<slot>）位于<ol>内部，而HTML规范要求<ol>的直接子元素必须是<li>。当你通过slot.assign()将<li>分配给插槽时，这个<li>会成为插槽的子元素（即<ol>的孙子元素），不符合<ol>的结构要求，因此浏览器不会渲染该列表项，导致内容无法显示。slot.assign()方法本身的调用是符合规范的，无报错也证明了这一点。

解决方案 #

方案1：调整插槽位置适配单列表项

修改模板结构，将插槽放在<li>内部，这样分配的内容可以直接作为列表项的内容显示：

<template id="todo_template">
  <h1>TODO LIST</h1>
  <ol>
    <li><slot></slot></li>
  </ol>
</template>

对应的JS代码调整为分配文本节点（或直接文本内容）：

connectedCallback() {
    const todoTemplate = document.getElementById("todo_template");
    const todoApp = todoTemplate.content.cloneNode(true);
    this.shadowRoot.appendChild(todoApp);

    const slot = this.shadowRoot.querySelector("slot");
    const textNode = document.createTextNode("Buy food");
    slot.assign(textNode);
}

方案2：直接管理列表元素（更符合列表场景）

如果需要支持多个列表项，建议直接操作<ol>的子元素，无需依赖插槽：

<template id="todo_template">
  <h1>TODO LIST</h1>
  <ol id="todo-list"></ol>
</template>

对应的JS代码：

connectedCallback() {
    const todoTemplate = document.getElementById("todo_template");
    const todoApp = todoTemplate.content.cloneNode(true);
    this.shadowRoot.appendChild(todoApp);

    const ol = this.shadowRoot.getElementById("todo-list");
    const li = document.createElement("li");
    li.textContent = "Buy food";
    ol.appendChild(li);
}

方案3：用插槽分配完整列表容器（保留手动插槽逻辑）

如果一定要保留手动插槽分配的逻辑，可以将包含<li>的完整<ol>分配给插槽：

<template id="todo_template">
  <h1>TODO LIST</h1>
  <slot name="todo-container"></slot>
</template>

对应的JS代码：

connectedCallback() {
    const todoTemplate = document.getElementById("todo_template");
    const todoApp = todoTemplate.content.cloneNode(true);
    this.shadowRoot.appendChild(todoApp);

    const slot = this.shadowRoot.querySelector('slot[name="todo-container"]');
    const ol = document.createElement("ol");
    const li = document.createElement("li");
    li.textContent = "Buy food";
    ol.appendChild(li);
    slot.assign(ol);
}

内容的提问来源于stack exchange，提问作者Anil kumar