streamed-web-components.js

const express = require('express');
const app = express();

const delay = (...args) =>
  args.reduce(
    (prev, curr) =>
      prev.then(() => new Promise(yey => setTimeout(() => yey(curr()), 2000))),
    Promise.resolve()
  );

const xApp = `
  <script>
    class App extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
      }
      connectedCallback() {
        this.shadowRoot.innerHTML = '<div style="border: 1px solid black; padding: 10px;"><slot></slot></div>';
      }
    }
    customElements.define('x-app', App);
  </script>
`;

const xChild = `
  <script>
    class Child extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
      }
      connectedCallback() {
        this.shadowRoot.innerHTML = '<span style="background-color: blue; color: white;"><slot></slot></span>';
      }
    }
    customElements.define('x-child', Child);
  </script>
`;

app.get('/', function(req, res) {
  res.append('Content-Type', 'text/html');
  delay(
    () => res.write(xApp + '<x-app>app open -&gt; '),
    () => res.write('<x-child>child open -&gt; '),
    () => res.write(xChild + 'Content'),
    () => res.write(' &lt;- child closed</x-child>'),
    () => res.write(' &lt;- app closed</x-app>'),
    () => res.end()
  );
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});