feat: StyleOverride & noShadow

elements/layercontrol/layercontrol.stories.js

@@ -410,10 +410,16 @@ export const HiddenLayers = {
 };
 
 export const SingleLayer = {
-  args: { idProperty: "id", titleProperty: "title", unstyled: false },
+  args: {
+    idProperty: "id",
+    titleProperty: "title",
+    unstyled: false,
+    noShadow: false,
+  },
   render: (args) => html`
     <div style="display: flex">
       <eox-layercontrol-layer
+        .noShadow=${args.noShadow}
         .idProperty=${args.idProperty}
         .titleProperty=${args.titleProperty}
         .unstyled=${args.unstyled}
@@ -449,10 +455,11 @@ export const SingleLayer = {
 };
 
 export const LayerList = {
-  args: { unstyled: false },
+  args: { unstyled: false, noShadow: false },
   render: (args) => html`
     <div style="display: flex">
       <eox-layercontrol-layer-list
+        .noShadow=${args.noShadow}
         .unstyled=${args.unstyled}
       ></eox-layercontrol-layer-list>
       <eox-map
@@ -519,6 +526,7 @@ export const LayerList = {
 export const Tabs = {
   render: () => html`
     <eox-layercontrol-tabs
+      .noShadow=${false}
       .actions=${["delete"]}
       .tabs=${["info", "opacity", "config"]}
     ></eox-layercontrol-tabs>

elements/layercontrol/src/components/layer.js

@@ -15,6 +15,7 @@ export class EOxLayerControlLayer extends LitElement {
     titleProperty: { attribute: "title-property", type: String },
     tools: { attribute: false },
     unstyled: { type: Boolean },
+    noShadow: { type: Boolean },
   };
 
   constructor() {
@@ -41,10 +42,14 @@ export class EOxLayerControlLayer extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+    /**
+     * Renders the element without a shadow root
+     */
+    this.noShadow = true;
   }
 
   createRenderRoot() {
-    return this;
+    return this.noShadow ? this : super.createRenderRoot();
   }
 
   render() {
@@ -104,6 +109,7 @@ export class EOxLayerControlLayer extends LitElement {
             </label>
           </div>
           <eox-layercontrol-layer-tools
+            .noShadow=${true}
             .layer=${this.layer}
             .tools=${this.tools}
             .unstyled=${this.unstyled}

elements/layercontrol/src/components/layerConfig.js

@@ -10,6 +10,7 @@ export class EOxLayerControlLayerConfig extends LitElement {
   static properties = {
     layer: { attribute: false },
     unstyled: { type: Boolean },
+    noShadow: { type: Boolean },
   };
 
   constructor() {
@@ -26,6 +27,15 @@ export class EOxLayerControlLayerConfig extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     * Renders the element without a shadow root
+     */
+    this.noShadow = true;
+  }
+
+  createRenderRoot() {
+    return this.noShadow ? this : super.createRenderRoot();
   }
 
   render() {

elements/layercontrol/src/components/layerGroup.js

@@ -16,6 +16,7 @@ export class EOxLayerControlLayerGroup extends LitElement {
     titleProperty: { attribute: "title-property", type: String },
     tools: { attribute: false },
     unstyled: { type: Boolean },
+    noShadow: { type: Boolean },
   };
 
   constructor() {
@@ -54,10 +55,15 @@ export class EOxLayerControlLayerGroup extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     * Renders the element without a shadow root
+     */
+    this.noShadow = true;
   }
 
   createRenderRoot() {
-    return this;
+    return this.noShadow ? this : super.createRenderRoot();
   }
 
   render() {
@@ -72,6 +78,7 @@ export class EOxLayerControlLayerGroup extends LitElement {
           <details open=${this.group.get("layerControlExpand") || nothing}>
             <summary>
               <eox-layercontrol-layer
+                .noShadow=${true}
                 .layer=${this.group}
                 .titleProperty=${this.titleProperty}
                 .tools=${this.tools}
@@ -80,6 +87,7 @@ export class EOxLayerControlLayerGroup extends LitElement {
               ></eox-layercontrol-layer>
             </summary>
             <eox-layercontrol-layer-list
+              .noShadow=${true}
               .idProperty=${this.idProperty}
               .layers=${this.group.getLayers()}
               .map=${this.map}

elements/layercontrol/src/components/layerList.js

@@ -18,6 +18,7 @@ export class EOxLayerControlLayerList extends LitElement {
     titleProperty: { attribute: "title-property", type: String },
     tools: { attribute: false },
     unstyled: { type: Boolean },
+    noShadow: { type: Boolean },
   };
 
   constructor() {
@@ -56,6 +57,11 @@ export class EOxLayerControlLayerList extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     * Renders the element without a shadow root
+     */
+    this.noShadow = true;
   }
 
   updated() {
@@ -70,7 +76,7 @@ export class EOxLayerControlLayerList extends LitElement {
   }
 
   createRenderRoot() {
-    return this;
+    return this.noShadow ? this : super.createRenderRoot();
   }
 
   render() {
@@ -103,6 +109,7 @@ export class EOxLayerControlLayerList extends LitElement {
                           .getLayers
                           ? html`
                               <eox-layercontrol-layer-group
+                                .noShadow=${true}
                                 .group=${layer}
                                 .idProperty=${this.idProperty}
                                 .map=${this.map}
@@ -115,6 +122,7 @@ export class EOxLayerControlLayerList extends LitElement {
                             `
                           : html`
                               <eox-layercontrol-layer
+                                .noShadow=${true}
                                 .layer=${layer}
                                 .titleProperty=${this.titleProperty}
                                 .tools=${this.tools}

elements/layercontrol/src/components/layerTools.js

@@ -20,6 +20,7 @@ export class EOxLayerControlLayerTools extends LitElement {
     layer: { attribute: false },
     tools: { attribute: false },
     unstyled: { type: Boolean },
+    noShadow: { type: Boolean },
   };
 
   constructor() {
@@ -41,6 +42,11 @@ export class EOxLayerControlLayerTools extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     * Renders the element without a shadow root
+     */
+    this.noShadow = true;
   }
 
   /**
@@ -101,7 +107,7 @@ export class EOxLayerControlLayerTools extends LitElement {
   `;
 
   createRenderRoot() {
-    return this;
+    return this.noShadow ? this : super.createRenderRoot();
   }
 
   render() {
@@ -143,6 +149,7 @@ export class EOxLayerControlLayerTools extends LitElement {
                   </button>
                 </summary>
                 <eox-layercontrol-tabs
+                  .noShadow=${false}
                   .actions=${this._parseActions(this.tools)}
                   .tabs=${this._parseTools(this.tools)}
                   .unstyled=${this.unstyled}

elements/layercontrol/src/components/optionalList.js

@@ -7,6 +7,7 @@ export class EOxLayerControlOptionalList extends LitElement {
     layers: { attribute: false },
     titleProperty: { attribute: "title-property", type: String },
     unstyled: { type: Boolean },
+    noShadow: { type: Boolean },
   };
 
   constructor() {
@@ -33,10 +34,15 @@ export class EOxLayerControlOptionalList extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     * Renders the element without a shadow root
+     */
+    this.noShadow = true;
   }
 
   createRenderRoot() {
-    return this;
+    return this.noShadow ? this : super.createRenderRoot();
   }
 
   render() {

elements/layercontrol/src/components/tabs.js

@@ -8,6 +8,7 @@ export class EOxLayerControlTabs extends LitElement {
     selectedTab: { state: true },
     tabs: { attribute: false },
     unstyled: { type: Boolean },
+    noShadow: { type: Boolean },
   };
 
   constructor() {
@@ -31,6 +32,15 @@ export class EOxLayerControlTabs extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     * Renders the element without a shadow root
+     */
+    this.noShadow = true;
+  }
+
+  createRenderRoot() {
+    return this.noShadow ? this : super.createRenderRoot();
   }
 
   render() {

elements/layercontrol/src/main.js

@@ -41,6 +41,7 @@ export class EOxLayerControl extends LitElement {
     titleProperty: { attribute: "title-property", type: String },
     tools: { attribute: false },
     unstyled: { type: Boolean },
+    styleOverride: { type: String },
   };
 
   constructor() {
@@ -77,6 +78,11 @@ export class EOxLayerControl extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     * Overrides elements current CSS.
+     */
+    this.styleOverride = "";
   }
 
   updated() {
@@ -94,11 +100,13 @@ export class EOxLayerControl extends LitElement {
       <style>
         ${this.#styleBasic}
         ${!this.unstyled && this.#styleEOX}
+        ${this.styleOverride}
       </style>
       ${when(
         this.map,
         () => html`
           <eox-layercontrol-layer-list
+            .noShadow=${true}
             class="layers"
             .idProperty=${this.idProperty}
             .layers=${this.map.getLayers()}
@@ -120,6 +128,7 @@ export class EOxLayerControl extends LitElement {
           )?.length > 0,
         () => html`
           <eox-layercontrol-optional-list
+            .noShadow=${true}
             .idProperty=${this.idProperty}
             .layers=${this.map.getLayers()}
             .titleProperty=${this.titleProperty}