diff --git a/src/vaadin-date-picker-styles.js b/src/vaadin-date-picker-styles.js
index d3ea284d..79bc422d 100644
--- a/src/vaadin-date-picker-styles.js
+++ b/src/vaadin-date-picker-styles.js
@@ -1,40 +1,37 @@
-import '@polymer/polymer/lib/elements/custom-style.js';
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = `<dom-module id="vaadin-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
-  <template>
-    <style>
-      :host {
-        align-items: flex-start;
-        justify-content: flex-start;
-      }
-
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
-      :host([right-aligned]) {
-        align-items: flex-end;
-      }
-
-      :host([dir="rtl"]) {
-        align-items: flex-end;
-      }
-
-      :host([dir="rtl"][right-aligned]) {
-        align-items: flex-start;
-      }
-
-      [part="overlay"] {
-        display: flex;
-        flex: auto;
-      }
-
-      [part~="content"] {
-        flex: auto;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+registerStyles(
+  'vaadin-date-picker-overlay',
+  css`
+    :host {
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+
+    :host([bottom-aligned]) {
+      justify-content: flex-end;
+    }
+
+    :host([right-aligned]) {
+      align-items: flex-end;
+    }
+
+    :host([dir='rtl']) {
+      align-items: flex-end;
+    }
+
+    :host([dir='rtl'][right-aligned]) {
+      align-items: flex-start;
+    }
+
+    [part='overlay'] {
+      display: flex;
+      flex: auto;
+    }
+
+    [part~='content'] {
+      flex: auto;
+    }
+  `,
+  { moduleId: 'vaadin-date-picker-overlay-styles' }
+);
diff --git a/src/vaadin-date-picker-text-field.js b/src/vaadin-date-picker-text-field.js
index 014c6e18..781f29a7 100644
--- a/src/vaadin-date-picker-text-field.js
+++ b/src/vaadin-date-picker-text-field.js
@@ -4,48 +4,46 @@ Copyright (c) 2019 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
 import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-const $_documentContainer = document.createElement('template');
+registerStyles(
+  'vaadin-date-picker-text-field',
+  css`
+    :host([dir='rtl']) [part='input-field'] {
+      direction: ltr;
+    }
 
-$_documentContainer.innerHTML = `<dom-module id="vaadin-date-picker-text-field-styles" theme-for="vaadin-date-picker-text-field">
-  <template>
-    <style>
-      :host([dir="rtl"]) [part="input-field"] {
-        direction: ltr;
-      }
+    :host([dir='rtl']) [part='value']::placeholder {
+      direction: rtl;
+      text-align: left;
+    }
 
-      :host([dir="rtl"]) [part="value"]::placeholder {
-        direction: rtl;
-        text-align: left;
-      }
+    :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+      direction: rtl;
+      text-align: left;
+    }
 
-      :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
-        direction: rtl;
-        text-align: left;
-      }
+    :host([dir='rtl']) [part='value']:-ms-input-placeholder,
+    :host([dir='rtl']) [part='input-field'] ::slotted(input):-ms-input-placeholder {
+      direction: rtl;
+      text-align: left;
+    }
+  `,
+  { moduleId: 'vaadin-date-picker-text-field-styles' }
+);
 
-      :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
-      :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
-        direction: rtl;
-        text-align: left;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
 /**
-  * The text-field element for date input.
-  *
-  * ### Styling
-  *
-  * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
-  * for `<vaadin-date-picker-text-field>` parts and available slots (prefix, suffix etc.)
-  *
-  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
-  *
-  * @extends PolymerElement
-  */
+ * The text-field element for date input.
+ *
+ * ### Styling
+ *
+ * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
+ * for `<vaadin-date-picker-text-field>` parts and available slots (prefix, suffix etc.)
+ *
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+ *
+ * @extends PolymerElement
+ */
 class DatePickerTextFieldElement extends TextFieldElement {
   static get is() {
     return 'vaadin-date-picker-text-field';
diff --git a/theme/lumo/vaadin-date-picker-overlay-content-styles.js b/theme/lumo/vaadin-date-picker-overlay-content-styles.js
index 4aa5c3ec..c8160896 100644
--- a/theme/lumo/vaadin-date-picker-overlay-content-styles.js
+++ b/theme/lumo/vaadin-date-picker-overlay-content-styles.js
@@ -1,220 +1,218 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/vaadin-button/theme/lumo/vaadin-button.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const $_documentContainer = html`<dom-module id="lumo-date-picker-overlay-content" theme-for="vaadin-date-picker-overlay-content">
-  <template>
-    <style>
-      :host {
-        position: relative;
-        background-color: transparent;
-        /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
-        background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
-        background-size: 57px 100%;
-        background-position: top right;
-        background-repeat: no-repeat;
-        cursor: default;
-      }
-
-      /* Month scroller */
-
-      [part="months"] {
-        /* Month calendar height:
+registerStyles(
+  'vaadin-date-picker-overlay-content',
+  css`
+    :host {
+      position: relative;
+      background-color: transparent;
+      /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
+      background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+      background-size: 57px 100%;
+      background-position: top right;
+      background-repeat: no-repeat;
+      cursor: default;
+    }
+
+    /* Month scroller */
+
+    [part='months'] {
+      /* Month calendar height:
               header height + margin-bottom
             + weekdays height + margin-bottom
             + date cell heights
             + small margin between month calendars
         */
-        --vaadin-infinite-scroller-item-height:
+      /* prettier-ignore */
+      --vaadin-infinite-scroller-item-height:
           calc(
               var(--lumo-font-size-l) + var(--lumo-space-m)
             + var(--lumo-font-size-xs) + var(--lumo-space-s)
             + var(--lumo-size-m) * 6
             + var(--lumo-space-s)
           );
-        --vaadin-infinite-scroller-buffer-offset: 20%;
-        -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
-        mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
-        position: relative;
-        margin-right: 57px;
-      }
-
-      /* Year scroller */
-
-      [part="years"] {
-        /* TODO get rid of fixed magic number */
-        --vaadin-infinite-scroller-buffer-width: 97px;
-        width: 57px;
-        height: auto;
-        top: 0;
-        bottom: 0;
-        font-size: var(--lumo-font-size-s);
-        box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
-        -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
-        mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
-      }
-
-      [part="year-number"],
-      [part="year-separator"] {
-        opacity: 0.5;
-        transition: 0.2s opacity;
-      }
-
-      [part="years"]:hover [part="year-number"],
-      [part="years"]:hover [part="year-separator"] {
-        opacity: 1;
-      }
-
-      /* TODO unsupported selector */
-      #scrollers {
-        position: static;
-        display: block;
-      }
-
-      /* TODO unsupported selector, should fix this in vaadin-date-picker that it adapts to the
+      --vaadin-infinite-scroller-buffer-offset: 20%;
+      -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
+      mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
+      position: relative;
+      margin-right: 57px;
+    }
+
+    /* Year scroller */
+    [part='years'] {
+      /* TODO get rid of fixed magic number */
+      --vaadin-infinite-scroller-buffer-width: 97px;
+      width: 57px;
+      height: auto;
+      top: 0;
+      bottom: 0;
+      font-size: var(--lumo-font-size-s);
+      box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
+      -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
+      mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
+    }
+
+    [part='year-number'],
+    [part='year-separator'] {
+      opacity: 0.5;
+      transition: 0.2s opacity;
+    }
+
+    [part='years']:hover [part='year-number'],
+    [part='years']:hover [part='year-separator'] {
+      opacity: 1;
+    }
+
+    /* TODO unsupported selector */
+    #scrollers {
+      position: static;
+      display: block;
+    }
+
+    /* TODO unsupported selector, should fix this in vaadin-date-picker that it adapts to the
        * width of the year scroller */
-      #scrollers[desktop] [part="months"] {
-        right: auto;
-      }
-
-      /* Year scroller position indicator */
-      [part="years"]::before {
-        border: none;
-        width: 1em;
-        height: 1em;
-        background-color: var(--lumo-base-color);
-        background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-        transform: translate(-75%, -50%) rotate(45deg);
-        border-top-right-radius: calc(var(--lumo-border-radius) / 2);
-        box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
-        z-index: 1;
-      }
-
-      [part="year-number"],
-      [part="year-separator"] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 50%;
-        transform: translateY(-50%);
-      }
-
-      [part="years"] [part="year-separator"]::after {
-        color: var(--lumo-disabled-text-color);
-        content: "•";
-      }
-
-      /* Current year */
-
-      [part="years"] [part="year-number"][current] {
-        color: var(--lumo-primary-text-color);
-      }
-
-      /* Toolbar (footer) */
-
-      [part="toolbar"] {
-        padding: var(--lumo-space-s);
-        box-shadow: 0 -1px 0 0 var(--lumo-contrast-10pct);
-        border-bottom-left-radius: var(--lumo-border-radius);
-        margin-right: 57px;
-      }
-
-      @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
-        [part="toolbar"] {
-          box-shadow: none;
-        }
-      }
-
-      /* Today and Cancel buttons */
-
-      /* TODO: Would be great if I could apply the "tertiary" theme from here instead of copying those styles */
-      [part="toolbar"] [part\$="button"] {
-        background-color: transparent;
-        margin: 0;
-        min-width: 0;
-        padding: 0 0.75em;
-      }
-
-      /* Narrow viewport mode (fullscreen) */
-
-      :host([fullscreen]) [part="toolbar"] {
-        order: -1;
-        background-color: var(--lumo-base-color);
-      }
-
-      :host([fullscreen]) [part="overlay-header"] {
-        order: -2;
-        height: var(--lumo-size-m);
-        padding: var(--lumo-space-s);
-        position: absolute;
-        left: 0;
-        right: 0;
-        justify-content: center;
-      }
-
-      :host([fullscreen]) [part="toggle-button"],
-      :host([fullscreen]) [part="clear-button"],
-      [part="overlay-header"] [part="label"] {
-        display: none;
+    #scrollers[desktop] [part='months'] {
+      right: auto;
+    }
+
+    /* Year scroller position indicator */
+    [part='years']::before {
+      border: none;
+      width: 1em;
+      height: 1em;
+      background-color: var(--lumo-base-color);
+      background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+      transform: translate(-75%, -50%) rotate(45deg);
+      border-top-right-radius: calc(var(--lumo-border-radius) / 2);
+      box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
+      z-index: 1;
+    }
+
+    [part='year-number'],
+    [part='year-separator'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 50%;
+      transform: translateY(-50%);
+    }
+
+    [part='years'] [part='year-separator']::after {
+      color: var(--lumo-disabled-text-color);
+      content: '•';
+    }
+
+    /* Current year */
+
+    [part='years'] [part='year-number'][current] {
+      color: var(--lumo-primary-text-color);
+    }
+
+    /* Toolbar (footer) */
+
+    [part='toolbar'] {
+      padding: var(--lumo-space-s);
+      box-shadow: 0 -1px 0 0 var(--lumo-contrast-10pct);
+      border-bottom-left-radius: var(--lumo-border-radius);
+      margin-right: 57px;
+    }
+
+    @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
+      [part='toolbar'] {
+        box-shadow: none;
+      }
+    }
+
+    /* Today and Cancel buttons */
+
+    /* TODO: Would be great if I could apply the "tertiary" theme from here instead of copying those styles */
+    [part='toolbar'] [part\$='button'] {
+      background-color: transparent;
+      margin: 0;
+      min-width: 0;
+      padding: 0 0.75em;
+    }
+
+    /* Narrow viewport mode (fullscreen) */
+
+    :host([fullscreen]) [part='toolbar'] {
+      order: -1;
+      background-color: var(--lumo-base-color);
+    }
+
+    :host([fullscreen]) [part='overlay-header'] {
+      order: -2;
+      height: var(--lumo-size-m);
+      padding: var(--lumo-space-s);
+      position: absolute;
+      left: 0;
+      right: 0;
+      justify-content: center;
+    }
+
+    :host([fullscreen]) [part='toggle-button'],
+    :host([fullscreen]) [part='clear-button'],
+    [part='overlay-header'] [part='label'] {
+      display: none;
+    }
+
+    /* Very narrow screen (year scroller initially hidden) */
+
+    [part='years-toggle-button'] {
+      position: relative;
+      right: auto;
+      display: flex;
+      align-items: center;
+      height: var(--lumo-size-s);
+      padding: 0 0.5em;
+      border-radius: var(--lumo-border-radius);
+      z-index: 3;
+      color: var(--lumo-primary-text-color);
+      font-weight: 500;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    :host([years-visible]) [part='years-toggle-button'] {
+      background-color: var(--lumo-primary-color);
+      color: var(--lumo-primary-contrast-color);
+    }
+
+    [part='years-toggle-button']::before {
+      content: none;
+    }
+
+    /* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
+    @media screen and (max-width: 374px) {
+      :host {
+        background-image: none;
       }
 
-      /* Very narrow screen (year scroller initially hidden) */
-
-      [part="years-toggle-button"] {
-        position: relative;
-        right: auto;
-        display: flex;
-        align-items: center;
-        height: var(--lumo-size-s);
-        padding: 0 0.5em;
-        border-radius: var(--lumo-border-radius);
-        z-index: 3;
-        color: var(--lumo-primary-text-color);
-        font-weight: 500;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+      [part='years'] {
+        background-color: var(--lumo-shade-5pct);
       }
 
-      :host([years-visible]) [part="years-toggle-button"] {
-        background-color: var(--lumo-primary-color);
-        color: var(--lumo-primary-contrast-color);
+      [part='toolbar'],
+      [part='months'] {
+        margin-right: 0;
       }
 
-      [part="years-toggle-button"]::before {
-        content: none;
+      /* TODO make date-picker adapt to the width of the years part */
+      [part='years'] {
+        --vaadin-infinite-scroller-buffer-width: 90px;
+        width: 50px;
       }
 
-      /* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
-      @media screen and (max-width: 374px) {
-        :host {
-          background-image: none;
-        }
-
-        [part="years"] {
-          background-color: var(--lumo-shade-5pct);
-        }
-
-        [part="toolbar"],
-        [part="months"] {
-          margin-right: 0;
-        }
-
-        /* TODO make date-picker adapt to the width of the years part */
-        [part="years"] {
-          --vaadin-infinite-scroller-buffer-width: 90px;
-          width: 50px;
-        }
-
-        :host([years-visible]) [part="months"] {
-          padding-left: 50px;
-        }
+      :host([years-visible]) [part='months'] {
+        padding-left: 50px;
       }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+    }
+  `,
+  { moduleId: 'lumo-date-picker-overlay-content' }
+);
diff --git a/theme/lumo/vaadin-date-picker-overlay-styles.js b/theme/lumo/vaadin-date-picker-overlay-styles.js
index bd9d8451..96941e95 100644
--- a/theme/lumo/vaadin-date-picker-overlay-styles.js
+++ b/theme/lumo/vaadin-date-picker-overlay-styles.js
@@ -1,51 +1,50 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const $_documentContainer = html`<dom-module id="lumo-date-picker-overlay" theme-for="vaadin-date-picker-overlay">
-  <template>
-    <style include="lumo-menu-overlay">
-      [part="overlay"] {
-        /*
-        Width:
-            date cell widths
-          + month calendar side padding
-          + year scroller width
-        */
-        width:
-          calc(
-              var(--lumo-size-m) * 7
-            + var(--lumo-space-xs) * 2
-            + 57px
-          );
-        height: 100%;
-        max-height: calc(var(--lumo-size-m) * 14);
-        overflow: hidden;
-        -webkit-tap-highlight-color: transparent;
-      }
+registerStyles(
+  'vaadin-date-picker-overlay',
+  css`
+    [part='overlay'] {
+      /*
+      Width:
+          date cell widths
+        + month calendar side padding
+        + year scroller width
+      */
+      /* prettier-ignore */
+      width:
+        calc(
+            var(--lumo-size-m) * 7
+          + var(--lumo-space-xs) * 2
+          + 57px
+        );
+      height: 100%;
+      max-height: calc(var(--lumo-size-m) * 14);
+      overflow: hidden;
+      -webkit-tap-highlight-color: transparent;
+    }
 
-      [part="overlay"] {
-        flex-direction: column;
-      }
+    [part='overlay'] {
+      flex-direction: column;
+    }
 
-      [part="content"] {
-        padding: 0;
-        height: 100%;
-        overflow: hidden;
-        -webkit-mask-image: none;
-        mask-image: none;
-      }
+    [part='content'] {
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
 
-      @media (max-width: 420px), (max-height: 420px) {
-        [part="overlay"] {
-          width: 100vw;
-          height: 70vh;
-          max-height: 70vh;
-        }
+    @media (max-width: 420px), (max-height: 420px) {
+      [part='overlay'] {
+        width: 100vw;
+        height: 70vh;
+        max-height: 70vh;
       }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+    }
+  `,
+  { include: ['lumo-menu-overlay'], moduleId: 'lumo-date-picker-overlay' }
+);
diff --git a/theme/lumo/vaadin-date-picker-styles.js b/theme/lumo/vaadin-date-picker-styles.js
index 23b1b159..f78ac343 100644
--- a/theme/lumo/vaadin-date-picker-styles.js
+++ b/theme/lumo/vaadin-date-picker-styles.js
@@ -1,29 +1,27 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const $_documentContainer = html`<dom-module id="lumo-date-picker" theme-for="vaadin-date-picker">
-  <template>
-    <style include="lumo-field-button">
-      :host {
-        outline: none;
-      }
+registerStyles(
+  'vaadin-date-picker',
+  css`
+    :host {
+      outline: none;
+    }
 
-      [part="toggle-button"]::before {
-        content: var(--lumo-icons-calendar);
-      }
+    [part='toggle-button']::before {
+      content: var(--lumo-icons-calendar);
+    }
 
-      [part="clear-button"]::before {
-        content: var(--lumo-icons-cross);
-      }
+    [part='clear-button']::before {
+      content: var(--lumo-icons-cross);
+    }
 
-      @media (max-width: 420px), (max-height: 420px) {
-        [part="overlay-content"] {
-          height: 70vh;
-        }
+    @media (max-width: 420px), (max-height: 420px) {
+      [part='overlay-content'] {
+        height: 70vh;
       }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+    }
+  `,
+  { include: ['lumo-field-button'], moduleId: 'lumo-date-picker' }
+);
diff --git a/theme/lumo/vaadin-date-picker-text-field-styles.js b/theme/lumo/vaadin-date-picker-text-field-styles.js
index 54cdb3df..db43a1bc 100644
--- a/theme/lumo/vaadin-date-picker-text-field-styles.js
+++ b/theme/lumo/vaadin-date-picker-text-field-styles.js
@@ -1,21 +1,18 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const $_documentContainer = html`<dom-module id="lumo-date-picker-text-field" theme-for="vaadin-date-picker-text-field">
-  <template>
-    <style>
-      :not(*):placeholder-shown, /* to prevent broken styles on IE */
-      :host([dir="rtl"]) [part="value"]:placeholder-shown,
-      :host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
-        --_lumo-text-field-overflow-mask-image: none;
-      }
+registerStyles(
+  'vaadin-date-picker-text-field',
+  css`
+    :host([dir='rtl']) [part='value']:placeholder-shown,
+    :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
+      --_lumo-text-field-overflow-mask-image: none;
+    }
 
-      :host([dir="rtl"]) [part="value"],
-      :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+    :host([dir='rtl']) [part='value'],
+    :host([dir='rtl']) [part='input-field'] ::slotted(input) {
+      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+    }
+  `,
+  { moduleId: 'lumo-date-picker-text-field' }
+);
diff --git a/theme/lumo/vaadin-month-calendar-styles.js b/theme/lumo/vaadin-month-calendar-styles.js
index d405f6f5..2a272314 100644
--- a/theme/lumo/vaadin-month-calendar-styles.js
+++ b/theme/lumo/vaadin-month-calendar-styles.js
@@ -1,149 +1,153 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
-const $_documentContainer = html`<dom-module id="lumo-month-calendar" theme-for="vaadin-month-calendar">
-  <template>
-    <style>
-      :host {
-        -moz-user-select: none;
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        -webkit-tap-highlight-color: transparent;
-        user-select: none;
-        font-size: var(--lumo-font-size-m);
-        color: var(--lumo-body-text-color);
-        text-align: center;
-        padding: 0 var(--lumo-space-xs);
-      }
 
-      /* Month header */
+registerStyles(
+  'vaadin-month-calendar',
+  css`
+    :host {
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      user-select: none;
+      font-size: var(--lumo-font-size-m);
+      color: var(--lumo-body-text-color);
+      text-align: center;
+      padding: 0 var(--lumo-space-xs);
+    }
 
-      [part="month-header"] {
-        color: var(--lumo-header-text-color);
-        font-size: var(--lumo-font-size-l);
-        line-height: 1;
-        font-weight: 500;
-        margin-bottom: var(--lumo-space-m);
-      }
+    /* Month header */
 
-      /* Week days and numbers */
+    [part='month-header'] {
+      color: var(--lumo-header-text-color);
+      font-size: var(--lumo-font-size-l);
+      line-height: 1;
+      font-weight: 500;
+      margin-bottom: var(--lumo-space-m);
+    }
 
-      [part="weekdays"],
-      [part="weekday"],
-      [part="week-numbers"] {
-        font-size: var(--lumo-font-size-xs);
-        line-height: 1;
-        color: var(--lumo-tertiary-text-color);
-      }
+    /* Week days and numbers */
 
-      [part="weekdays"] {
-        margin-bottom: var(--lumo-space-s);
-      }
+    [part='weekdays'],
+    [part='weekday'],
+    [part='week-numbers'] {
+      font-size: var(--lumo-font-size-xs);
+      line-height: 1;
+      color: var(--lumo-tertiary-text-color);
+    }
 
-      /* TODO should have part="week-number" for the cell in weekdays-container */
-      [part="weekday"]:empty,
-      [part="week-numbers"] {
-        width: var(--lumo-size-xs);
-      }
+    [part='weekdays'] {
+      margin-bottom: var(--lumo-space-s);
+    }
 
-      /* Date and week number cells */
+    /* TODO should have part="week-number" for the cell in weekdays-container */
+    [part='weekday']:empty,
+    [part='week-numbers'] {
+      width: var(--lumo-size-xs);
+    }
 
-      [part="date"],
-      [part="week-number"] {
-        box-sizing: border-box;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        height: var(--lumo-size-m);
-        position: relative;
-      }
+    /* Date and week number cells */
 
-      [part="date"] {
-        transition: color 0.1s;
-      }
+    [part='date'],
+    [part='week-number'] {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--lumo-size-m);
+      position: relative;
+    }
 
-      /* Today date */
+    [part='date'] {
+      transition: color 0.1s;
+    }
 
-      [part="date"][today] {
-        color: var(--lumo-primary-text-color);
-      }
+    /* Today date */
 
-      /* Focused date */
-
-      [part="date"]::before {
-        content: "";
-        position: absolute;
-        z-index: -1;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        min-width: 2em;
-        min-height: 2em;
-        width: 80%;
-        height: 80%;
-        max-height: 100%;
-        max-width: 100%;
-        border-radius: var(--lumo-border-radius);
-      }
+    [part='date'][today] {
+      color: var(--lumo-primary-text-color);
+    }
 
-      [part="date"][focused]::before {
-        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-      }
+    /* Focused date */
+
+    [part='date']::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      min-width: 2em;
+      min-height: 2em;
+      width: 80%;
+      height: 80%;
+      max-height: 100%;
+      max-width: 100%;
+      border-radius: var(--lumo-border-radius);
+    }
 
-      :host(:not([focused])) [part="date"][focused]::before {
-        animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
-      }
+    [part='date'][focused]::before {
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
 
-      @keyframes vaadin-date-picker-month-calendar-focus-date {
-        50% {
-          box-shadow: 0 0 0 2px transparent;
-        }
-      }
+    :host(:not([focused])) [part='date'][focused]::before {
+      animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
+    }
 
-      /* TODO should not rely on the role attribute */
-      [part="date"][role="button"]:not([disabled]):not([selected]):hover::before {
-        background-color: var(--lumo-primary-color-10pct);
+    @keyframes vaadin-date-picker-month-calendar-focus-date {
+      50% {
+        box-shadow: 0 0 0 2px transparent;
       }
+    }
 
-      [part="date"][selected] {
-        color: var(--lumo-primary-contrast-color);
-      }
+    /* TODO should not rely on the role attribute */
+    [part='date'][role='button']:not([disabled]):not([selected]):hover::before {
+      background-color: var(--lumo-primary-color-10pct);
+    }
+
+    [part='date'][selected] {
+      color: var(--lumo-primary-contrast-color);
+    }
+
+    [part='date'][selected]::before {
+      background-color: var(--lumo-primary-color);
+    }
+
+    [part='date'][disabled] {
+      color: var(--lumo-disabled-text-color);
+    }
 
-      [part="date"][selected]::before {
-        background-color: var(--lumo-primary-color);
+    @media (pointer: coarse) {
+      [part='date']:hover:not([selected])::before,
+      [part='date'][focused]:not([selected])::before {
+        display: none;
       }
 
-      [part="date"][disabled] {
-        color: var(--lumo-disabled-text-color);
+      [part='date'][role='button']:not([disabled]):active::before {
+        display: block;
       }
 
-      @media (pointer: coarse) {
-        [part="date"]:hover:not([selected])::before,
-        [part="date"][focused]:not([selected])::before {
-          display: none;
-        }
+      [part='date'][selected]::before {
+        box-shadow: none;
+      }
+    }
 
-        [part="date"][role="button"]:not([disabled]):active::before {
-          display: block;
-        }
+    /* Disabled */
 
-        [part="date"][selected]::before {
-          box-shadow: none;
-        }
-      }
+    :host([disabled]) * {
+      color: var(--lumo-disabled-text-color) !important;
+    }
+  `,
+  { moduleId: 'lumo-month-calendar' }
+);
 
-      /* Disabled */
+const $_documentContainer = document.createElement('template');
 
-      :host([disabled]) * {
-        color: var(--lumo-disabled-text-color) !important;
-      }
-    </style>
-  </template>
-</dom-module><custom-style>
+$_documentContainer.innerHTML = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
@@ -151,6 +155,6 @@ const $_documentContainer = html`<dom-module id="lumo-month-calendar" theme-for=
       }
     }
   </style>
-</custom-style>`;
+`;
 
 document.head.appendChild($_documentContainer.content);
diff --git a/theme/material/vaadin-date-picker-overlay-content-styles.js b/theme/material/vaadin-date-picker-overlay-content-styles.js
index 2fbcb1bd..2568c5d2 100644
--- a/theme/material/vaadin-date-picker-overlay-content-styles.js
+++ b/theme/material/vaadin-date-picker-overlay-content-styles.js
@@ -1,178 +1,176 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/shadow.js';
 import '@vaadin/vaadin-button/theme/material/vaadin-button.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
-const $_documentContainer = html`<dom-module id="material-date-picker-overlay-content" theme-for="vaadin-date-picker-overlay-content">
-  <template>
-    <style>
-      :host {
-        font-family: var(--material-font-family);
-        font-size: var(--material-body-font-size);
-        -webkit-text-size-adjust: 100%;
-        line-height: 1.4;
-
-        /* FIXME(platosha): fix the core styles and remove this override. */
-        background: transparent;
-      }
-
-      :host([fullscreen]) {
-        position: absolute;
-      }
-
-      /* Fullscreen Toolbar */
-
-      [part="overlay-header"] {
-        display: flex;
-        align-items: baseline;
-        position: relative;
-        z-index: 2;
-        color: var(--material-body-text-color);
-        background: var(--material-secondary-background-color);
-        border-bottom: 2px solid var(--material-primary-color);
-        padding: 8px;
-        box-shadow: var(--material-shadow-elevation-4dp);
-      }
+
+registerStyles(
+  'vaadin-date-picker-overlay-content',
+  css`
+    :host {
+      font-family: var(--material-font-family);
+      font-size: var(--material-body-font-size);
+      -webkit-text-size-adjust: 100%;
+      line-height: 1.4;
 
       /* FIXME(platosha): fix the core styles and remove this override. */
-      [part="overlay-header"]:not([desktop]) {
-        padding-bottom: 8px;
-      }
-
-      [part="label"] {
-        padding: 0 8px;
-        flex: auto;
-      }
-
-      [part="clear-button"],
-      [part="toggle-button"] {
-        font-family: 'material-icons';
-        font-size: var(--material-icon-font-size);
-        line-height: 24px;
-        width: 24px;
-        height: 24px;
-        text-align: center;
-      }
-
-      [part="clear-button"],
-      [part="toggle-button"],
-      [part="years-toggle-button"] {
-        padding: 8px;
-        color: var(--material-secondary-text-color);
-      }
-
-      [part="clear-button"]:hover,
-      [part="toggle-button"]:hover,
-      [part="years-toggle-button"]:hover {
-        color: inherit;
-      }
-
-      [part="clear-button"]::before {
-        content: var(--material-icons-clear);
-      }
-
-      [part="toggle-button"]::before {
-        content: var(--material-icons-calendar);
-      }
-
-      [part="years-toggle-button"] {
-        position: static;
-        padding: 4px 8px;
-        font-size: var(--material-body-font-size);
-        font-weight: 500;
-        line-height: 24px;
-        letter-spacing: 0.05em;
-        color: var(--material-secondary-text-color);
-      }
-
-      [part="years-toggle-button"]::before {
-        content: '';
-        display: none;
-      }
-
-      [part="years-toggle-button"]::after {
-        content: var(--material-icons-play);
-        display: inline-block;
-        width: 24px;
-        font-family: 'material-icons';
-        font-size: var(--material-icon-font-size);
-        line-height: 24px;
-        text-align: center;
-        transition: transform 100ms cubic-bezier(.4, 0, .2, 1);
-      }
-
-      :host([years-visible]) [part="years-toggle-button"]::after {
-        transform: rotate(90deg);
-      }
-
-      /* Month scroller */
-
-      [part="months"] {
-        --vaadin-infinite-scroller-item-height: 320px;
-        text-align: center;
-      }
-
-      /* Year scroller */
-
-      [part="years"] {
-        z-index: 1;
-        background: var(--material-secondary-text-color);
-        color: var(--material-background-color);
-        text-align: center;
-      }
-
-      [part="years"]::before {
-        z-index: 2;
-        border: 0;
-        width: 8px;
-        height: 8px;
-        transform: translateX(-50%) rotate(-45deg);
-        background: var(--material-background-color);
-      }
-
-      :host([years-visible]) [part="years"]::after {
-        top: calc(20px + 16px);
-        height: calc(100% - 20px - 16px);
-      }
-
-      [part="year-number"] {
-        font-size: var(--material-small-font-size);
-        line-height: 10px; /* NOTE(platosha): chosen to align years to months */
-      }
-
-      [part="year-separator"] {
-        background-color: currentColor;
-        width: 4px;
-        height: 4px;
-        border-radius: 50%;
-        margin: calc(0.5 * var(--vaadin-infinite-scroller-item-height, 80px) - 0.5 * 10px - 0.5 * 4px) auto;
-      }
-
-      /* Bottom Bar */
-
-      [part="toolbar"] {
-        display: flex;
-        justify-content: flex-end;
-        padding: 8px 4px;
-        border-top: 1px solid var(--material-divider-color);
-      }
-
-      [part="cancel-button"] {
-        order: 1;
-      }
-
-      [part="today-button"] {
-        order: 2;
-      }
-
-      [part="today-button"],
-      [part="cancel-button"] {
-        margin: 0 4px;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+      background: transparent;
+    }
+
+    :host([fullscreen]) {
+      position: absolute;
+    }
+
+    /* Fullscreen Toolbar */
+
+    [part='overlay-header'] {
+      display: flex;
+      align-items: baseline;
+      position: relative;
+      z-index: 2;
+      color: var(--material-body-text-color);
+      background: var(--material-secondary-background-color);
+      border-bottom: 2px solid var(--material-primary-color);
+      padding: 8px;
+      box-shadow: var(--material-shadow-elevation-4dp);
+    }
+
+    /* FIXME(platosha): fix the core styles and remove this override. */
+    [part='overlay-header']:not([desktop]) {
+      padding-bottom: 8px;
+    }
+
+    [part='label'] {
+      padding: 0 8px;
+      flex: auto;
+    }
+
+    [part='clear-button'],
+    [part='toggle-button'] {
+      font-family: 'material-icons';
+      font-size: var(--material-icon-font-size);
+      line-height: 24px;
+      width: 24px;
+      height: 24px;
+      text-align: center;
+    }
+
+    [part='clear-button'],
+    [part='toggle-button'],
+    [part='years-toggle-button'] {
+      padding: 8px;
+      color: var(--material-secondary-text-color);
+    }
+
+    [part='clear-button']:hover,
+    [part='toggle-button']:hover,
+    [part='years-toggle-button']:hover {
+      color: inherit;
+    }
+
+    [part='clear-button']::before {
+      content: var(--material-icons-clear);
+    }
+
+    [part='toggle-button']::before {
+      content: var(--material-icons-calendar);
+    }
+
+    [part='years-toggle-button'] {
+      position: static;
+      padding: 4px 8px;
+      font-size: var(--material-body-font-size);
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: 0.05em;
+      color: var(--material-secondary-text-color);
+    }
+
+    [part='years-toggle-button']::before {
+      content: '';
+      display: none;
+    }
+
+    [part='years-toggle-button']::after {
+      content: var(--material-icons-play);
+      display: inline-block;
+      width: 24px;
+      font-family: 'material-icons';
+      font-size: var(--material-icon-font-size);
+      line-height: 24px;
+      text-align: center;
+      transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    :host([years-visible]) [part='years-toggle-button']::after {
+      transform: rotate(90deg);
+    }
+
+    /* Month scroller */
+
+    [part='months'] {
+      --vaadin-infinite-scroller-item-height: 320px;
+      text-align: center;
+    }
+
+    /* Year scroller */
+
+    [part='years'] {
+      z-index: 1;
+      background: var(--material-secondary-text-color);
+      color: var(--material-background-color);
+      text-align: center;
+    }
+
+    [part='years']::before {
+      z-index: 2;
+      border: 0;
+      width: 8px;
+      height: 8px;
+      transform: translateX(-50%) rotate(-45deg);
+      background: var(--material-background-color);
+    }
+
+    :host([years-visible]) [part='years']::after {
+      top: calc(20px + 16px);
+      height: calc(100% - 20px - 16px);
+    }
+
+    [part='year-number'] {
+      font-size: var(--material-small-font-size);
+      line-height: 10px; /* NOTE(platosha): chosen to align years to months */
+    }
+
+    [part='year-separator'] {
+      background-color: currentColor;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      margin: calc(0.5 * var(--vaadin-infinite-scroller-item-height, 80px) - 0.5 * 10px - 0.5 * 4px) auto;
+    }
+
+    /* Bottom Bar */
+
+    [part='toolbar'] {
+      display: flex;
+      justify-content: flex-end;
+      padding: 8px 4px;
+      border-top: 1px solid var(--material-divider-color);
+    }
+
+    [part='cancel-button'] {
+      order: 1;
+    }
+
+    [part='today-button'] {
+      order: 2;
+    }
+
+    [part='today-button'],
+    [part='cancel-button'] {
+      margin: 0 4px;
+    }
+  `,
+  { moduleId: 'material-date-picker-overlay-content' }
+);
diff --git a/theme/material/vaadin-date-picker-overlay-content.js b/theme/material/vaadin-date-picker-overlay-content.js
deleted file mode 100644
index 5393c75a..00000000
--- a/theme/material/vaadin-date-picker-overlay-content.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-date-picker-overlay-content-styles.js';
-import '../../src/vaadin-date-picker-overlay-content.js';
diff --git a/theme/material/vaadin-date-picker-overlay-styles.js b/theme/material/vaadin-date-picker-overlay-styles.js
index 5cc86b19..234a37de 100644
--- a/theme/material/vaadin-date-picker-overlay-styles.js
+++ b/theme/material/vaadin-date-picker-overlay-styles.js
@@ -1,46 +1,44 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const $_documentContainer = html`<dom-module id="material-date-picker-overlay" theme-for="vaadin-date-picker-overlay">
-  <template>
-    <style include="material-overlay">
-      :host([fullscreen]) {
-        top: 0 !important;
-        right: 0 !important;
-        bottom: var(--vaadin-overlay-viewport-bottom) !important;
-        left: 0 !important;
-        align-items: stretch;
-        justify-content: stretch;
-      }
-
-      [part="overlay"] {
-        overflow: hidden;
-        -webkit-overflow-scrolling: auto;
-      }
-
-      :host(:not([fullscreen])) [part="overlay"] {
-        width: 360px;
-        max-height: 500px;
-        border-radius: 0 4px 4px;
-      }
-
-      :host(:not([fullscreen])[right-aligned]) [part="overlay"] {
-        border-radius: 4px 0 4px 4px;
-      }
-
-      :host(:not([fullscreen])[bottom-aligned]) [part="overlay"] {
-        border-radius: 4px;
-      }
-
-      :host(:not([fullscreen])[show-week-numbers]) [part="overlay"] {
-        width: 396px;
-      }
-
-      [part="content"] {
-        padding: 0;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+registerStyles(
+  'vaadin-date-picker-overlay',
+  css`
+    :host([fullscreen]) {
+      top: 0 !important;
+      right: 0 !important;
+      bottom: var(--vaadin-overlay-viewport-bottom) !important;
+      left: 0 !important;
+      align-items: stretch;
+      justify-content: stretch;
+    }
+
+    [part='overlay'] {
+      overflow: hidden;
+      -webkit-overflow-scrolling: auto;
+    }
+
+    :host(:not([fullscreen])) [part='overlay'] {
+      width: 360px;
+      max-height: 500px;
+      border-radius: 0 4px 4px;
+    }
+
+    :host(:not([fullscreen])[right-aligned]) [part='overlay'] {
+      border-radius: 4px 0 4px 4px;
+    }
+
+    :host(:not([fullscreen])[bottom-aligned]) [part='overlay'] {
+      border-radius: 4px;
+    }
+
+    :host(:not([fullscreen])[show-week-numbers]) [part='overlay'] {
+      width: 396px;
+    }
+
+    [part='content'] {
+      padding: 0;
+    }
+  `,
+  { include: ['material-overlay'], moduleId: 'material-date-picker-overlay' }
+);
diff --git a/theme/material/vaadin-date-picker-overlay.js b/theme/material/vaadin-date-picker-overlay.js
deleted file mode 100644
index 7a11d176..00000000
--- a/theme/material/vaadin-date-picker-overlay.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import '../../src/vaadin-date-picker-overlay.js';
diff --git a/theme/material/vaadin-date-picker-styles.js b/theme/material/vaadin-date-picker-styles.js
index 886885ac..45568df6 100644
--- a/theme/material/vaadin-date-picker-styles.js
+++ b/theme/material/vaadin-date-picker-styles.js
@@ -1,28 +1,23 @@
-import './vaadin-date-picker-overlay.js';
-import './vaadin-date-picker-overlay-content.js';
-import './vaadin-month-calendar.js';
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/mixins/field-button.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-const $_documentContainer = html`<dom-module id="material-date-picker" theme-for="vaadin-date-picker">
-  <template>
-    <style include="material-field-button">
-      :host {
-        display: inline-flex;
-        -webkit-tap-highlight-color: transparent;
-      }
+registerStyles(
+  'vaadin-date-picker',
+  css`
+    :host {
+      display: inline-flex;
+      -webkit-tap-highlight-color: transparent;
+    }
 
-      [part="clear-button"]::before {
-        content: var(--material-icons-clear);
-      }
+    [part='clear-button']::before {
+      content: var(--material-icons-clear);
+    }
 
-      [part="toggle-button"]::before {
-        content: var(--material-icons-calendar);
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+    [part='toggle-button']::before {
+      content: var(--material-icons-calendar);
+    }
+  `,
+  { include: ['material-field-button'], moduleId: 'material-date-picker' }
+);
diff --git a/theme/material/vaadin-date-picker.js b/theme/material/vaadin-date-picker.js
index fec65bdf..e7ae2989 100644
--- a/theme/material/vaadin-date-picker.js
+++ b/theme/material/vaadin-date-picker.js
@@ -1,3 +1,6 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
 import './vaadin-date-picker-styles.js';
 import './vaadin-date-picker-text-field.js';
 import '../../src/vaadin-date-picker.js';
diff --git a/theme/material/vaadin-month-calendar-styles.js b/theme/material/vaadin-month-calendar-styles.js
index ba092f12..67f1760c 100644
--- a/theme/material/vaadin-month-calendar-styles.js
+++ b/theme/material/vaadin-month-calendar-styles.js
@@ -1,122 +1,120 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
-const $_documentContainer = html`<dom-module id="material-date-picker-month-calendar" theme-for="vaadin-month-calendar">
-  <template>
-    <style>
-      :host {
-        color: var(--material-body-text-color);
-        padding: 0 calc(50% / 8 - 0.5em + 8px);
-      }
-
-      :host([show-week-numbers]) {
-        padding: 0 calc(50% / 9 - 0.5em + 8px);
-      }
-
-      [part="month-header"] {
-        font-size: var(--material-h6-font-size);
-        line-height: 1;
-        padding-top: 20px;
-        margin-bottom: 8px;
-      }
-
-      [part="week-number"],
-      [part="weekday"] {
-        font-size: var(--material-caption-font-size);
-        line-height: 44px;
-        height: 40px;
-        color: var(--material-secondary-text-color);
-      }
-
-      :host([disabled]),
-      :host([disabled]) [part="week-number"],
-      :host([disabled]) [part="weekday"] {
-        color: var(--material-disabled-text-color);
-      }
-
-      [part="date"] {
-        position: relative;
-        font-size: var(--material-body-font-size);
-        line-height: 42px;
-        height: 40px;
-        cursor: default;
-      }
-
-      [part="date"]::after {
-        content: '';
-        position: absolute;
-        z-index: -4;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 38px;
-        height: 38px;
-        box-sizing: border-box;
-        border-radius: 50%;
-        border: 2px solid transparent;
-      }
-
-      /* Today */
-
-      [part="date"][today] {
-        color: var(--material-primary-text-color);
-      }
-
-      /* Hover */
 
-      [part="date"]:not([disabled]):hover::after {
-        background-color: var(--material-secondary-background-color);
-        border-color: var(--material-secondary-background-color);
-        z-index: -3;
-      }
-
-      /* Hide for touch devices */
-      @media (hover: none) {
-        [part="date"]:not([disabled]):hover::after {
-          background-color: transparent;
-          border-color: transparent;
-          z-index: -4;
-        }
-      }
-
-      /* Selected */
-
-      [part="date"][selected] {
-        font-weight: 500;
-      }
-
-      [part="date"]:not([disabled])[selected]::after,
-      [part="date"][selected]::after {
+registerStyles(
+  'vaadin-month-calendar',
+  css`
+    :host {
+      color: var(--material-body-text-color);
+      padding: 0 calc(50% / 8 - 0.5em + 8px);
+    }
+
+    :host([show-week-numbers]) {
+      padding: 0 calc(50% / 9 - 0.5em + 8px);
+    }
+
+    [part='month-header'] {
+      font-size: var(--material-h6-font-size);
+      line-height: 1;
+      padding-top: 20px;
+      margin-bottom: 8px;
+    }
+
+    [part='week-number'],
+    [part='weekday'] {
+      font-size: var(--material-caption-font-size);
+      line-height: 44px;
+      height: 40px;
+      color: var(--material-secondary-text-color);
+    }
+
+    :host([disabled]),
+    :host([disabled]) [part='week-number'],
+    :host([disabled]) [part='weekday'] {
+      color: var(--material-disabled-text-color);
+    }
+
+    [part='date'] {
+      position: relative;
+      font-size: var(--material-body-font-size);
+      line-height: 42px;
+      height: 40px;
+      cursor: default;
+    }
+
+    [part='date']::after {
+      content: '';
+      position: absolute;
+      z-index: -4;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 38px;
+      height: 38px;
+      box-sizing: border-box;
+      border-radius: 50%;
+      border: 2px solid transparent;
+    }
+
+    /* Today */
+
+    [part='date'][today] {
+      color: var(--material-primary-text-color);
+    }
+
+    /* Hover */
+
+    [part='date']:not([disabled]):hover::after {
+      background-color: var(--material-secondary-background-color);
+      border-color: var(--material-secondary-background-color);
+      z-index: -3;
+    }
+
+    /* Hide for touch devices */
+    @media (hover: none) {
+      [part='date']:not([disabled]):hover::after {
         background-color: transparent;
-        border-color: currentColor;
-        z-index: -2;
-      }
-
-      /* Focused */
-
-      [part="date"]:not([disabled])[focused],
-      [part="date"]:not([disabled]):active {
-        color: var(--material-primary-contrast-color);
-      }
-
-      [part="date"]:not([disabled])[focused]::after,
-      [part="date"]:not([disabled]):active::after {
-        opacity: 0.7;
-        background-color: var(--material-primary-color);
-        border-color: var(--material-primary-color);
-        z-index: -1;
-      }
-
-      [part="date"][disabled] {
-        color: var(--material-disabled-text-color);
-      }
-
-      :host([focused]) [part="date"]:not([disabled])[focused]::after {
-        opacity: 1;
+        border-color: transparent;
+        z-index: -4;
       }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+    }
+
+    /* Selected */
+
+    [part='date'][selected] {
+      font-weight: 500;
+    }
+
+    [part='date']:not([disabled])[selected]::after,
+    [part='date'][selected]::after {
+      background-color: transparent;
+      border-color: currentColor;
+      z-index: -2;
+    }
+
+    /* Focused */
+
+    [part='date']:not([disabled])[focused],
+    [part='date']:not([disabled]):active {
+      color: var(--material-primary-contrast-color);
+    }
+
+    [part='date']:not([disabled])[focused]::after,
+    [part='date']:not([disabled]):active::after {
+      opacity: 0.7;
+      background-color: var(--material-primary-color);
+      border-color: var(--material-primary-color);
+      z-index: -1;
+    }
+
+    [part='date'][disabled] {
+      color: var(--material-disabled-text-color);
+    }
+
+    :host([focused]) [part='date']:not([disabled])[focused]::after {
+      opacity: 1;
+    }
+  `,
+  { moduleId: 'material-date-picker-month-calendar' }
+);
diff --git a/theme/material/vaadin-month-calendar.js b/theme/material/vaadin-month-calendar.js
deleted file mode 100644
index 9ffb034c..00000000
--- a/theme/material/vaadin-month-calendar.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-month-calendar-styles.js';
-import '../../src/vaadin-month-calendar.js';