Как программно создать слот и вставить в него HTMLElement?

Я хотел бы, не используя HTML, создать слот и вставить в него элемент. Я попробовал следующее и несколько вариантов, но не повезло. Что я делаю не так? Почему slot.assignedNodes() возвращает пустой массив после того, как я присвоил элемент?

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);
element.shadowRoot.append(slotted);

slot.assign(slotted);
console.info(slot.assignedNodes());

Я даже не могу найти документацию о том, для чего предполагается использовать .assign. Чего вы пытаетесь достичь и где вы читали об этом?

— 22.02.2023 17:44

Смотрите мой ответ ниже; .assign(node) работает только с элементами <SLOT>, когда установлено slotAssignment:"manual". MDN: developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/ass‌ign

— 22.02.2023 18:03

@TKoL developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/ass‌ign

— 22.02.2023 19:48

javascript html web-component shadow-dom slot

22.02.2023 17:29

Как собрать/развернуть часть вашего приложения Angular

Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?

Оптимизация React Context шаг за шагом в 4 примерах

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после...

Интервьюер: Почему '[] instanceof Object' возвращает "true"?

Все мы знаем, что [] instanceof Array возвращает true, но почему [] instanceof Object тоже возвращает true?

Абстрактное синтаксическое дерево (AST) и как оно работает с ReactJS

Абстрактное синтаксическое дерево (AST) - это древовидная структура данных, которая представляет структуру и иерархию исходного кода на языке...

Хук useReducer в react

3 эффективных способа найти максимальное значение в массивах JavaScript

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша проблема здесь:

element.shadowRoot.append(slot);
element.shadowRoot.append(slotted);

Вы назначаете slotted тому же shadowDOM, в котором находится <slot>. Он должен перейти в lightDOM с: element.append(slotted)

Я переписал ваш код, чтобы (надеюсь) он стал понятнее

const DIV = document.createElement('DIV');
DIV.attachShadow({ mode: 'open', slotAssignment: 'manual'});

const SLOT = document.createElement('SLOT');
DIV.shadowRoot.append( SLOT ); // Create SLOT in SHADOWDOM

document.body.append( DIV );

const SPAN = document.createElement('SPAN');
SPAN.innerHTML = "I AM SLOTTED";

DIV.append(SPAN); // put me in LIGHTDOM!

SLOT.assign( SPAN ); // only works because of slotAssignment:"manual" !!

console.info(SLOT.assignedNodes());

Без slotAssignment:"manual" вам не нужен SLOT.assign(SPAN), потому что контент lightDOM автоматически будет помещен в безымянный по умолчанию <slot>

Со стандартным поведением слота

const DIV = document.createElement('DIV');
DIV.attachShadow({ mode: 'open'});

const SLOT1 = document.createElement('SLOT'); // default slot
const SLOT2 = document.createElement('SLOT'); // slot name='title' !
SLOT2.name = "title";
DIV.shadowRoot.append( SLOT1 , SLOT2 ); // Create SLOTs in SHADOWDOM

document.body.append( DIV );

const SPAN = document.createElement('SPAN');
SPAN.slot = "title";
SPAN.innerHTML = "I AM SLOTTED in the SLOT name='title'";

DIV.append(SPAN); // put me in LIGHTDOM!

console.info(SLOT1.assignedNodes()); // nothing assigned to default slot

22.02.2023 18:00