Add custom element example

examples/es2015-custom-element.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Custom map element
+shortdesc: Example of a custom element with a map.
+docs: >
+  The example creates and registers a custom element, `ol-map`, which contains a simple map. **Note:** Only works in browsers that supports `ShadowRoot`.
+tags: "es2015, web-component, custom-element, shadow-dom"
+---
+<ol-map id="map" class="map"></ol-map>

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);

examples/templates/readme.md

@@ -1,19 +1,5 @@
 This folder contains example templates. These templates are used to build the examples in the `examples/` folder. The resulting examples are written to the `build/examples` folder.
 
-Although the main purpose of these examples is to demonstrate how to use the API, they also serve other purposes in the development cycle, and so are not exactly as they would be in normal application code:
+The examples are transpiled to es5. If the name of an example starts with `es2015-`, transpilation will be bypassed. This allows for showing es2015+ features in examples.
-
- * every time the library changes, they are compiled together with the library as a basic check that they remain in sync with the library
-
- * they use a special loader script to enable defining at run time which build mode (raw/debug/advanced) to use
-
-To enable this, examples have the following, not needed in application code:
-
- * each html file loads `loader.js`; application code would not need this, but would instead load the appropriate library build file, either a hosted version or a custom build
-
- * each js file starts with `goog.require` functions, used by the compiler; application code would only have these if the code is to be compiled together with the library and/or Closure library
-
- * some js files use type definitions (comments with @type tags); these are also used by the compiler, and are only needed if the code is to be compiled together with the library
-
- * html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these
 
 At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.

examples/webpack/config.js

@@ -22,7 +22,7 @@ module.exports = {
   stats: 'minimal',
   module: {
     rules: [{
-      test: /\.js$/,
+      test: /^((?!es2015-)[\s\S])*\.js$/,
       use: {
         loader: 'buble-loader'
       },