如何通过编程方式创建slot并将HTMLElement插入其中？

你的代码核心问题是：你把要分配给slot的元素放到了影子DOM内部，而slot.assign()只能处理主DOM（影子DOM外部）的元素。

为什么会返回空数组？ #

当你执行element.shadowRoot.append(slotted)时，slotted元素已经成为影子DOM的一部分了。而手动插槽分配（slotAssignment: 'manual'）的规则是：slot只能接收主DOM树中属于当前自定义元素的子元素（也就是不在任何影子DOM里的元素）。影子DOM内部的元素没法通过assign()分配给同影子DOM里的slot。

修正后的代码 #

把slotted元素添加到主DOM（作为element的子元素），而不是影子DOM：

const element = document.createElement('div');
const slot = document.createElement('slot');
const slotted = document.createElement('span');

document.body.append(element);
element.attachShadow({ mode: 'open', slotAssignment: 'manual'});

element.shadowRoot.append(slot);
// 把slotted加到element的主DOM子节点中，而非影子DOM
element.append(slotted);

slot.assign(slotted);
console.log(slot.assignedNodes()); // 现在会返回包含slotted的数组

额外说明 #

如果你的需求是用影子DOM内部的元素填充slot，不需要用assign()，直接把元素放到slot标签内部即可，这是默认插槽的行为：

// 不需要调用slot.assign()
slot.append(slotted);

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