Duck - Slot

Slot

The Duck way of implementing component slots. Slots allow you to render arbitrary content in a component.

Demo

Recipe

function CenterContainer(data) {
  let elem;
  let slot;

  function construct() {
    elem = document.createElement('div');
    elem.className = 'center-container';
    elem.style.position = 'absolute';
    elem.style.left = '50%';
    elem.style.top = '50%';
    elem.style.transform = 'translate(-50%, -50%)';
    update();
  }

  function update() {
    if(slot != data.slot) {
      slot = data.slot;
      while(elem.firstChild) { elem.removeChild(elem.lastChild); }  // flush
      if(slot) { elem.appendChild(slot); }  // append
    }
  }

  function enter() {}
  function exit() {}

  function destroy() {}

  construct();
  return { elem, data, update, enter, exit, destroy };
}

let centerContainer = new CenterContainer({});
let component = new Component({});

centerContainer.data.slot = component.elem;
centerContainer.update();

In Practice

Copy-paste the highlighted sections in the first code snippet into the component with the slot. Then, pass a DOM element into the component as containerComponent.data.slot and then call containerComponent.update().

Walkthrough

Slots in Duck are actually pretty simple. A slot is just a reference to a DOM element. In update() you simply check if data.slot is different than before, remove the old one, and append the new one. If you want to use a component as a slot, you simply pass component.elem.

Notes

Feel free to use as many slots as you want. Just use a different data property name per slot. For example, you can do data.slot1 and data.slot2 (very original).