Edge browser support and information (trailheadapps#42)

README.md

@@ -36,3 +36,11 @@ yarn watch
 ```
 
 4. Enjoy the app!
+
+## Modifications for Edge browser users
+
+The Edge browser currently doesn't support native shadow DOM. If you want to use this application you have to manually add the synthetic shadow DOM to your clone. Add to the first line of the [index.js](https://github.com/trailheadapps/lwc-recipes-oss/blob/master/src/index.js#L1) this code:
+
+```javascript
+import '@lwc/synthetic-shadow';
+```

src/index.html

@@ -133,6 +133,6 @@ <h1 class="title">Lightning Web Components Recipes</h1>
             </ul>
         </header>
 
-        <ui-app></ui-app>
+        <div id="main"></div>
     </main>
 </html>

src/index.js

@@ -1,7 +1,9 @@
-import { buildCustomElementConstructor, register } from 'lwc';
+import { createElement, register } from 'lwc';
 import { registerWireService } from '@lwc/wire-service';
 import UiApp from 'ui/app';
 
 registerWireService(register);
 
-customElements.define('ui-app', buildCustomElementConstructor(UiApp));
+const app = createElement('my-app', { is: UiApp });
+// eslint-disable-next-line @lwc/lwc/no-document-query
+document.querySelector('#main').appendChild(app);