diff --git a/demo/color-picker-basic-demos.js b/demo/color-picker-basic-demos.js
index 8918e32..4782c42 100644
--- a/demo/color-picker-basic-demos.js
+++ b/demo/color-picker-basic-demos.js
@@ -63,10 +63,8 @@ class ColorPickerBasicDemos extends window.DemoReadyEventEmitter(ColorPickerDemo
       </code>
     </p>
     <vaadin-demo-snippet id="color-picker-palettes" when-defined="color-picker">
-      <template preserve-content>
         <color-picker palettes='[["hsl(0,100%,50%)","hsl(45,100%,50%)","hsl(90,100%,50%)","hsl(135,100%,50%)","hsl(180,100%,50%)","hsl(225,100%,50%)","hsl(270,100%,50%)","hsl(315,100%,50%)"],
                       ["hsla(0,100%,50%,0.5)","hsla(45,100%,50%,0.5)","hsla(90,100%,50%,0.5)","hsla(135,100%,50%,0.5)","hsla(180,100%,50%,0.5)","hsla(225,100%,50%,0.5)","hsla(270,100%,50%,0.5)","hsla(315,100%,50%,0.5)"]]'></color-picker>
-      </template>
     </vaadin-demo-snippet>
  `;
   }
diff --git a/src/components/color-picker-responsive-canvas.js b/src/components/color-picker-responsive-canvas.js
index 412f0ee..197ce09 100644
--- a/src/components/color-picker-responsive-canvas.js
+++ b/src/components/color-picker-responsive-canvas.js
@@ -17,7 +17,7 @@ import {IronResizableBehavior} from '@polymer/iron-resizable-behavior';
 class ResponsiveCanvasElement extends ElementMixin(ThemableMixin(Vaadin.DisabledPropertyMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)))) {
 
   static get template() {
-    return html`<style include="color-picker-responsive-canvas">
+    return html`<style include="color-picker-responsive-canvas-styles">
       :host {
         position: relative;
         background: #fff;
diff --git a/src/slider/color-picker-color-slider.js b/src/slider/color-picker-color-slider.js
index a906d5f..f9cc3ec 100644
--- a/src/slider/color-picker-color-slider.js
+++ b/src/slider/color-picker-color-slider.js
@@ -28,9 +28,6 @@ class ColorSliderElement extends ElementMixin(ControlStateMixin(ThemableMixin(mi
       :host {
         position: relative;
         box-sizing: border-box;
-        height: 100%;
-        width: 100%;
-
         display: flex;
         justify-content: center;
         align-items: center;
diff --git a/theme/lumo/components/color-picker-responsive-canvas-styles.js b/theme/lumo/components/color-picker-responsive-canvas-styles.js
index 68d814e..041defd 100644
--- a/theme/lumo/components/color-picker-responsive-canvas-styles.js
+++ b/theme/lumo/components/color-picker-responsive-canvas-styles.js
@@ -4,7 +4,7 @@ import '@vaadin/vaadin-button/theme/lumo/vaadin-button-styles.js';
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `
-<dom-module id="color-picker-responsive-canvas" theme-for="responsive-canvas">
+<dom-module id="color-picker-responsive-canvas-styles" theme-for="responsive-canvas">
   <template>
     <style>
       :host([disabled]),
diff --git a/theme/lumo/palette/color-picker-color-checkbox-styles.js b/theme/lumo/palette/color-picker-color-checkbox-styles.js
index 54daf14..1a8c800 100644
--- a/theme/lumo/palette/color-picker-color-checkbox-styles.js
+++ b/theme/lumo/palette/color-picker-color-checkbox-styles.js
@@ -1,7 +1,7 @@
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `
-<dom-module id="color-checkbox" theme-for="color-checkbox">
+<dom-module id="color-checkbox-styles" theme-for="color-checkbox">
   <template>
     <style>
       :host([checked]) {
diff --git a/theme/lumo/slider/color-picker-color-slider-styles.js b/theme/lumo/slider/color-picker-color-slider-styles.js
index e4b4c30..a07e48c 100644
--- a/theme/lumo/slider/color-picker-color-slider-styles.js
+++ b/theme/lumo/slider/color-picker-color-slider-styles.js
@@ -131,3 +131,20 @@ $_documentContainer.innerHTML = `
 `;
 
 document.head.appendChild($_documentContainer.content);
+
+const $_documentContainer2 = document.createElement('template');
+
+$_documentContainer2.innerHTML = `
+<dom-module id="color-picker-sl-slider" theme-for="sl-slider">
+  <template>
+  <style>
+  :host {
+    height: calc(var(--color-slider-size) * 8);
+    width: 100%;
+  }
+</style>
+</template>
+</dom-module>
+`;
+
+document.head.appendChild($_documentContainer2.content);
diff --git a/theme/material/slider/color-picker-color-slider-styles.js b/theme/material/slider/color-picker-color-slider-styles.js
index 3fc4b5d..3240702 100644
--- a/theme/material/slider/color-picker-color-slider-styles.js
+++ b/theme/material/slider/color-picker-color-slider-styles.js
@@ -8,7 +8,7 @@ const $_documentContainer = html`
         --color-slider-size: calc(36px / 2);
         --color-slider-handle-size: var(--color-slider-size);
 
-        height: var(--color-slider-size);
+        height: var(--color-slider-size); 
         margin: calc(4px / 2) 0;
       }