staltz · xtianjohns · Oct 11, 2017 · Oct 13, 2017 · Oct 17, 2017 · xtianjohns
diff --git a/dist/element.js b/dist/element.js
diff --git a/dist/element.js.map b/dist/element.js.map
diff --git a/src/element.js b/src/element.js
@@ -0,0 +1,26 @@
+import run from '@cycle/rxjs-run';
+import { Observable } from 'rxjs/Observable';
+import { makeDOMDriver, h } from '@cycle/dom';
+import { Sandbox } from './components/sandbox/sandbox';
+import { merge } from 'ramda';
+
+class SandboxElement extends HTMLElement {
+  connectedCallback() {
+    let key = this.attributes.key.value;
+    function main( sources ) {
+      const sandbox = Sandbox( sources );
+      const sinks = {
+        DOM: sandbox.DOM,
+        store: Observable.merge( sandbox.data ).scan(merge, { route: key, inputs: undefined }),
+      };
+      return sinks;
+    }
+
+    run(main, {
+      DOM: makeDOMDriver(this),
+      store: sources => sources,
+    });
+  }
+}
+
+customElements.define( 'rx-marbles', SandboxElement );
diff --git a/test-custom-element.html b/test-custom-element.html
@@ -6,7 +6,8 @@
     <meta name="description" content="Learn, build, and test Rx functions on Observables">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>RxMarbles: Interactive diagrams of Rx Observables</title>
-    <script src="dist/js/element.js"></script>
+    <script src="https://rawgit.com/webcomponents/custom-elements/master/src/native-shim.js"></script>
+    <script src="dist/element.js"></script>
   </head>
   <body>
     <!--[if lt IE 7]>

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,11 +27,14 @@ if (isProduction) {
 }
 
 module.exports = {
-  entry: './src/app.js',
+  entry: {
+    app: './src/app.js',
+    element: './src/element.js'
+  },
 
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'app.js',
+    filename: '[name].js',
   },
 
   devtool: isProduction ?