ShadowDOM Slots

Slotted elements need to be adjacent to the ShadowDOM that contains the slot tags.

by David Iglesias

HTML

<div id='outer' style="border: 1px solid blue; padding: 5px;">
</div>

CSS

div {
  border: 1px solid black;
  padding: 5px;
}

JavaScript

let outer = document.querySelector('#outer');
let outerShadow = outer.attachShadow({mode: 'open'});

let parking = document.getElementById('parking-lot');

let red = document.createElement('div');

let green = document.createElement('div');
let greenShadow = green.attachShadow({mode: 'open'});

red.append(green);
outerShadow.append(red);


let innerSlot = document.createElement('slot');
innerSlot.name = 'inner-slot1';
greenShadow.append(innerSlot);

let outerSlot = document.createElement('slot');
outerSlot.name = 'slot1';
outerSlot.slot = 'inner-slot1';
green.append(outerSlot);


let iframe = document.createElement('iframe');
iframe.slot = 'slot1' ;
iframe.src = 'https://flutter.dev';

outer.append(iframe); // Nope
// green.append(iframe); // Yup, but won't fix the issue