define all the initial styles inside the component

vaadin · Apr 6, 2022 · eb51b9f · eb51b9f
1 parent 2959229
commit eb51b9f
Showing 1 changed file with 16 additions and 31 deletions.
diff --git a/packages/select/src/vaadin-select-value-button.js b/packages/select/src/vaadin-select-value-button.js
@@ -6,35 +6,6 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-select-value-button',
-  css`
-    :host {
-      min-width: 0;
-      width: 0;
-    }
-
-    ::slotted(:not([slot])) {
-      padding-left: 0;
-      padding-right: 0;
-      flex: auto;
-    }
-
-    /* placeholder styles */
-    ::slotted(:not([slot]):not([selected])) {
-      line-height: 1;
-    }
-
-    [part='label'] {
-      width: 100%;
-      padding: 0;
-      line-height: inherit;
-    }
-  `,
-  { moduleId: 'vaadin-select-value-button-styles' }
-);
 
 /**
  * An element used internally by `<vaadin-select>`. Not intended to be used separately.
@@ -60,6 +31,19 @@ class SelectValueButton extends ButtonMixin(ThemableMixin(PolymerElement)) {
           -webkit-user-select: none;
           -moz-user-select: none;
           user-select: none;
+          min-width: 0;
+          width: 0;
+        }
+
+        ::slotted(:not([slot])) {
+          padding-left: 0;
+          padding-right: 0;
+          flex: auto;
+        }
+
+        /* placeholder styles */
+        ::slotted(:not([slot]):not([selected])) {
+          line-height: 1;
         }
 
         .vaadin-button-container {
@@ -70,14 +54,15 @@ class SelectValueButton extends ButtonMixin(ThemableMixin(PolymerElement)) {
           width: 100%;
           height: 100%;
           min-height: inherit;
-          background: transparent;
-          padding: 0;
+          text-shadow: inherit;
         }
 
         [part='label'] {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          width: 100%;
+          line-height: inherit;
         }
       </style>
       <div class="vaadin-button-container">