Add custom element example

examples/es2015-custom-element.js

@@ -0,0 +1,43 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+
+class OLComponent extends HTMLElement {
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({mode: 'open'});
+    const link = document.createElement('link');
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('href', 'css/ol.css');
+    this.shadow.appendChild(link);
+    const style = document.createElement('style');
+    style.innerText = `
+      :host {
+        display: block;
+      }
+    `;
+    this.shadow.appendChild(style);
+    const div = document.createElement('div');
+    div.style.width = '100%';
+    div.style.height = '100%';
+    this.shadow.appendChild(div);
+
+    this.map = new Map({
+      target: div,
+      layers: [
+        new TileLayer({
+          source: new OSM()
+        })
+      ],
+      view: new View({
+        center: [0, 0],
+        zoom: 2
+      })
+    });
+
+  }
+}
+
+customElements.define('ol-map', OLComponent);