ShadowDOM

Simple example of a ShadowDOM slot.

by David Iglesias

HTML

<div id="flt-glass-pane" class="container">
  <div slot="potato" class="potato">
    Content
  </div>
</div>

CSS

.container {
  border: 1px solid green;
  padding: 10px;
}

.potato {
  background: #fee;
  color: red;
}

JavaScript

// Find the container, attach a ShadowDOM to it,
// and add a slot named "potato".
(function setupShadowDom() {
  const container = document.querySelector('#flt-glass-pane');
  const shadow = container.attachShadow({
    mode: 'open'
  });
  let slot = document.createElement('slot');
  // Must match "slot" property of content
  slot.name = "potato";
  // This makes the content show up inside the shadow-dom
  shadow.append(slot);
})();