Shadow DOM

docs/index.html

@@ -24,6 +24,19 @@ <h2>Basic map</h2>
     ></div>
   </div>
 
+
+  <div class="example">
+    <h2>Basic map (enable Shadow DOM)</h2>
+    <div
+      class="geolonia"
+      data-lat="35.681236"
+      data-lng="139.767125"
+      data-zoom="16"
+      data-geolonia-fork-me-disabled="on"
+      data-shadow-dom="on"
+    ></div>
+  </div>
+
   <div class="example">
     <h2>Custom color of marker</h2>
     <div
@@ -93,20 +106,6 @@ <h2>Pitch and Bearing</h2>
     <h2>Custom HTML Marker</h2>
     <h3>HTML for the Custom Marker</h3>
     <pre><code>&lt;div id=&quot;custom-marker&quot;&gt;&lt;img src=&quot;./icon.png&quot; alt=&quot;&quot;&gt;&lt;/div&gt;</code></pre>
-    <h3>CSS for the Custom Marker</h3>
-    <pre>#custom-marker
-{
-  width: 50px;
-  height: 50px;
-  cursor: pointer;
-  display: none;
-}
-
-#custom-marker img
-{
-  max-width: 100%;
-  height: auto;
-}</pre>
 
     <h3>HTML for the Map</h3>
     <div
@@ -116,7 +115,25 @@ <h3>HTML for the Map</h3>
       data-zoom="12"
       data-custom-marker="#custom-marker"
       data-custom-marker-offset="0, -25"
-    ><h3>Hello World!</h3></div>
+      data-shadow-dom="on"
+      data-inner-shadow-style="
+    #custom-marker
+    {
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      display: none;
+    }
+
+    #custom-marker img
+    {
+      max-width: 100%;
+      height: auto;
+    }
+  "
+  >
+    <h3>Hello World!</h3>
+</div>
   </div>
 
 

docs/style.css

@@ -34,17 +34,3 @@ footer
   top: 0;
   right: 0;
 }
-
-#custom-marker
-{
-  width: 50px;
-  height: 50px;
-  cursor: pointer;
-  display: none;
-}
-
-#custom-marker img
-{
-  max-width: 100%;
-  height: auto;
-}

src/embed.js

@@ -4,8 +4,6 @@
 
 import 'intersection-observer';
 import maplibregl from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import './style.css';
 import GeoloniaMap from './lib/geolonia-map';
 import GeoloniaMarker from './lib/geolonia-marker';
 import { AmazonLocationServiceMapProvider } from './lib/providers/amazon';

src/lib/geolonia-map.js

@@ -10,6 +10,9 @@ import SimpleStyleVector from './simplestyle-vector';
 
 import * as util from './util';
 
+import maplibreglCss from '!!css-loader!maplibre-gl/dist/maplibre-gl.css';
+import mainCss from '!!css-loader!../style.css';
+
 const isCssSelector = (string) => {
   if (/^https?:\/\//.test(string)) {
     return false;
@@ -35,17 +38,42 @@ const isCssSelector = (string) => {
  */
 export default class GeoloniaMap extends maplibregl.Map {
   constructor(params) {
-    const container = util.getContainer(params);
-    if (container.geoloniaMap) {
-      return container.geoloniaMap;
+    const rawContainer = util.getContainer(params);
+    if (rawContainer.geoloniaMap) {
+      return rawContainer.geoloniaMap;
     }
 
-    const atts = parseAtts(container, params);
-    const options = util.getOptions(container, params, atts);
+    const atts = parseAtts(rawContainer, params);
+    const options = util.getOptions(rawContainer, params, atts);
 
     // Getting content should be fire just before initialize the map.
-    const content = container.innerHTML.trim();
-    container.innerHTML = '';
+    const content = rawContainer.innerHTML.trim();
+    rawContainer.innerHTML = '';
+
+    // Check if Shadow DOM is available
+    const useShadow = !!HTMLElement.prototype.attachShadow && atts.shadowDom === 'on';
+    let container = rawContainer;
+
+    if (useShadow) {
+      const shadowRoot = rawContainer.attachShadow({mode: 'open'});
+
+      const innerCssEl = document.createElement('style');
+      innerCssEl.innerHTML = `:host {display: block; contain: content;} ${maplibreglCss}\n${mainCss}\n${atts.innerShadowStyle}`;
+      shadowRoot.appendChild(innerCssEl);
+
+      container = document.createElement('div');
+      options.container = container;
+      container.className = 'geolonia-shadow-map';
+      shadowRoot.appendChild(container);
+    } else {
+      const existingStyleEl = document.getElementById('_geolonia_map_style');
+      if (!existingStyleEl) {
+        const styleEl = document.createElement('style');
+        styleEl.id = '_geolonia_map_style';
+        styleEl.innerHTML = `${maplibreglCss}\n${mainCss}`;
+        document.head.appendChild(styleEl);
+      }
+    }
 
     let loading;
     if (atts.loader !== 'off') {

src/lib/parse-atts.js

@@ -53,6 +53,8 @@ export default (container, params = {}) => {
     minZoom: '',
     maxZoom: 20,
     '3d': '',
+    shadowDom: 'off',
+    innerShadowStyle: '',
     ...container.dataset,
   };
 };

src/lib/parse-atts.test.js

@@ -50,6 +50,8 @@ describe('tests for parse Attributes', () => {
       loader: 'on',
       minZoom: '',
       maxZoom: 20,
+      shadowDom: 'off',
+      innerShadowStyle: '',
       '3d': '',
     });
   });

src/style.css

@@ -109,3 +109,8 @@
   background-position: center center;
   background-size: cover;
 }
+
+.geolonia-shadow-map {
+  width: 100%;
+  height: 100%;
+}