custom element Composition and slots

<!DOCTYPE html>
<html>

<head>
  <!-- web components polyfills -->
  <script src="//unpkg.com/@webcomponents/custom-elements"></script>
  <script src="//https://unpkg.com/@webcomponents/webcomponentsjs"></script>
  <script src="//unpkg.com/@webcomponents/shadydom"></script>
  <link rel="stylesheet" href="//unpkg.com/@webcomponents/shadycss">
</head>

<body>
  <script>
    class FancyTabs extends HTMLElement {
      constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `
          <div>Shadow-DOM contents</div>
          <slot></slot>
        `;
      }
    }
    customElements.define('fancy-tabs', FancyTabs);
  </script>
  <h1>Shadow DOM</h1>
  <h2>Composition and Slots</h2>

  <fancy-tabs>
    User contents
  </fancy-tabs>
</body>

</html>