Skip to content

Instantly share code, notes, and snippets.

@treshugart
Created October 26, 2017 05:33
Show Gist options
  • Save treshugart/556e11e43186a0ade04bd6ca166818ef to your computer and use it in GitHub Desktop.
Save treshugart/556e11e43186a0ade04bd6ca166818ef to your computer and use it in GitHub Desktop.
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!');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment