From a14d9ff6d51b3196640fbf3c085b9318bd15e163 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 29 Nov 2018 14:16:53 +0200
Subject: [PATCH 01/13] Update themes styles

---
 theme/lumo/vaadin-text-area-styles.html      |  9 +++--
 theme/lumo/vaadin-text-field-styles.html     | 39 +++++++++++++++-----
 theme/material/vaadin-text-field-styles.html | 32 +++++++++++-----
 3 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/theme/lumo/vaadin-text-area-styles.html b/theme/lumo/vaadin-text-area-styles.html
index 9f49d8e1..38344c11 100644
--- a/theme/lumo/vaadin-text-area-styles.html
+++ b/theme/lumo/vaadin-text-area-styles.html
@@ -5,7 +5,8 @@
 <dom-module id="lumo-text-area" theme-for="vaadin-text-area">
   <template>
     <style include="lumo-text-field">
-      [part="input-field"] {
+      [part="input-field"],
+      [part="input-field"] ::slotted(textarea) {
         /* Equal to the implicit padding in vaadin-text-field */
         padding-top: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
         padding-bottom: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
@@ -33,7 +34,8 @@
         }
       }
 
-      [part="value"] {
+      [part="value"],
+      [part="input-field"] ::slotted(textarea) {
         line-height: inherit;
         --_lumo-text-field-overflow-mask-image: none;
       }
@@ -43,7 +45,8 @@
         margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
       }
 
-      [part="input-field"] [part="value"] {
+      [part="input-field"] [part="value"],
+      [part="input-field"] ::slotted(textarea) {
         white-space: pre-wrap; /* override `nowrap` from <vaadin-text-field> */
         align-self: stretch; /* override `baseline` from <vaadin-text-field> */
       }
diff --git a/theme/lumo/vaadin-text-field-styles.html b/theme/lumo/vaadin-text-field-styles.html
index e2f7fa93..01cb3b81 100644
--- a/theme/lumo/vaadin-text-field-styles.html
+++ b/theme/lumo/vaadin-text-field-styles.html
@@ -33,6 +33,9 @@
       }
 
       [part="value"],
+      [part="input-field"] ::slotted(input),
+      [part="input-field"] ::slotted(textarea),
+      /* Slotted by vaadin-select-text-field */
       [part="input-field"] ::slotted([part="value"]) {
         cursor: inherit;
         min-height: var(--lumo-text-field-size);
@@ -41,7 +44,9 @@
         -webkit-mask-image: var(--_lumo-text-field-overflow-mask-image);
       }
 
-      [part="value"]:focus {
+      [part="value"]:focus,
+      [part="input-field"] ::slotted(input):focus,
+      [part="input-field"] ::slotted(textarea):focus {
         -webkit-mask-image: none;
         mask-image: none;
       }
@@ -52,29 +57,35 @@
       */
       @-moz-document url-prefix() {
         [part="value"],
+        [part="input-field"] ::slotted(input),
+        [part="input-field"] ::slotted(textarea),
         [part="input-field"] ::slotted([part="value"]) {
           mask-image: var(--_lumo-text-field-overflow-mask-image);
         }
       }
 
-      [part="value"]::-webkit-input-placeholder {
+      [part="value"]::-webkit-input-placeholder,
+      [part="input-field"] ::slotted(*)::-webkit-input-placeholder {
         color: inherit;
         transition: opacity 0.175s 0.05s;
         opacity: 0.5;
       }
 
-      [part="value"]:-ms-input-placeholder {
+      [part="value"]:-ms-input-placeholder,
+      [part="input-field"] ::slotted(*)::-ms-input-placeholder {
         color: inherit;
         opacity: 0.5;
       }
 
-      [part="value"]::-moz-placeholder {
+      [part="value"]::-moz-placeholder,
+      [part="input-field"] ::slotted(*)::-moz-placeholder {
         color: inherit;
         transition: opacity 0.175s 0.05s;
         opacity: 0.5;
       }
 
-      [part="value"]::placeholder {
+      [part="value"]::placeholder,
+      [part="input-field"] ::slotted(*)::placeholder {
         color: inherit;
         transition: opacity 0.175s 0.1s;
         opacity: 0.5;
@@ -146,22 +157,30 @@
 
       /* Read-only and disabled */
       :host([readonly]) [part="value"]::-webkit-input-placeholder,
-      :host([disabled]) [part="value"]::-webkit-input-placeholder {
+      :host([disabled]) [part="value"]::-webkit-input-placeholder,
+      :host([readonly]) ::slotted(*)::-webkit-input-placeholder,
+      :host([disabled]) ::slotted(*)::-webkit-input-placeholder {
         opacity: 0;
       }
 
       :host([readonly]) [part="value"]:-ms-input-placeholder,
-      :host([disabled]) [part="value"]:-ms-input-placeholder {
+      :host([disabled]) [part="value"]:-ms-input-placeholder,
+      :host([readonly]) ::slotted(*)::-ms-input-placeholder,
+      :host([disabled]) ::slotted(*)::-ms-input-placeholder {
         opacity: 0;
       }
 
       :host([readonly]) [part="value"]::-moz-placeholder,
-      :host([disabled]) [part="value"]::-moz-placeholder {
+      :host([disabled]) [part="value"]::-moz-placeholder,
+      :host([readonly]) ::slotted(*)::-moz-placeholder,
+      :host([disabled]) ::slotted(*)::-moz-placeholder {
         opacity: 0;
       }
 
       :host([readonly]) [part="value"]::placeholder,
-      :host([disabled]) [part="value"]::placeholder {
+      :host([disabled]) [part="value"]::placeholder,
+      :host([readonly]) ::slotted(*)::placeholder,
+      :host([disabled]) ::slotted(*)::placeholder {
         opacity: 0;
       }
 
@@ -246,7 +265,7 @@
 
       /* Slotted content */
 
-      [part="input-field"] ::slotted(:not([part]):not(iron-icon)) {
+      [part="input-field"] ::slotted(:not([part]):not(iron-icon):not(input):not(textarea)) {
         color: var(--lumo-secondary-text-color);
         font-weight: 400;
       }
diff --git a/theme/material/vaadin-text-field-styles.html b/theme/material/vaadin-text-field-styles.html
index 11842aa1..bb5f1eb0 100644
--- a/theme/material/vaadin-text-field-styles.html
+++ b/theme/material/vaadin-text-field-styles.html
@@ -76,13 +76,17 @@
 
       :host([disabled]) [part="label"],
       :host([disabled]) [part="value"],
+      :host([disabled]) [part="input-field"] ::slotted(input),
+      :host([disabled]) [part="input-field"] ::slotted(textarea),
       :host([disabled]) [part="input-field"] ::slotted([part="value"]) {
         color: var(--material-disabled-text-color);
         -webkit-text-fill-color: var(--material-disabled-text-color);
       }
 
       [part="value"],
-      /* For vaadin-dropdown-menu-text-field */
+      :host([disabled]) [part="input-field"] ::slotted(input),
+      :host([disabled]) [part="input-field"] ::slotted(textarea),
+      /* Slotted by vaadin-select-text-field */
       [part="input-field"] ::slotted([part="value"]) {
         outline: none;
         margin: 0;
@@ -102,45 +106,53 @@
 
       /* TODO: the text opacity should be 42%, but the disabled style is 38%.
       Would need to introduce another property for it if we want to be 100% accurate. */
-      [part="value"]::-webkit-input-placeholder {
+      [part="value"]::-webkit-input-placeholder,
+      [part="input-field"] ::slotted(*)::-webkit-input-placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.05s;
         opacity: 1;
       }
 
-      [part="value"]:-ms-input-placeholder {
+      [part="value"]:-ms-input-placeholder,
+      [part="input-field"] ::slotted(*):-ms-input-placeholder {
         color: var(--material-disabled-text-color);
       }
 
-      [part="value"]::-moz-placeholder {
+      [part="value"]::-moz-placeholder,
+      [part="input-field"] ::slotted(*)::-moz-placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.05s;
         opacity: 1;
       }
 
-      [part="value"]::placeholder {
+      [part="value"]::placeholder,
+      [part="input-field"] ::slotted(*)::placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.1s;
         opacity: 1;
       }
 
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-webkit-input-placeholder {
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-webkit-input-placeholder,
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) ::slotted(*)::-webkit-input-placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-moz-placeholder {
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-moz-placeholder,
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) ::slotted(*)::-moz-placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::placeholder {
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::placeholder,
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) ::slotted(*)::placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
       /* IE11 doesn’t show the placeholder when the input is focused, so it’s basically useless for this theme */
-      :host([has-label]) [part="value"]:-ms-input-placeholder {
+      :host([has-label]) [part="value"]:-ms-input-placeholder,
+      :host([has-label]) ::slotted(*):-ms-input-placeholder {
         opacity: 0;
       }
 
@@ -209,7 +221,7 @@
 
       /* Slotted content */
 
-      [part="input-field"] ::slotted(*:not([part="value"])) {
+      [part="input-field"] ::slotted(*:not([part="value"]):not(input):not(textarea)) {
         color: var(--material-secondary-text-color);
       }
 

From 784e0ad35b1c6c905ab6d5a0b341bb5e8a19bddf Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 29 Nov 2018 14:17:22 +0200
Subject: [PATCH 02/13] Update tests and include custom-input tests for slotted
 input

---
 test/accessibility.html  | 355 +++++++++++++++----------
 test/custom-input.html   | 171 ++++++++++++
 test/password-field.html | 214 ++++++++-------
 test/test-suites.js      |   3 +-
 test/text-area.html      | 548 ++++++++++++++++++++-------------------
 test/text-field.html     | 402 ++++++++++++++--------------
 test/validation.html     | 289 ++++++++++++---------
 7 files changed, 1155 insertions(+), 827 deletions(-)
 create mode 100644 test/custom-input.html

diff --git a/test/accessibility.html b/test/accessibility.html
index cad15f07..9f42a984 100644
--- a/test/accessibility.html
+++ b/test/accessibility.html
@@ -19,18 +19,42 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="vaadin-text-field-default-with-slotted-input">
+    <template>
+      <vaadin-text-field>
+        <input slot="input">
+      </vaadin-text-field>
+    </template>
+  </test-fixture>
+
   <test-fixture id="vaadin-text-field-error-fixture">
     <template>
       <vaadin-text-field required error-message="ERR"></vaadin-text-field>
     </template>
   </test-fixture>
 
+  <test-fixture id="vaadin-text-field-error-fixture-with-slotted-input">
+    <template>
+      <vaadin-text-field required error-message="ERR">
+        <input slot="input"> 
+      </vaadin-text-field>
+    </template>
+  </test-fixture>
+
   <test-fixture id="vaadin-text-field-invalid-fixture">
     <template>
       <vaadin-text-field invalid error-message="ERR"></vaadin-text-field>
     </template>
   </test-fixture>
 
+  <test-fixture id="vaadin-text-field-invalid-fixture-with-slotted-input">
+    <template>
+      <vaadin-text-field invalid error-message="ERR">
+        <input slot="input">  
+      </vaadin-text-field>
+    </template>
+  </test-fixture>
+
   <test-fixture id="vaadin-text-field-multiple-fields">
     <template>
       <vaadin-text-field></vaadin-text-field>
@@ -38,191 +62,244 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="vaadin-text-field-multiple-fields-with-slotted-input">
+    <template>
+      <vaadin-text-field>
+        <input slot="input">  
+      </vaadin-text-field>
+      <vaadin-text-field>
+        <input slot="input">  
+      </vaadin-text-field>
+    </template>
+  </test-fixture>
+
   <test-fixture id="vaadin-text-area-default">
-      <template>
-        <vaadin-text-area></vaadin-text-area>
-      </template>
-    </test-fixture>
-
-    <test-fixture id="vaadin-text-area-error-fixture">
-      <template>
-        <vaadin-text-area required error-message="ERR"></vaadin-text-area>
-      </template>
-    </test-fixture>
-
-    <test-fixture id="vaadin-text-area-invalid-fixture">
-      <template>
-        <vaadin-text-area invalid error-message="ERR"></vaadin-text-area>
-      </template>
-    </test-fixture>
-
-    <test-fixture id="vaadin-text-area-multiple-fields">
-      <template>
-        <vaadin-text-area></vaadin-text-area>
-        <vaadin-text-area></vaadin-text-field>
-      </template>
-    </test-fixture>
+    <template>
+      <vaadin-text-area></vaadin-text-area>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="vaadin-text-area-default-with-slotted-input">
+    <template>
+      <vaadin-text-area>
+        <textarea slot="textarea"></textarea>
+      </vaadin-text-area>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="vaadin-text-area-error-fixture">
+    <template>
+      <vaadin-text-area required error-message="ERR"></vaadin-text-area>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="vaadin-text-area-error-fixture-with-slotted-input">
+    <template>
+      <vaadin-text-area required error-message="ERR">
+        <textarea slot="textarea"></textarea> 
+      </vaadin-text-area>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="vaadin-text-area-invalid-fixture">
+    <template>
+      <vaadin-text-area invalid error-message="ERR"></vaadin-text-area>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="vaadin-text-area-invalid-fixture-with-slotted-input">
+    <template>
+      <vaadin-text-area invalid error-message="ERR">
+        <textarea slot="textarea"></textarea> 
+      </vaadin-text-area>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="vaadin-text-area-multiple-fields">
+    <template>
+      <vaadin-text-area></vaadin-text-area>
+      <vaadin-text-area></vaadin-text-field>
+    </template>
+  </test-fixture>
 
+  <test-fixture id="vaadin-text-area-multiple-fields-with-slotted-input">
+    <template>
+      <vaadin-text-area>
+        <textarea slot="textarea"></textarea>
+      </vaadin-text-area>
+      <vaadin-text-area>
+        <textarea slot="textarea"></textarea>
+      </vaadin-text-field>
+    </template>
+  </test-fixture>
+  
   <script>
-    describe('keyboard', function() {
-      let textField, escKeyDownEvent;
+    ['', 'with slotted input'].forEach(condition => {
+      let fixtureName = '';
+      if (condition !== '') {
+        fixtureName = '-with-slotted-input';
+      }
 
-      beforeEach(function() {
-        textField = fixture(`vaadin-text-field-default`);
+      describe(`keyboard ${condition}`, function() {
+        let textField, escKeyDownEvent;
 
-        escKeyDownEvent = new CustomEvent('keydown', {
-          bubbles: true,
-          cancelable: true
+        beforeEach(function() {
+          textField = fixture(`vaadin-text-field-default${fixtureName}`);
+
+          escKeyDownEvent = new CustomEvent('keydown', {
+            bubbles: true,
+            cancelable: true
+          });
+          escKeyDownEvent.keyCode = 27;
+          escKeyDownEvent.code = 27;
         });
-        escKeyDownEvent.keyCode = 27;
-        escKeyDownEvent.code = 27;
-      });
 
-      it('should clear the value on ESC if clear button is visible', function() {
-        textField.value = 'Foo';
-        textField.clearButtonVisible = true;
-        textField.dispatchEvent(escKeyDownEvent);
-        expect(textField.value).not.to.be.ok;
-      });
+        it('should clear the value on ESC if clear button is visible', function() {
+          textField.value = 'Foo';
+          textField.clearButtonVisible = true;
+          textField.dispatchEvent(escKeyDownEvent);
+          expect(textField.value).not.to.be.ok;
+        });
+
+        it('should not clear the value on ESC if clear button is not visible', function() {
+          textField.value = 'Foo';
+          textField.dispatchEvent(escKeyDownEvent);
+          expect(textField.value).to.be.equal('Foo');
+        });
 
-      it('should not clear the value on ESC if clear button is not visible', function() {
-        textField.value = 'Foo';
-        textField.dispatchEvent(escKeyDownEvent);
-        expect(textField.value).to.be.equal('Foo');
       });
 
-    });
+      ['vaadin-text-field', 'vaadin-text-area'].forEach(el => {
+        describe(`${el}: accessibility ${condition}`, function() {
 
-    ['vaadin-text-field', 'vaadin-text-area'].forEach(el => {
-      describe(`${el}: accessibility`, function() {
+          describe(`default ${condition}`, function() {
+            let tf, label, input;
 
-        describe('default', function() {
-          let tf, label, input;
+            beforeEach(function() {
+              tf = fixture(`${el}-default${fixtureName}`);
+              input = tf.focusElement;
+              label = tf.root.querySelector('[part=label]');
+            });
 
-          beforeEach(function() {
-            tf = fixture(`${el}-default`);
-            input = tf.focusElement;
-            label = tf.root.querySelector('[part=label]');
-          });
+            it('should label the input', function() {
+              tf.label = 'foo';
+              expect(input.getAttribute('aria-labelledby')).to.equal(label.id);
+            });
 
-          it('should label the input', function() {
-            tf.label = 'foo';
-            expect(input.getAttribute('aria-labelledby')).to.equal(label.id);
-          });
+            it('should not label the input', function() {
+              expect(input.hasAttribute('aria-labelledby')).to.be.false;
+            });
 
-          it('should not label the input', function() {
-            expect(input.hasAttribute('aria-labelledby')).to.be.false;
-          });
+            it('should not be marked required', function() {
+              expect(input.hasAttribute('aria-required')).to.be.false;
+            });
 
-          it('should not be marked required', function() {
-            expect(input.hasAttribute('aria-required')).to.be.false;
-          });
+            it('should be marked required', function() {
+              tf.required = true;
+              expect(input.hasAttribute('aria-required')).to.be.true;
+            });
 
-          it('should be marked required', function() {
-            tf.required = true;
-            expect(input.hasAttribute('aria-required')).to.be.true;
-          });
+            it('should not be marked readonly', function() {
+              expect(input.hasAttribute('aria-readonly')).to.be.false;
+            });
 
-          it('should not be marked readonly', function() {
-            expect(input.hasAttribute('aria-readonly')).to.be.false;
-          });
+            it('should be marked readonly', function() {
+              tf.readonly = true;
+              expect(input.hasAttribute('aria-readonly')).to.be.true;
+            });
 
-          it('should be marked readonly', function() {
-            tf.readonly = true;
-            expect(input.hasAttribute('aria-readonly')).to.be.true;
           });
 
-        });
+          describe(`error ${condition}`, function() {
+            let tf, err, input;
 
-        describe('error', function() {
-          let tf, err, input;
+            beforeEach(function() {
+              tf = fixture(`${el}-error-fixture${fixtureName}`);
+              input = tf.focusElement;
+              err = tf.root.querySelector('[part=error-message]');
+            });
 
-          beforeEach(function() {
-            tf = fixture(`${el}-error-fixture`);
-            input = tf.focusElement;
-            err = tf.root.querySelector('[part=error-message]');
-          });
+            it('should have an error element', function() {
+              expect(err).to.be.ok;
+            });
 
-          it('should have an error element', function() {
-            expect(err).to.be.ok;
-          });
+            it('should not announce the error message initially', function() {
+              expect(err.getAttribute('aria-hidden')).to.equal('true');
+            });
 
-          it('should not announce the error message initially', function() {
-            expect(err.getAttribute('aria-hidden')).to.equal('true');
-          });
+            it('should announce the error message after validation is run', function() {
+              tf.validate();
+              expect(window.getComputedStyle(err).display).not.to.equal('none');
+              expect(err.getAttribute('aria-hidden')).to.equal('false');
+            });
 
-          it('should announce the error message after validation is run', function() {
-            tf.validate();
-            expect(window.getComputedStyle(err).display).not.to.equal('none');
-            expect(err.getAttribute('aria-hidden')).to.equal('false');
-          });
+            it('should not announce the error message if error-message is empty', function() {
+              tf.errorMessage = '';
+              tf.validate();
+              expect(err.getAttribute('aria-hidden')).to.equal('true');
+            });
 
-          it('should not announce the error message if error-message is empty', function() {
-            tf.errorMessage = '';
-            tf.validate();
-            expect(err.getAttribute('aria-hidden')).to.equal('true');
-          });
+            it('should not have aria-describedby attribute if valid', function() {
+              expect(input.hasAttribute('aria-describedby')).to.be.false;
+            });
 
-          it('should not have aria-describedby attribute if valid', function() {
-            expect(input.hasAttribute('aria-describedby')).to.be.false;
-          });
+            it('should have aria-describedby attribute when invalid', function() {
+              tf.validate();
+              expect(input.getAttribute('aria-describedby')).to.equal(err.id);
+            });
 
-          it('should have aria-describedby attribute when invalid', function() {
-            tf.validate();
-            expect(input.getAttribute('aria-describedby')).to.equal(err.id);
-          });
+            it('should have appropriate aria-live attribute', function() {
+              expect(err.getAttribute('aria-live')).to.equal('assertive');
+            });
 
-          it('should have appropriate aria-live attribute', function() {
-            expect(err.getAttribute('aria-live')).to.equal('assertive');
           });
 
-        });
+          describe(`invalid ${condition}`, function() {
+            let tf, err, input;
 
-        describe('invalid', function() {
-          let tf, err, input;
+            beforeEach(function() {
+              tf = fixture(`${el}-invalid-fixture${fixtureName}`);
+              err = tf.root.querySelector('[part=error-message]');
+              input = tf.focusElement;
+            });
 
-          beforeEach(function() {
-            tf = fixture(`${el}-invalid-fixture`);
-            err = tf.root.querySelector('[part=error-message]');
-            input = tf.focusElement;
-          });
+            it('should show the error if initially invalid', function() {
+              expect(window.getComputedStyle(err).display).not.to.equal('none');
+            });
 
-          it('should show the error if initially invalid', function() {
-            expect(window.getComputedStyle(err).display).not.to.equal('none');
-          });
+            it('should be marked invalid', function() {
+              expect(input.hasAttribute('aria-invalid')).to.be.true;
+            });
 
-          it('should be marked invalid', function() {
-            expect(input.hasAttribute('aria-invalid')).to.be.true;
-          });
+            it('should not be marked invalid', function() {
+              tf.invalid = false;
+              expect(input.hasAttribute('aria-invalid')).to.be.false;
+            });
 
-          it('should not be marked invalid', function() {
-            tf.invalid = false;
-            expect(input.hasAttribute('aria-invalid')).to.be.false;
           });
 
-        });
+          describe(`multiple fields ${condition}`, function() {
+            let fields;
 
-        describe('multiple fields', function() {
-          let fields;
+            beforeEach(function() {
+              fields = fixture(`${el}-multiple-fields${fixtureName}`);
+            });
 
-          beforeEach(function() {
-            fields = fixture(`${el}-multiple-fields`);
-          });
+            it('should have unique error identifiers', function() {
+              var err0 = fields[0].root.querySelector('[part=error-message]');
+              var err1 = fields[1].root.querySelector('[part=error-message]');
+              expect(err0.id).not.to.equal(err1.id);
+            });
 
-          it('should have unique error identifiers', function() {
-            var err0 = fields[0].root.querySelector('[part=error-message]');
-            var err1 = fields[1].root.querySelector('[part=error-message]');
-            expect(err0.id).not.to.equal(err1.id);
-          });
+            it('should have unique label identifiers', function() {
+              var label0 = fields[0].root.querySelector('[part=label]');
+              var label1 = fields[1].root.querySelector('[part=label]');
+              expect(label0.id).not.to.equal(label1.id);
+            });
 
-          it('should have unique label identifiers', function() {
-            var label0 = fields[0].root.querySelector('[part=label]');
-            var label1 = fields[1].root.querySelector('[part=label]');
-            expect(label0.id).not.to.equal(label1.id);
           });
 
         });
-
       });
     });
 
diff --git a/test/custom-input.html b/test/custom-input.html
new file mode 100644
index 00000000..cb85c110
--- /dev/null
+++ b/test/custom-input.html
@@ -0,0 +1,171 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-text-field tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../vaadin-text-field.html">
+  <link rel="import" href="../../iron-form/iron-form.html">
+
+</head>
+
+<body>
+  <test-fixture id="default">
+    <template>
+      <vaadin-text-field>
+        <input slot="input">
+      </vaadin-text-field>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="without-slotted">
+    <template>
+      <vaadin-text-field></vaadin-text-field>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('custom input', function() {
+      var textField, input;
+
+      beforeEach(function() {
+        textField = fixture('default');
+        input = textField.firstElementChild;
+      });
+
+      it('should set focusElement to the slotted input', () => {
+        expect(textField.focusElement).to.equal(input);
+      });
+
+      it('should update value when slotted input value changes', () => {
+        input.value = 'foo';
+        input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true, composed: true}));
+        expect(textField.value).to.be.equal('foo');
+      });
+
+      it('should dispatch change event on slotted input change', done => {
+        const changeEvent = new Event('change');
+        textField.addEventListener('change', e => {
+          expect(e.detail.sourceEvent).to.equal(changeEvent);
+          done();
+        });
+        input.dispatchEvent(changeEvent);
+      });
+    });
+
+    describe('attributes', function() {
+      var textField, input;
+
+      beforeEach(function() {
+        textField = fixture('default');
+        input = textField.firstElementChild;
+      });
+
+      ['readonly', 'disabled', 'required', 'invalid'].forEach(attr => {
+        it(`should propagate ${attr} attribute to the input if it was defined on host`, () => {
+          textField.setAttribute(attr, '');
+          expect(input.hasAttribute(attr)).to.be.true;
+        });
+      });
+    });
+
+    describe('removed slotted input', function() {
+      var textField, input, defaultInput;
+
+      function dispatchSlotChange() {
+        // NOTE(yuriy): Workaround not to use timeouts
+        const evt = new CustomEvent('slotchange');
+        textField.shadowRoot.querySelector('[name="input"]').dispatchEvent(evt);
+      }
+
+      beforeEach(function() {
+        textField = fixture('default');
+        input = textField.firstElementChild;
+        defaultInput = textField.shadowRoot.querySelector('[part~="value"]');
+      });
+
+      it('should set focusElement to the default input', () => {
+        textField.removeChild(input);
+        expect(textField.focusElement).to.equal(defaultInput);
+      });
+
+      it('should set value to the default input', () => {
+        textField.value = 'foo';
+        textField.removeChild(input);
+        dispatchSlotChange();
+        expect(defaultInput.value).to.equal('foo');
+      });
+
+      describe('attributes', function() {
+        ['readonly', 'disabled', 'required', 'invalid'].forEach(attr => {
+          it(`should propagate ${attr} to the default input if it was defined on host`, () => {
+            textField.setAttribute(attr, '');
+            expect(input.hasAttribute(attr)).to.be.true;
+            textField.removeChild(input);
+            dispatchSlotChange();
+            expect(defaultInput.hasAttribute(attr)).to.be.true;
+          });
+        });
+      });
+    });
+
+    describe('lazily attached slotted input', function() {
+      var textField, input;
+
+      function dispatchSlotChange() {
+        // NOTE(yuriy): Workaround not to use timeouts
+        const evt = new CustomEvent('slotchange');
+        textField.shadowRoot.querySelector('[name="input"]').dispatchEvent(evt);
+      }
+
+      beforeEach(function() {
+        textField = fixture('without-slotted');
+        input = document.createElement('input');
+        input.setAttribute('slot', 'input');
+      });
+
+      it('should set focusElement to the slotted input', () => {
+        textField.appendChild(input);
+        expect(textField.focusElement).to.equal(input);
+      });
+
+      it('should set value to the slotted input', () => {
+        textField.value = 'foo';
+        textField.appendChild(input);
+        dispatchSlotChange();
+        expect(input.value).to.equal('foo');
+      });
+
+      it('should warn if value was defined on the slotted input', () => {
+        const spy = console.warn = sinon.spy();
+
+        input.value = 'foo';
+        textField.appendChild(input);
+        dispatchSlotChange();
+
+        expect(spy.called).to.be.true;
+      });
+
+      it('should clear the value when initially defined on the slotted input', () => {
+        input.value = 'foo';
+        textField.appendChild(input);
+        dispatchSlotChange();
+        expect(input.value).to.equal('');
+      });
+
+      describe('attributes', function() {
+        ['readonly', 'disabled', 'required', 'invalid'].forEach(attr => {
+          it(`should propagate ${attr} to the slotted input if it was defined on host`, () => {
+            textField.setAttribute(attr, '');
+            textField.appendChild(input);
+            dispatchSlotChange();
+            expect(input.hasAttribute(attr)).to.be.true;
+          });
+        });
+      });
+    });
+  </script>
+</body>
diff --git a/test/password-field.html b/test/password-field.html
index 265b9005..09edd8a7 100644
--- a/test/password-field.html
+++ b/test/password-field.html
@@ -19,127 +19,141 @@
     </template>
   </test-fixture>
 
-  <script>
-
-    describe('password-field', function() {
-      var passwordField, input, revealButton;
-
-      beforeEach(function() {
-        passwordField = fixture('default');
-        input = passwordField.focusElement;
-        revealButton = passwordField.root.querySelector('[part=reveal-button]');
-      });
-
-      describe('password visibility', function() {
-        it('should have [type=password]', function() {
-          expect(input.type).to.equal('password');
-        });
-
-        it('should reveal the password on click on eye-icons', function() {
-          revealButton.click();
-          expect(input.type).to.equal('text');
+  <test-fixture id="default-with-slotted-input">
+    <template>
+      <vaadin-password-field>
+        <input type="password" slot="input">
+      </vaadin-password-field>
+    </template>
+  </test-fixture>
 
-          revealButton.click();
-          expect(input.type).to.equal('password');
+  <script>
+    ['', 'with slotted input'].forEach(condition => {
+      let fixtureName = '';
+      if (condition !== '') {
+        fixtureName = '-with-slotted-input';
+      }
+
+      describe(`password-field ${condition}`, function() {
+        var passwordField, input, revealButton;
+
+        beforeEach(function() {
+          passwordField = fixture(`default${fixtureName}`);
+          input = passwordField.focusElement;
+          revealButton = passwordField.root.querySelector('[part=reveal-button]');
         });
 
-        it('should hide the password on blur', function() {
-          passwordField.focus();
-          revealButton.click();
-          expect(input.type).to.equal('text');
+        describe(`password visibility ${condition}`, function() {
+          it('should have [type=password]', function() {
+            expect(input.type).to.equal('password');
+          });
 
-          passwordField.dispatchEvent(new Event('focusout'));
-          expect(input.type).to.equal('password');
-        });
+          it('should reveal the password on click on eye-icons', function() {
+            revealButton.click();
+            expect(input.type).to.equal('text');
 
-        describe('change events', function() {
-          let changeSpy, inputChangeSpy, hasFocus;
-
-          function blurField() {
-            input.blur();
-            passwordField.dispatchEvent(new CustomEvent('blur'));
-            passwordField.dispatchEvent(new CustomEvent('focusout'));
-          }
-
-          beforeEach(() => {
-            changeSpy = sinon.spy();
-            inputChangeSpy = sinon.spy();
-
-            input._firedChangeValue = '';
-            input.blur = () => {
-              if (input._firedChangeValue !== input.value) {
-                const changeEvent = new CustomEvent('change', {
-                  bubbles: true
-                });
-                input.dispatchEvent(changeEvent);
-                input._firedChangeValue = input.value;
-              }
-              hasFocus = false;
-            };
-            input.focus = () => {
-              hasFocus = true;
-            };
-
-            passwordField.addEventListener('change', changeSpy);
-            input.addEventListener('change', inputChangeSpy);
+            revealButton.click();
+            expect(input.type).to.equal('password');
           });
 
-          it('should dispatch cached change after visibility change', () => {
-            input.value = 'foo';
+          it('should hide the password on blur', function() {
+            passwordField.focus();
             revealButton.click();
-            expect(changeSpy.called).to.be.false;
-            expect(hasFocus).to.be.true;
-            expect(inputChangeSpy.callCount).to.equal(1);
-            blurField();
-            expect(changeSpy.callCount).to.equal(1);
-            expect(inputChangeSpy.callCount).to.equal(1);
+            expect(input.type).to.equal('text');
+
+            passwordField.dispatchEvent(new Event('focusout'));
+            expect(input.type).to.equal('password');
           });
 
-          it('should dispatch new change after visibility change', () => {
-            input.value = 'foo';
-            revealButton.click();
-            input.value = 'foo-bar';
-            blurField();
-            expect(changeSpy.callCount).to.equal(1);
-            expect(inputChangeSpy.callCount).to.equal(2);
+          describe(`change events ${condition}`, function() {
+            let changeSpy, inputChangeSpy, hasFocus;
+
+            function blurField() {
+              input.blur();
+              passwordField.dispatchEvent(new CustomEvent('blur'));
+              passwordField.dispatchEvent(new CustomEvent('focusout'));
+            }
+
+            beforeEach(() => {
+              changeSpy = sinon.spy();
+              inputChangeSpy = sinon.spy();
+
+              input._firedChangeValue = '';
+              input.blur = () => {
+                if (input._firedChangeValue !== input.value) {
+                  const changeEvent = new CustomEvent('change', {
+                    bubbles: true
+                  });
+                  input.dispatchEvent(changeEvent);
+                  input._firedChangeValue = input.value;
+                }
+                hasFocus = false;
+              };
+              input.focus = () => {
+                hasFocus = true;
+              };
+
+              passwordField.addEventListener('change', changeSpy);
+              input.addEventListener('change', inputChangeSpy);
+            });
+
+            it('should dispatch cached change after visibility change', () => {
+              input.value = 'foo';
+              revealButton.click();
+              expect(changeSpy.called).to.be.false;
+              expect(hasFocus).to.be.true;
+              expect(inputChangeSpy.callCount).to.equal(1);
+              blurField();
+              expect(changeSpy.callCount).to.equal(1);
+              expect(inputChangeSpy.callCount).to.equal(1);
+            });
+
+            it('should dispatch new change after visibility change', () => {
+              input.value = 'foo';
+              revealButton.click();
+              input.value = 'foo-bar';
+              blurField();
+              expect(changeSpy.callCount).to.equal(1);
+              expect(inputChangeSpy.callCount).to.equal(2);
+            });
           });
         });
-      });
 
-      describe('eye-icons', function() {
-        it('should hide eye-icon when revealButtonHidden is set to true', function() {
-          expect(revealButton.hidden).to.be.false;
+        describe(`eye-icons ${condition}`, function() {
+          it('should hide eye-icon when revealButtonHidden is set to true', function() {
+            expect(revealButton.hidden).to.be.false;
 
-          passwordField.revealButtonHidden = true;
-          expect(revealButton.hidden).to.be.true;
-        });
+            passwordField.revealButtonHidden = true;
+            expect(revealButton.hidden).to.be.true;
+          });
 
-        it('should prevent mousedown event on reveal-button when focused', function() {
-          const e = new CustomEvent('mousedown', {bubbles: true, cancelable: true});
-          passwordField.focus();
-          revealButton.dispatchEvent(e);
-          expect(e.defaultPrevented).to.be.true;
-        });
+          it('should prevent mousedown event on reveal-button when focused', function() {
+            const e = new CustomEvent('mousedown', {bubbles: true, cancelable: true});
+            passwordField.focus();
+            revealButton.dispatchEvent(e);
+            expect(e.defaultPrevented).to.be.true;
+          });
 
-        it('should not prevent mousedown event on reveal-button when not focused', function() {
-          const e = new CustomEvent('mousedown', {bubbles: true, cancelable: true});
-          revealButton.dispatchEvent(e);
-          expect(e.defaultPrevented).to.be.false;
-        });
+          it('should not prevent mousedown event on reveal-button when not focused', function() {
+            const e = new CustomEvent('mousedown', {bubbles: true, cancelable: true});
+            revealButton.dispatchEvent(e);
+            expect(e.defaultPrevented).to.be.false;
+          });
 
-        it('should prevent touchend event on reveal-button', () => {
-          const e = new CustomEvent('touchend', {cancelable: true});
+          it('should prevent touchend event on reveal-button', () => {
+            const e = new CustomEvent('touchend', {cancelable: true});
 
-          revealButton.dispatchEvent(e);
-          expect(e.defaultPrevented).to.be.true;
-          expect(input.type).to.equal('text');
+            revealButton.dispatchEvent(e);
+            expect(e.defaultPrevented).to.be.true;
+            expect(input.type).to.equal('text');
 
-          revealButton.dispatchEvent(e);
-          expect(e.defaultPrevented).to.be.true;
-          expect(input.type).to.equal('password');
+            revealButton.dispatchEvent(e);
+            expect(e.defaultPrevented).to.be.true;
+            expect(input.type).to.equal('password');
+          });
         });
-      });
 
+      });
     });
   </script>
 </body>
diff --git a/test/test-suites.js b/test/test-suites.js
index 76a27d8a..7cad4ce1 100644
--- a/test/test-suites.js
+++ b/test/test-suites.js
@@ -3,5 +3,6 @@ window.VaadinTextFieldSuites = [
   'text-area.html',
   'password-field.html',
   'validation.html',
-  'accessibility.html'
+  'accessibility.html',
+  'custom-input.html'
 ];
diff --git a/test/text-area.html b/test/text-area.html
index b6b471e4..a1a94b3a 100644
--- a/test/text-area.html
+++ b/test/text-area.html
@@ -18,338 +18,352 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="default-with-slotted-input">
+    <template>
+      <vaadin-text-area>
+        <textarea slot="textarea"></textarea>
+      </vaadin-text-area>
+    </template>
+  </test-fixture>
+
   <script>
+    ['', 'with slotted input'].forEach(condition => {
+      let fixtureName = '';
+      if (condition !== '') {
+        fixtureName = '-with-slotted-input';
+      }
 
-    describe('properties', () => {
-      var textArea, input;
+      describe(`properties ${condition}`, () => {
+        var textArea, input;
 
-      beforeEach(() => {
-        textArea = fixture('default');
-        input = textArea.focusElement;
-      });
+        beforeEach(() => {
+          textArea = fixture(`default${fixtureName}`);
+          input = textArea.focusElement;
+        });
 
-      describe('native', () => {
+        describe(`native ${condition}`, () => {
 
-        function assertAttrCanBeSet(prop, value) {
-          textArea[prop] = value;
-          var attrval = input.getAttribute(prop);
+          function assertAttrCanBeSet(prop, value) {
+            textArea[prop] = value;
+            var attrval = input.getAttribute(prop);
 
-          if (value === true) {
-            expect(attrval).not.to.be.null;
-          } else if (value === false) {
-            expect(attrval).to.be.null;
-          } else if (value) {
-            expect(attrval).to.be.equal(String(value));
+            if (value === true) {
+              expect(attrval).not.to.be.null;
+            } else if (value === false) {
+              expect(attrval).to.be.null;
+            } else if (value) {
+              expect(attrval).to.be.equal(String(value));
+            }
           }
-        }
 
-        function assertPropCanBeSet(prop, value) {
-          textArea[prop] = value;
-          expect(input[prop]).to.be.equal(value);
-        }
+          function assertPropCanBeSet(prop, value) {
+            textArea[prop] = value;
+            expect(input[prop]).to.be.equal(value);
+          }
 
-        ['placeholder', 'value'].forEach(prop => {
-          it('should set string property ' + prop, () => {
-            assertPropCanBeSet(prop, 'foo');
+          ['placeholder', 'value'].forEach(prop => {
+            it('should set string property ' + prop, () => {
+              assertPropCanBeSet(prop, 'foo');
+            });
           });
-        });
 
-        ['autofocus', 'disabled'].forEach(prop => {
-          it('should set boolean property ' + prop, () => {
-            assertPropCanBeSet(prop, true);
+          ['autofocus', 'disabled'].forEach(prop => {
+            it('should set boolean property ' + prop, () => {
+              assertPropCanBeSet(prop, true);
+            });
           });
-        });
 
-        ['maxlength', 'minlength'].forEach(prop => {
-          it('should set numeric attribute ' + prop, () => {
-            assertAttrCanBeSet(prop, 2);
+          ['maxlength', 'minlength'].forEach(prop => {
+            it('should set numeric attribute ' + prop, () => {
+              assertAttrCanBeSet(prop, 2);
+            });
           });
-        });
 
-        ['autocomplete'].forEach(prop => {
-          it('should set boolean attribute ' + prop, () => {
-            assertAttrCanBeSet(prop, 'on');
+          ['autocomplete'].forEach(prop => {
+            it('should set boolean attribute ' + prop, () => {
+              assertAttrCanBeSet(prop, 'on');
+            });
           });
-        });
 
-        ['autocapitalize'].forEach(function(prop) {
-          it('should set boolean attribute ' + prop, function() {
-            assertAttrCanBeSet(prop, 'off');
+          ['autocapitalize'].forEach(function(prop) {
+            it('should set boolean attribute ' + prop, function() {
+              assertAttrCanBeSet(prop, 'off');
+            });
           });
-        });
 
-        ['autocomplete', 'autocorrect', 'readonly', 'required'].forEach(prop => {
-          it('should set boolean attribute ' + prop, () => {
-            assertAttrCanBeSet(prop, true);
-            assertAttrCanBeSet(prop, false);
+          ['autocomplete', 'autocorrect', 'readonly', 'required'].forEach(prop => {
+            it('should set boolean attribute ' + prop, () => {
+              assertAttrCanBeSet(prop, true);
+              assertAttrCanBeSet(prop, false);
+            });
           });
         });
-      });
 
-      describe('binding', () => {
-        it('default value should be empty string', () => {
-          expect(textArea.value).to.be.equal('');
-        });
+        describe(`binding ${condition}`, () => {
+          it('default value should be empty string', () => {
+            expect(textArea.value).to.be.equal('');
+          });
 
-        it('setting input value updates value', () => {
-          input.value = 'foo';
-          input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true, composed: true}));
-          expect(textArea.value).to.be.equal('foo');
-        });
+          it('setting input value updates value', () => {
+            input.value = 'foo';
+            input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true, composed: true}));
+            expect(textArea.value).to.be.equal('foo');
+          });
 
-        it('setting input value updates has-value attribute', () => {
-          textArea.value = 'foo';
-          expect(textArea.hasAttribute('has-value')).to.be.true;
-        });
+          it('setting input value updates has-value attribute', () => {
+            textArea.value = 'foo';
+            expect(textArea.hasAttribute('has-value')).to.be.true;
+          });
 
-        it('setting value to undefine should not update has-value attribute', () => {
-          textArea.value = undefined;
-          expect(textArea.hasAttribute('has-value')).to.be.false;
-        });
+          it('setting value to undefine should not update has-value attribute', () => {
+            textArea.value = undefined;
+            expect(textArea.hasAttribute('has-value')).to.be.false;
+          });
 
-        it('setting empty value does not update has-value attribute', () => {
-          textArea.value = '';
-          expect(textArea.hasAttribute('has-value')).to.be.false;
-        });
+          it('setting empty value does not update has-value attribute', () => {
+            textArea.value = '';
+            expect(textArea.hasAttribute('has-value')).to.be.false;
+          });
 
-        // User could accidently set a 0 or false value
-        it('setting number value updates has-value attribute', () => {
-          textArea.value = 0;
-          expect(textArea.hasAttribute('has-value')).to.be.true;
-        });
+          // User could accidently set a 0 or false value
+          it('setting number value updates has-value attribute', () => {
+            textArea.value = 0;
+            expect(textArea.hasAttribute('has-value')).to.be.true;
+          });
 
-        it('setting boolean value updates has-value attribute', () => {
-          textArea.value = false;
-          expect(textArea.hasAttribute('has-value')).to.be.true;
+          it('setting boolean value updates has-value attribute', () => {
+            textArea.value = false;
+            expect(textArea.hasAttribute('has-value')).to.be.true;
+          });
         });
-      });
 
-      if (!window.ShadyDOM) {
-        describe('label', () => {
-          it('should not update focused property on click if disabled', () => {
-            textArea.disabled = true;
-            const label = textArea.root.querySelector('[part="label"]');
-            label.click();
-            expect(textArea.getAttribute('focused')).to.be.null;
+        if (!window.ShadyDOM) {
+          describe(`label ${condition}`, () => {
+            it('should not update focused property on click if disabled', () => {
+              textArea.disabled = true;
+              const label = textArea.root.querySelector('[part="label"]');
+              label.click();
+              expect(textArea.getAttribute('focused')).to.be.null;
+            });
           });
-        });
-      }
+        }
 
-    });
+      });
 
-    describe('vaadin-text-area-appear', () => {
-      let textArea;
+      describe(`vaadin-text-area-appear${condition}`, () => {
+        let textArea;
 
-      beforeEach(() => textArea = fixture('default'));
+        beforeEach(() => textArea = fixture(`default${fixtureName}`));
 
-      it('should update height on show after hidden', done => {
-        const savedHeight = textArea.clientHeight;
-        textArea.hidden = true;
-        // Three new lines will expand initial height
-        textArea.value = '\n\n\n';
-        textArea.addEventListener('animationend', e => {
-          expect(textArea.clientHeight).to.be.above(savedHeight);
-          done();
+        it('should update height on show after hidden', done => {
+          const savedHeight = textArea.clientHeight;
+          textArea.hidden = true;
+          // Three new lines will expand initial height
+          textArea.value = '\n\n\n';
+          textArea.addEventListener('animationend', e => {
+            expect(textArea.clientHeight).to.be.above(savedHeight);
+            done();
+          });
+          textArea.hidden = false;
         });
-        textArea.hidden = false;
-      });
 
-      it('should not update height on custom animation name', done => {
-        const spy = sinon.spy(textArea, '_updateHeight');
-        textArea.addEventListener('animationend', e => {
-          expect(spy.called).to.be.false;
-          done();
-        });
+        it('should not update height on custom animation name', done => {
+          const spy = sinon.spy(textArea, '_updateHeight');
+          textArea.addEventListener('animationend', e => {
+            expect(spy.called).to.be.false;
+            done();
+          });
 
-        const ev = new Event('animationend');
-        ev.animationName = 'foo';
-        textArea.dispatchEvent(ev);
+          const ev = new Event('animationend');
+          ev.animationName = 'foo';
+          textArea.dispatchEvent(ev);
+        });
       });
-    });
 
-    describe('multi-line', () => {
-      let textArea, input, inputField;
+      describe(`multi-line ${condition}`, () => {
+        let textArea, input, inputField;
 
-      beforeEach(() => {
-        textArea = fixture('default');
-        input = textArea.focusElement;
-        inputField = textArea.shadowRoot.querySelector('[part=input-field]');
-      });
+        beforeEach(() => {
+          textArea = fixture(`default${fixtureName}`);
+          input = textArea.focusElement;
+          inputField = textArea.shadowRoot.querySelector('[part=input-field]');
+        });
 
-      it('should grow height with unwrapped text', () => {
-        const originalHeight = parseInt(window.getComputedStyle(inputField).height);
+        it('should grow height with unwrapped text', () => {
+          const originalHeight = parseInt(window.getComputedStyle(inputField).height);
 
-        // Make sure there are enough characters to grow the textarea
-        textArea.value = Array(400).join('400');
+          // Make sure there are enough characters to grow the textarea
+          textArea.value = Array(400).join('400');
 
-        const newHeight = parseInt(window.getComputedStyle(inputField).height);
-        expect(newHeight).to.be.at.least(originalHeight + 10);
-      });
+          const newHeight = parseInt(window.getComputedStyle(inputField).height);
+          expect(newHeight).to.be.at.least(originalHeight + 10);
+        });
 
-      it('should not grow over max-height', () => {
-        inputField.style.padding = '0';
-        inputField.style.border = 'none';
-        textArea.style.maxHeight = '100px';
-        const container = textArea.root.querySelector('.vaadin-text-area-container');
-
-        textArea.value = `
-        there
-        should
-        be
-        a
-        lot
-        of
-        rows`;
-
-        expect(parseFloat(window.getComputedStyle(textArea).height)).to.be.lte(100);
-        expect(parseFloat(window.getComputedStyle(container).height)).to.be.lte(100);
-        expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.lte(100);
-      });
+        it('should not grow over max-height', () => {
+          inputField.style.padding = '0';
+          inputField.style.border = 'none';
+          textArea.style.maxHeight = '100px';
+          const container = textArea.root.querySelector('.vaadin-text-area-container');
+
+          textArea.value = `
+          there
+          should
+          be
+          a
+          lot
+          of
+          rows`;
+
+          expect(parseFloat(window.getComputedStyle(textArea).height)).to.be.lte(100);
+          expect(parseFloat(window.getComputedStyle(container).height)).to.be.lte(100);
+          expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.lte(100);
+        });
 
-      it('should not shrink less than min-height', () => {
-        textArea.style.minHeight = '125px';
-        const container = textArea.root.querySelector('.vaadin-text-area-container');
+        it('should not shrink less than min-height', () => {
+          textArea.style.minHeight = '125px';
+          const container = textArea.root.querySelector('.vaadin-text-area-container');
 
-        expect(window.getComputedStyle(textArea).height).to.be.equal('125px');
-        expect(window.getComputedStyle(container).height).to.be.equal('125px');
-        expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(100);
+          expect(window.getComputedStyle(textArea).height).to.be.equal('125px');
+          expect(window.getComputedStyle(container).height).to.be.equal('125px');
+          expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(100);
 
-        // Check that value modification doesn't break min-height rule
-        textArea.value = `1 row`;
+          // Check that value modification doesn't break min-height rule
+          textArea.value = `1 row`;
 
-        expect(window.getComputedStyle(textArea).height).to.be.equal('125px');
-        expect(window.getComputedStyle(container).height).to.be.equal('125px');
-        expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(100);
-      });
+          expect(window.getComputedStyle(textArea).height).to.be.equal('125px');
+          expect(window.getComputedStyle(container).height).to.be.equal('125px');
+          expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(100);
+        });
 
-      it('should stay between min and max height', () => {
-        textArea.style.minHeight = '100px';
-        textArea.style.maxHeight = '175px';
-        const container = textArea.root.querySelector('.vaadin-text-area-container');
-
-        expect(window.getComputedStyle(textArea).height).to.be.equal('100px');
-        expect(window.getComputedStyle(container).height).to.be.equal('100px');
-        expect(parseFloat(window.getComputedStyle(input).height)).to.be.below(100);
-
-        // Check that value modification doesn't break min-height rule
-        textArea.value = `
-        there
-        should
-        be
-        a
-        lot
-        of
-        rows
-        and
-        more
-        and
-        even
-        more`;
-
-        expect(window.getComputedStyle(textArea).height).to.be.equal('175px');
-        expect(window.getComputedStyle(container).height).to.be.equal('175px');
-        expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(150);
-      });
+        it('should stay between min and max height', () => {
+          textArea.style.minHeight = '100px';
+          textArea.style.maxHeight = '175px';
+          const container = textArea.root.querySelector('.vaadin-text-area-container');
+
+          expect(window.getComputedStyle(textArea).height).to.be.equal('100px');
+          expect(window.getComputedStyle(container).height).to.be.equal('100px');
+          expect(parseFloat(window.getComputedStyle(input).height)).to.be.below(100);
+
+          // Check that value modification doesn't break min-height rule
+          textArea.value = `
+          there
+          should
+          be
+          a
+          lot
+          of
+          rows
+          and
+          more
+          and
+          even
+          more`;
+
+          expect(window.getComputedStyle(textArea).height).to.be.equal('175px');
+          expect(window.getComputedStyle(container).height).to.be.equal('175px');
+          expect(parseFloat(window.getComputedStyle(inputField).height)).to.be.above(150);
+        });
 
-      it('should increase inputField height', () => {
-        textArea.style.height = '200px';
-        textArea.value = 'foo';
-        expect(inputField.clientHeight).to.be.closeTo(200, 10);
-      });
+        it('should increase inputField height', () => {
+          textArea.style.height = '200px';
+          textArea.value = 'foo';
+          expect(inputField.clientHeight).to.be.closeTo(200, 10);
+        });
 
-      it('should maintain scroll top', () => {
-        textArea.style.maxHeight = '100px';
-        textArea.value = Array(400).join('400');
-        inputField.scrollTop = 200;
-        textArea.value += 'foo';
-        expect(inputField.scrollTop).to.equal(200);
-      });
+        it('should maintain scroll top', () => {
+          textArea.style.maxHeight = '100px';
+          textArea.value = Array(400).join('400');
+          inputField.scrollTop = 200;
+          textArea.value += 'foo';
+          expect(inputField.scrollTop).to.equal(200);
+        });
 
-      it('should decrease height automatically', () => {
-        textArea.value = Array(400).join('400');
-        const height = textArea.clientHeight;
-        textArea.value = '';
-        expect(textArea.clientHeight).to.be.below(height);
-      });
+        it('should decrease height automatically', () => {
+          textArea.value = Array(400).join('400');
+          const height = textArea.clientHeight;
+          textArea.value = '';
+          expect(textArea.clientHeight).to.be.below(height);
+        });
 
-      it('should not change height', () => {
-        textArea.style.maxHeight = '100px';
-        textArea.value = Array(400).join('400');
-        const height = textArea.clientHeight;
+        it('should not change height', () => {
+          textArea.style.maxHeight = '100px';
+          textArea.value = Array(400).join('400');
+          const height = textArea.clientHeight;
 
-        textArea.value = textArea.value.slice(0, -1);
-        expect(textArea.clientHeight).to.equal(height);
-      });
+          textArea.value = textArea.value.slice(0, -1);
+          expect(textArea.clientHeight).to.equal(height);
+        });
 
-      it('should have the correct width', () => {
-        textArea.style.width = '300px';
-        expect(input.clientWidth).to.equal(Math.round(
-          textArea.clientWidth
-          - parseFloat(getComputedStyle(inputField).marginLeft)
-          - parseFloat(getComputedStyle(inputField).marginRight)
-          - parseFloat(getComputedStyle(inputField).paddingLeft)
-          - parseFloat(getComputedStyle(inputField).paddingRight)
-          - parseFloat(getComputedStyle(inputField).borderLeftWidth)
-          - parseFloat(getComputedStyle(inputField).borderRightWidth)
-        ));
-      });
+        it('should have the correct width', () => {
+          textArea.style.width = '300px';
+          expect(input.clientWidth).to.equal(Math.round(
+            textArea.clientWidth
+            - parseFloat(getComputedStyle(inputField).marginLeft)
+            - parseFloat(getComputedStyle(inputField).marginRight)
+            - parseFloat(getComputedStyle(inputField).paddingLeft)
+            - parseFloat(getComputedStyle(inputField).paddingRight)
+            - parseFloat(getComputedStyle(inputField).borderLeftWidth)
+            - parseFloat(getComputedStyle(inputField).borderRightWidth)
+          ));
+        });
 
-      it('should have matching scrollHeight', () => {
-        inputField.style.padding = '0';
-        textArea.style.maxHeight = '100px';
+        it('should have matching scrollHeight', () => {
+          inputField.style.padding = '0';
+          textArea.style.maxHeight = '100px';
 
-        textArea.value = Array(400).join('400');
-        textArea.value = textArea.value.slice(0, -1);
-        expect(input.scrollHeight).to.equal(inputField.scrollHeight);
-      });
+          textArea.value = Array(400).join('400');
+          textArea.value = textArea.value.slice(0, -1);
+          expect(input.scrollHeight).to.equal(inputField.scrollHeight);
+        });
+
+        it('should cover input field', () => {
+          inputField.style.padding = '0';
+          inputField.style.border = 'none';
+          textArea.style.minHeight = '300px';
+          textArea.style.padding = '0';
+          textArea.value = 'foo';
 
-      it('should cover input field', () => {
-        inputField.style.padding = '0';
-        inputField.style.border = 'none';
-        textArea.style.minHeight = '300px';
-        textArea.style.padding = '0';
-        textArea.value = 'foo';
-
-        expect(input.clientHeight).to.equal(Math.round(
-          textArea.clientHeight
-          - parseFloat(getComputedStyle(inputField).marginTop)
-          - parseFloat(getComputedStyle(inputField).marginBottom)
-          - parseFloat(getComputedStyle(inputField).paddingTop)
-          - parseFloat(getComputedStyle(inputField).paddingBottom)
-          - parseFloat(getComputedStyle(inputField).borderTopWidth)
-          - parseFloat(getComputedStyle(inputField).borderBottomWidth)
-        ));
+          expect(input.clientHeight).to.equal(Math.round(
+            textArea.clientHeight
+            - parseFloat(getComputedStyle(inputField).marginTop)
+            - parseFloat(getComputedStyle(inputField).marginBottom)
+            - parseFloat(getComputedStyle(inputField).paddingTop)
+            - parseFloat(getComputedStyle(inputField).paddingBottom)
+            - parseFloat(getComputedStyle(inputField).borderTopWidth)
+            - parseFloat(getComputedStyle(inputField).borderBottomWidth)
+          ));
+        });
       });
-    });
 
-    describe('resize', () => {
-      let textArea, spy;
+      describe(`resize ${condition}`, () => {
+        let textArea, spy;
 
-      beforeEach(() => {
-        textArea = fixture('default');
-        spy = sinon.spy();
-        textArea.addEventListener('iron-resize', spy);
-      });
+        beforeEach(() => {
+          textArea = fixture(`default${fixtureName}`);
+          spy = sinon.spy();
+          textArea.addEventListener('iron-resize', spy);
+        });
 
-      it('should not dispatch `iron-resize` event on init', () => {
-        expect(spy.callCount).to.equal(0);
-      });
+        it('should not dispatch `iron-resize` event on init', () => {
+          expect(spy.callCount).to.equal(0);
+        });
 
-      it('should dispatch `iron-resize` event on height change', () => {
-        textArea.value = `
-        there
-        should
-        be
-        a
-        lot
-        of
-        rows`;
-        expect(spy.callCount).to.equal(1);
-      });
+        it('should dispatch `iron-resize` event on height change', () => {
+          textArea.value = `
+          there
+          should
+          be
+          a
+          lot
+          of
+          rows`;
+          expect(spy.callCount).to.equal(1);
+        });
 
-      it('should not dispatch `iron-resize` event on value change if height did not change', () => {
-        textArea.value = 'just 1 row';
-        expect(spy.callCount).to.equal(0);
+        it('should not dispatch `iron-resize` event on value change if height did not change', () => {
+          textArea.value = 'just 1 row';
+          expect(spy.callCount).to.equal(0);
+        });
       });
     });
   </script>
diff --git a/test/text-field.html b/test/text-field.html
index e2cedf60..5875f9c0 100644
--- a/test/text-field.html
+++ b/test/text-field.html
@@ -19,273 +19,287 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="default-with-slotted-input">
+    <template>
+      <vaadin-text-field>
+        <input slot="input">
+      </vaadin-text-field>
+    </template>
+  </test-fixture>
+
   <script>
+    ['', 'with slotted input'].forEach(condition => {
+      let fixtureName = '';
+      if (condition !== '') {
+        fixtureName = '-with-slotted-input';
+      }
 
-    describe('properties', function() {
-      var textField, input;
+      describe(`properties ${condition}`, function() {
+        var textField, input;
 
-      beforeEach(function() {
-        textField = fixture('default');
-        input = textField.focusElement;
-      });
+        beforeEach(function() {
+          textField = fixture(`default${fixtureName}`);
+          input = textField.focusElement;
+        });
 
-      describe('native', function() {
+        describe(`native ${condition}`, function() {
 
-        function assertAttrCanBeSet(prop, value) {
-          textField[prop] = value;
-          var attrval = input.getAttribute(prop);
+          function assertAttrCanBeSet(prop, value) {
+            textField[prop] = value;
+            var attrval = input.getAttribute(prop);
 
-          if (value === true) {
-            expect(attrval).not.to.be.null;
-          } else if (value === false) {
-            expect(attrval).to.be.null;
-          } else if (value) {
-            expect(attrval).to.be.equal(String(value));
+            if (value === true) {
+              expect(attrval).not.to.be.null;
+            } else if (value === false) {
+              expect(attrval).to.be.null;
+            } else if (value) {
+              expect(attrval).to.be.equal(String(value));
+            }
           }
-        }
 
-        function assertPropCanBeSet(prop, value) {
-          textField[prop] = value;
-          expect(input[prop]).to.be.equal(value);
-        }
+          function assertPropCanBeSet(prop, value) {
+            textField[prop] = value;
+            expect(input[prop]).to.be.equal(value);
+          }
 
-        ['pattern', 'placeholder', 'value', 'title'].forEach(function(prop) {
-          it('should set string property ' + prop, function() {
-            assertPropCanBeSet(prop, 'foo');
+          ['pattern', 'placeholder', 'value', 'title'].forEach(function(prop) {
+            it('should set string property ' + prop, function() {
+              assertPropCanBeSet(prop, 'foo');
+            });
           });
-        });
 
-        ['autofocus', 'disabled'].forEach(function(prop) {
-          it('should set boolean property ' + prop, function() {
-            assertPropCanBeSet(prop, true);
+          ['autofocus', 'disabled'].forEach(function(prop) {
+            it('should set boolean property ' + prop, function() {
+              assertPropCanBeSet(prop, true);
+            });
           });
-        });
 
-        ['maxlength', 'minlength'].forEach(function(prop) {
-          it('should set numeric attribute ' + prop, function() {
-            assertAttrCanBeSet(prop, 2);
+          ['maxlength', 'minlength'].forEach(function(prop) {
+            it('should set numeric attribute ' + prop, function() {
+              assertAttrCanBeSet(prop, 2);
+            });
           });
-        });
 
-        ['autocomplete'].forEach(function(prop) {
-          it('should set boolean attribute ' + prop, function() {
-            assertAttrCanBeSet(prop, 'on');
+          ['autocomplete'].forEach(function(prop) {
+            it('should set boolean attribute ' + prop, function() {
+              assertAttrCanBeSet(prop, 'on');
+            });
           });
-        });
 
-        ['autocapitalize'].forEach(function(prop) {
-          it('should set boolean attribute ' + prop, function() {
-            assertAttrCanBeSet(prop, 'off');
+          ['autocapitalize'].forEach(function(prop) {
+            it('should set boolean attribute ' + prop, function() {
+              assertAttrCanBeSet(prop, 'off');
+            });
           });
-        });
 
-        ['autocomplete', 'autocorrect', 'readonly', 'required'].forEach(function(prop) {
-          it('should set boolean attribute ' + prop, function() {
-            assertAttrCanBeSet(prop, true);
-            assertAttrCanBeSet(prop, false);
+          ['autocomplete', 'autocorrect', 'readonly', 'required'].forEach(function(prop) {
+            it('should set boolean attribute ' + prop, function() {
+              assertAttrCanBeSet(prop, true);
+              assertAttrCanBeSet(prop, false);
+            });
           });
         });
-      });
-
-      describe('clear button', function() {
-        it('default value of clearButtonVisible should be false', function() {
-          expect(textField.clearButtonVisible).to.be.false;
-        });
 
-        it('clear button should not be visible when field has no value', function() {
-          textField.clearButtonVisible = true;
-          expect(getComputedStyle(textField.$.clearButton).getPropertyValue('display')).to.be.equal('none');
-        });
+        describe(`clear button ${condition}`, function() {
+          it('default value of clearButtonVisible should be false', function() {
+            expect(textField.clearButtonVisible).to.be.false;
+          });
 
-        it('should dispatch change event when clear button is clicked', function() {
-          const changeSpy = sinon.spy();
-          textField.addEventListener('change', changeSpy);
-          textField.clearButtonVisible = true;
-          textField.value = 'Foo';
-          textField.$.clearButton.click();
-          expect(changeSpy).to.be.calledOnce;
-        });
+          it('clear button should not be visible when field has no value', function() {
+            textField.clearButtonVisible = true;
+            expect(getComputedStyle(textField.$.clearButton).getPropertyValue('display')).to.be.equal('none');
+          });
 
-        it('should set _valueClearing flag not to dipatch change event on mousedown and remove it it on click', function() {
-          // Testing internal implementation as it impossible to test native change event.
-          // For case when the field is focused, value is changed, clear button is pressed.
-          // Should not fire two change events.
-          const changeSpy = sinon.spy();
-          textField.addEventListener('change', changeSpy);
+          it('should dispatch change event when clear button is clicked', function() {
+            const changeSpy = sinon.spy();
+            textField.addEventListener('change', changeSpy);
+            textField.clearButtonVisible = true;
+            textField.value = 'Foo';
+            textField.$.clearButton.click();
+            expect(changeSpy).to.be.calledOnce;
+          });
 
-          textField.$.clearButton.dispatchEvent(new CustomEvent('mousedown'));
-          expect(textField._valueClearing).to.be.true;
+          it('should set _valueClearing flag not to dipatch change event on mousedown and remove it it on click', function() {
+            // Testing internal implementation as it impossible to test native change event.
+            // For case when the field is focused, value is changed, clear button is pressed.
+            // Should not fire two change events.
+            const changeSpy = sinon.spy();
+            textField.addEventListener('change', changeSpy);
 
-          // Emulates native change coming from input.
-          textField.focusElement.dispatchEvent(new Event('change', {bubbles: true}));
+            textField.$.clearButton.dispatchEvent(new CustomEvent('mousedown'));
+            expect(textField._valueClearing).to.be.true;
 
-          textField.$.clearButton.dispatchEvent(new CustomEvent('click'));
-          expect(textField._valueClearing).to.be.false;
+            // Emulates native change coming from input.
+            textField.focusElement.dispatchEvent(new Event('change', {bubbles: true}));
 
-          expect(changeSpy).to.be.calledOnce;
-        });
+            textField.$.clearButton.dispatchEvent(new CustomEvent('click'));
+            expect(textField._valueClearing).to.be.false;
 
-        ['disabled', 'readonly'].forEach(state => {
-          it(`clear button should not be visible when field is ${state}`, function() {
-            textField.clearButtonVisible = true;
-            textField.setAttribute(state, true);
-            expect(getComputedStyle(textField.$.clearButton).getPropertyValue('display')).to.be.equal('none');
+            expect(changeSpy).to.be.calledOnce;
           });
-        });
 
-      });
+          ['disabled', 'readonly'].forEach(state => {
+            it(`clear button should not be visible when field is ${state}`, function() {
+              textField.clearButtonVisible = true;
+              textField.setAttribute(state, true);
+              expect(getComputedStyle(textField.$.clearButton).getPropertyValue('display')).to.be.equal('none');
+            });
+          });
 
-      describe('binding', function() {
-        it('default value should be empty string', function() {
-          expect(textField.value).to.be.equal('');
         });
 
-        it('setting input value updates value', function() {
-          input.value = 'foo';
-          input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true, composed: true}));
-          expect(textField.value).to.be.equal('foo');
-        });
+        describe(`binding ${condition}`, function() {
+          it('default value should be empty string', function() {
+            expect(textField.value).to.be.equal('');
+          });
 
-        it('setting input value updates has-value attribute', function() {
-          textField.value = 'foo';
-          expect(textField.hasAttribute('has-value')).to.be.true;
-        });
+          it('setting input value updates value', function() {
+            input.value = 'foo';
+            input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true, composed: true}));
+            expect(textField.value).to.be.equal('foo');
+          });
 
-        it('setting value to undefine should not update has-value attribute', function() {
-          textField.value = undefined;
-          expect(textField.hasAttribute('has-value')).to.be.false;
-        });
+          it('setting input value updates has-value attribute', function() {
+            textField.value = 'foo';
+            expect(textField.hasAttribute('has-value')).to.be.true;
+          });
 
-        it('setting empty value does not update has-value attribute', function() {
-          textField.value = '';
-          expect(textField.hasAttribute('has-value')).to.be.false;
-        });
+          it('setting value to undefine should not update has-value attribute', function() {
+            textField.value = undefined;
+            expect(textField.hasAttribute('has-value')).to.be.false;
+          });
 
-        // User could accidently set a 0 or false value
-        it('setting number value updates has-value attribute', function() {
-          textField.value = 0;
-          expect(textField.hasAttribute('has-value')).to.be.true;
-        });
+          it('setting empty value does not update has-value attribute', function() {
+            textField.value = '';
+            expect(textField.hasAttribute('has-value')).to.be.false;
+          });
 
-        it('setting boolean value updates has-value attribute', function() {
-          textField.value = false;
-          expect(textField.hasAttribute('has-value')).to.be.true;
-        });
+          // User could accidently set a 0 or false value
+          it('setting number value updates has-value attribute', function() {
+            textField.value = 0;
+            expect(textField.hasAttribute('has-value')).to.be.true;
+          });
 
-        it('setting label updates has-label attribute', function() {
-          textField.label = 'foo';
-          expect(textField.hasAttribute('has-label')).to.be.true;
-        });
+          it('setting boolean value updates has-value attribute', function() {
+            textField.value = false;
+            expect(textField.hasAttribute('has-value')).to.be.true;
+          });
 
-        it('setting label to empty string does not update has-label attribute', function() {
-          textField.label = '';
-          expect(textField.hasAttribute('has-label')).to.be.false;
-        });
+          it('setting label updates has-label attribute', function() {
+            textField.label = 'foo';
+            expect(textField.hasAttribute('has-label')).to.be.true;
+          });
 
-        it('setting label to null does not update has-label attribute', function() {
-          textField.label = null;
-          expect(textField.hasAttribute('has-label')).to.be.false;
-        });
+          it('setting label to empty string does not update has-label attribute', function() {
+            textField.label = '';
+            expect(textField.hasAttribute('has-label')).to.be.false;
+          });
 
-        it('setting number label updates has-label attribute', function() {
-          textField.label = 0;
-          expect(textField.hasAttribute('has-label')).to.be.true;
-        });
-      });
+          it('setting label to null does not update has-label attribute', function() {
+            textField.label = null;
+            expect(textField.hasAttribute('has-label')).to.be.false;
+          });
 
-      if (!window.ShadyDOM) {
-        describe('label', function() {
-          it('should not update focused property on click if disabled', function() {
-            textField.disabled = true;
-            const label = textField.root.querySelector('[part="label"]');
-            label.click();
-            expect(textField.getAttribute('focused')).to.be.null;
+          it('setting number label updates has-label attribute', function() {
+            textField.label = 0;
+            expect(textField.hasAttribute('has-label')).to.be.true;
           });
         });
-      }
-    });
 
-    describe('events', function() {
-      let textField, input;
-
-      beforeEach(function() {
-        textField = fixture('default');
-        input = textField.focusElement;
+        if (!window.ShadyDOM) {
+          describe(`label ${condition}`, function() {
+            it('should not update focused property on click if disabled', function() {
+              textField.disabled = true;
+              const label = textField.root.querySelector('[part="label"]');
+              label.click();
+              expect(textField.getAttribute('focused')).to.be.null;
+            });
+          });
+        }
       });
 
-      it('should dispatch change event on native input change', done => {
-        const changeEvent = new Event('change');
+      describe(`events ${condition}`, function() {
+        let textField, input;
 
-        textField.addEventListener('change', e => {
-          expect(e.detail.sourceEvent).to.equal(changeEvent);
-          done();
+        beforeEach(function() {
+          textField = fixture(`default${fixtureName}`);
+          input = textField.focusElement;
         });
 
-        input.dispatchEvent(changeEvent);
-      });
-
-      // IE11 placeholder bug
-      const IE = navigator.userAgent.match(/Trident/);
-
-      (IE ? it : it.skip)('should not dispatch input event in IE on focus, when placeholder is set', done => {
-        const spy = sinon.spy();
-        textField.placeholder = 'foo';
-
-        textField.addEventListener('input', spy);
+        it('should dispatch change event on native input change', done => {
+          const changeEvent = new Event('change');
 
-        textField.focus();
+          textField.addEventListener('change', e => {
+            expect(e.detail.sourceEvent).to.equal(changeEvent);
+            done();
+          });
 
-        setTimeout(() => {
-          expect(spy.called).to.be.false;
-          done();
+          input.dispatchEvent(changeEvent);
         });
-      });
 
-      (IE ? it : it.skip)('should not dispatch input event in IE on blur, when placeholder is set', done => {
-        const spy = sinon.spy();
-        textField.placeholder = 'foo';
+        // IE11 placeholder bug
+        const IE = navigator.userAgent.match(/Trident/);
 
-        textField.addEventListener('input', spy);
+        (IE ? it : it.skip)('should not dispatch input event in IE on focus, when placeholder is set', done => {
+          const spy = sinon.spy();
+          textField.placeholder = 'foo';
 
-        textField.focus();
+          textField.addEventListener('input', spy);
 
-        // needs timeout to reproduce
-        setTimeout(() => {
-          textField.blur();
+          textField.focus();
 
           setTimeout(() => {
             expect(spy.called).to.be.false;
             done();
           });
         });
-      });
 
-      (IE ? it : it.skip)('should not dispatch input event in IE on placeholder value change', done => {
-        const spy = sinon.spy();
-        textField.placeholder = 'foo';
+        (IE ? it : it.skip)('should not dispatch input event in IE on blur, when placeholder is set', done => {
+          const spy = sinon.spy();
+          textField.placeholder = 'foo';
+
+          textField.addEventListener('input', spy);
 
-        textField.addEventListener('input', spy);
+          textField.focus();
 
-        textField.placeholder = 'bar';
+          // needs timeout to reproduce
+          setTimeout(() => {
+            textField.blur();
 
-        setTimeout(() => {
-          expect(spy.called).to.be.false;
-          done();
+            setTimeout(() => {
+              expect(spy.called).to.be.false;
+              done();
+            });
+          });
         });
-      });
-    });
 
-    describe('methods', function() {
-      it('should not throw an error when using focus() to a newly created element', () => {
-        // No expect needed as an error is thrown when focusing undefined element
-        document.createElement('vaadin-text-field').focus();
+        (IE ? it : it.skip)('should not dispatch input event in IE on placeholder value change', done => {
+          const spy = sinon.spy();
+          textField.placeholder = 'foo';
+
+          textField.addEventListener('input', spy);
+
+          textField.placeholder = 'bar';
+
+          setTimeout(() => {
+            expect(spy.called).to.be.false;
+            done();
+          });
+        });
       });
 
-      it('should clear the value when clear() is called', () => {
-        const textField = fixture('default');
-        textField.value = 'Foo';
-        textField.clear();
-        expect(textField.value).not.to.be.ok;
+      describe(`methods ${condition}`, function() {
+        it('should not throw an error when using focus() to a newly created element', () => {
+          // No expect needed as an error is thrown when focusing undefined element
+          document.createElement('vaadin-text-field').focus();
+        });
+
+        it('should clear the value when clear() is called', () => {
+          const textField = fixture(`default${fixtureName}`);
+          textField.value = 'Foo';
+          textField.clear();
+          expect(textField.value).not.to.be.ok;
+        });
       });
     });
   </script>
diff --git a/test/validation.html b/test/validation.html
index d4730b20..b38adbcf 100644
--- a/test/validation.html
+++ b/test/validation.html
@@ -10,6 +10,7 @@
   <link rel="import" href="../vaadin-text-field.html">
   <link rel="import" href="../vaadin-text-area.html">
   <link rel="import" href="../../iron-form/iron-form.html">
+  <link rel="import" href="../../iron-input/iron-input.html">
 
 </head>
 
@@ -24,6 +25,19 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="vaadin-text-field-default-with-slotted-input">
+    <template>
+      <iron-form id="iform">
+        <form>
+          <vaadin-text-field name="foo">
+            <input slot="input">
+          </vaadin-text-field>
+          <iron-input name="iron-value" value="1"><input name="iron-value" value="1" type="number"></iron-input>
+        </form>
+      </iron-form>
+    </template>
+  </test-fixture>
+
   <test-fixture id="vaadin-text-area-default">
     <template>
       <iron-form id="iform">
@@ -34,170 +48,193 @@
     </template>
   </test-fixture>
 
-  <script>
-
-    ['vaadin-text-field', 'vaadin-text-area'].forEach(el => {
-      const isTextField = el === 'vaadin-text-field';
+  <test-fixture id="vaadin-text-area-default-with-slotted-input">
+    <template>
+      <iron-form id="iform">
+        <form>
+          <vaadin-text-area name="foo">
+            <textarea slot="textarea"></textarea>
+          </vaadin-text-area>
+        </form>
+      </iron-form>
+    </template>
+  </test-fixture>
 
-      describe(`${el}: validate`, function() {
-        let iform, tf, input;
+  <script>
+    ['', 'with slotted input'].forEach(condition => {
+      let fixtureName = '';
+      if (condition !== '') {
+        fixtureName = '-with-slotted-input';
+      }
 
-        beforeEach(function() {
-          iform = fixture(`${el}-default`);
-          tf = iform.querySelector(el);
-          input = tf.focusElement;
-        });
+      ['vaadin-text-field', 'vaadin-text-area'].forEach(el => {
+        const isTextField = el === 'vaadin-text-field';
 
-        it('should call validate', function(done) {
-          sinon.stub(tf, 'validate', done);
-          iform.submit();
-        });
+        describe(`${el}: validate ${condition}`, function() {
+          let iform, tf, input;
 
-        it('should serialize correctly', function() {
-          tf.value = 'bar';
-          expect(iform.serializeForm().foo).to.equal('bar');
-        });
+          beforeEach(function() {
+            iform = fixture(`${el}-default${fixtureName}`);
+            tf = iform.querySelector(el);
+            input = tf.focusElement;
+          });
 
-        it('should pass if not required', function() {
-          expect(iform.validate()).to.be.true;
-        });
+          it('should call validate', function(done) {
+            sinon.stub(tf, 'validate', done);
+            iform.submit();
+          });
 
-        it('should fail if required', function() {
-          tf.required = true;
-          expect(iform.validate()).to.be.false;
-        });
+          it('should serialize correctly', function() {
+            // Workaround for iron-form not to send two similar values.
+            if (condition) {
+              tf.name = '';
+              input.name = 'foo';
+            }
+            tf.value = 'bar';
+            expect(iform.serializeForm().foo).to.equal('bar');
+          });
 
-        it('should have the invalid attribute', function() {
-          tf.required = true;
-          tf.validate();
-          expect(tf.getAttribute('invalid')).to.be.equal('');
-        });
+          it('should pass if not required', function() {
+            expect(iform.validate()).to.be.true;
+          });
 
-        it('should not have the invalid attribute', function() {
-          tf.required = true;
-          tf.validate();
-          tf.required = false;
-          tf.validate();
-          expect(tf.getAttribute('invalid')).not.to.be.ok;
-        });
+          it('should fail if required', function() {
+            tf.required = true;
+            expect(iform.validate()).to.be.false;
+          });
 
-        it('validate() should return correct boolean value', function() {
-          tf.required = true;
-          tf.minlength = 2;
-          expect(tf.validate()).to.be.false;
-          tf.value = 'hi';
-          expect(tf.validate()).to.be.true;
-        });
+          it('should have the invalid attribute', function() {
+            tf.required = true;
+            tf.validate();
+            expect(tf.getAttribute('invalid')).to.be.equal('');
+          });
 
-        it('should check validity on validate', function() {
-          const spy = sinon.spy(tf, 'checkValidity');
-          tf.validate();
-          expect(spy.called).to.be.true;
-        });
+          it('should not have the invalid attribute', function() {
+            tf.required = true;
+            tf.validate();
+            tf.required = false;
+            tf.validate();
+            expect(tf.getAttribute('invalid')).not.to.be.ok;
+          });
 
-        it('should not change invalid property is no constraints are set', function() {
-          tf.validate();
-          expect(tf.invalid).to.be.false;
-          tf.invalid = true;
-          tf.validate();
-          expect(tf.invalid).to.be.true;
-        });
+          it('validate() should return correct boolean value', function() {
+            tf.required = true;
+            tf.minlength = 2;
+            expect(tf.validate()).to.be.false;
+            tf.value = 'hi';
+            expect(tf.validate()).to.be.true;
+          });
 
-        it('should override explicilty set invalid if constraints are set', function() {
-          tf.invalid = true;
-          tf.value = 'foo';
-          tf.required = true;
-          tf.validate();
-          expect(tf.invalid).to.be.false;
-        });
+          it('should check validity on validate', function() {
+            const spy = sinon.spy(tf, 'checkValidity');
+            tf.validate();
+            expect(spy.called).to.be.true;
+          });
 
-        describe('prevent invalid input', function() {
+          it('should not change invalid property is no constraints are set', function() {
+            tf.validate();
+            expect(tf.invalid).to.be.false;
+            tf.invalid = true;
+            tf.validate();
+            expect(tf.invalid).to.be.true;
+          });
 
-          beforeEach(function() {
-            tf.preventInvalidInput = true;
-            tf.value = '1';
+          it('should override explicilty set invalid if constraints are set', function() {
+            tf.invalid = true;
+            tf.value = 'foo';
+            tf.required = true;
+            tf.validate();
+            expect(tf.invalid).to.be.false;
           });
 
-          describe('user action', function() {
+          describe(`prevent invalid input ${condition}`, function() {
 
-            function userSetValue(value) {
-              input.value = value;
-              input.dispatchEvent(new CustomEvent('input'));
-            }
+            beforeEach(function() {
+              tf.preventInvalidInput = true;
+              tf.value = '1';
+            });
 
-            if (isTextField) {
-              it('should prevent invalid pattern', function() {
+            describe(`user action ${condition}`, function() {
+
+              function userSetValue(value) {
+                input.value = value;
+                input.dispatchEvent(new CustomEvent('input'));
+              }
+
+              if (isTextField) {
+                it('should prevent invalid pattern', function() {
+                  tf.pattern = '[0-9]*';
+                  userSetValue('f');
+                  expect(tf.value).to.equal('1');
+                });
+
+                it('should have empty value', function() {
+                  tf.value = undefined;
+                  tf.pattern = '[0-9]*';
+                  userSetValue('f');
+                  expect(tf.value).to.equal('');
+                });
+
+                it('should not fire value change', function() {
+                  const spy = sinon.spy();
+                  tf.addEventListener('value-changed', spy);
+                  tf.pattern = '[0-9]*';
+                  userSetValue('f');
+                  expect(spy.called).to.be.false;
+                });
+              }
+
+              it('should not prevent valid pattern', function() {
                 tf.pattern = '[0-9]*';
-                userSetValue('f');
-                expect(tf.value).to.equal('1');
+                userSetValue('2');
+                expect(tf.value).to.equal('2');
               });
 
-              it('should have empty value', function() {
-                tf.value = undefined;
-                tf.pattern = '[0-9]*';
-                userSetValue('f');
+              it('should not prevent too short value', function() {
+                tf.minlength = 1;
+                userSetValue('');
                 expect(tf.value).to.equal('');
               });
 
-              it('should not fire value change', function() {
-                const spy = sinon.spy();
-                tf.addEventListener('value-changed', spy);
-                tf.pattern = '[0-9]*';
-                userSetValue('f');
-                expect(spy.called).to.be.false;
+              it('should not prevent empty value for required field', function() {
+                tf.required = true;
+                userSetValue('');
+                expect(tf.value).to.equal('');
               });
-            }
 
-            it('should not prevent valid pattern', function() {
-              tf.pattern = '[0-9]*';
-              userSetValue('2');
-              expect(tf.value).to.equal('2');
             });
 
-            it('should not prevent too short value', function() {
-              tf.minlength = 1;
-              userSetValue('');
-              expect(tf.value).to.equal('');
-            });
-
-            it('should not prevent empty value for required field', function() {
-              tf.required = true;
-              userSetValue('');
-              expect(tf.value).to.equal('');
-            });
-
-          });
+            describe(`programmatic ${condition}`, function() {
 
-          describe('programmatic', function() {
+              it('should not prevent invalid pattern', function() {
+                tf.pattern = '[0-9]*';
+                tf.value = 'foo';
+                expect(tf.value).to.equal('foo');
+              });
 
-            it('should not prevent invalid pattern', function() {
-              tf.pattern = '[0-9]*';
-              tf.value = 'foo';
-              expect(tf.value).to.equal('foo');
-            });
+              it('should not prevent too short value', function() {
+                tf.minlength = 1;
+                tf.value = '';
+                expect(tf.value).to.equal('');
+              });
 
-            it('should not prevent too short value', function() {
-              tf.minlength = 1;
-              tf.value = '';
-              expect(tf.value).to.equal('');
-            });
+              it('should not prevent empty value for required field', function() {
+                tf.required = true;
+                tf.value = '';
+                expect(tf.value).to.equal('');
+              });
 
-            it('should not prevent empty value for required field', function() {
-              tf.required = true;
-              tf.value = '';
-              expect(tf.value).to.equal('');
-            });
+              it('should not prevent null value for required field', function() {
+                tf.required = true;
+                tf.value = null;
+                expect(tf.value).to.equal(null);
+              });
 
-            it('should not prevent null value for required field', function() {
-              tf.required = true;
-              tf.value = null;
-              expect(tf.value).to.equal(null);
             });
 
           });
 
         });
-
       });
     });
   </script>

From c56eff7d3fa8f8770573e07048e08bb345bbc458 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 29 Nov 2018 14:17:46 +0200
Subject: [PATCH 03/13] Add slotted input implementation

---
 src/vaadin-password-field.html   |  20 +++
 src/vaadin-text-area.html        |  43 ++++---
 src/vaadin-text-field-mixin.html | 210 +++++++++++++++++++++++++++----
 src/vaadin-text-field.html       |  43 +++----
 4 files changed, 247 insertions(+), 69 deletions(-)

diff --git a/src/vaadin-password-field.html b/src/vaadin-password-field.html
index 0e987f14..74416335 100644
--- a/src/vaadin-password-field.html
+++ b/src/vaadin-password-field.html
@@ -52,6 +52,22 @@
        * </vaadin-password-field>
        * ```
        *
+       * ### Custom input
+       *
+       * It is possible to use custom input within `<vaadin-password-field>`.
+       * In order for an input to be considered as a custom input, it must have the slot
+       * attribute set to `input`.
+       *
+       * **NOTE:** when using custom input: all properties and attributes that the
+       * `<vaadin-password-field>` has should be defined on the host element. They will be
+       * automatically propagated to the custom input.
+       *
+       * ```html
+       * <vaadin-password-field label="Password">
+       *   <input type="password" slot="input">
+       * </vaadin-password-field>
+       * ```
+       *
        * ### Styling
        *
        * See vaadin-text-field.html for the styling documentation
@@ -141,6 +157,10 @@
         }
 
         _onChange(e) {
+          const slotted = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
+          if (slotted) {
+            e.stopPropagation();
+          }
           if (this._passwordVisibilityChanging) {
             this._cachedChangeEvent = e;
           } else {
diff --git a/src/vaadin-text-area.html b/src/vaadin-text-area.html
index 185db3be..a9b1269c 100644
--- a/src/vaadin-text-area.html
+++ b/src/vaadin-text-area.html
@@ -56,26 +56,9 @@
 
         <slot name="prefix"></slot>
 
-        <textarea part="value"
-            autocomplete$="[[autocomplete]]"
-            autocorrect$="[[autocorrect]]"
-            autocapitalize$="[[autocapitalize]]"
-            autofocus$="[[autofocus]]"
-            disabled$="[[disabled]]"
-            maxlength$="[[maxlength]]"
-            minlength$="[[minlength]]"
-            placeholder$="[[placeholder]]"
-            readonly$="[[readonly]]"
-            aria-readonly$="[[readonly]]"
-            required$="[[required]]"
-            aria-required$="[[required]]"
-            value="{{value::input}}"
-            on-blur="validate"
-            on-input="_onInput"
-            on-change="_onChange"
-            aria-describedby$="[[_getActiveErrorId(invalid, errorMessage, _errorId)]]"
-            aria-labelledby$="[[_getActiveLabelId(label, _labelId)]]"
-            aria-invalid$="[[invalid]]"></textarea>
+        <slot name="textarea">
+          <textarea part="value"></textarea>
+        </slot>
 
         <div part="clear-button" id="clearButton" role="button" aria-label="Clear"></div>
         <slot name="suffix"></slot>
@@ -116,6 +99,22 @@
        * </vaadin-text-area>
        * ```
        *
+       * ### Custom textarea
+       *
+       * It is possible to use custom textarea within `<vaadin-text-area>`.
+       * In order for an textarea to be considered as a custom textarea, it must have the slot
+       * attribute set to `textarea`.
+       *
+       * **NOTE:** when using custom textarea: all properties and attributes that the
+       * `<vaadin-text-area>` has should be defined on the host element. They will be
+       * automatically propagated to the custom textarea.
+       *
+       * ```html
+       * <vaadin-text-area label="Textarea">
+       *   <textarea slot="textarea"></textarea>
+       * </vaadin-text-area>
+       * ```
+       *
        * ### Styling
        *
        * The following shadow DOM parts are available for styling:
@@ -173,6 +172,10 @@
           }
         }
 
+        get _slottedTagName() {
+          return 'textarea';
+        }
+
         _textAreaValueChanged(value) {
           this._updateHeight();
         }
diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
index e596dba0..6000c48b 100644
--- a/src/vaadin-text-field-mixin.html
+++ b/src/vaadin-text-field-mixin.html
@@ -47,7 +47,9 @@
       }
 
       /* Reset the native input styles */
-      [part="value"] {
+      [part="value"],
+      [part="input-field"] ::slotted(input),
+      [part="input-field"] ::slotted(textarea) {
         -webkit-appearance: none;
         -moz-appearance: none;
         outline: none;
@@ -69,8 +71,10 @@
         flex: none;
       }
 
-      /* Slotted by vaadin-dropdown-menu-text-field */
       [part="value"],
+      [part="input-field"] ::slotted(input),
+      [part="input-field"] ::slotted(textarea),
+      /* Slotted by vaadin-select-text-field */
       [part="input-field"] ::slotted([part="value"]) {
         flex: auto;
         white-space: nowrap;
@@ -79,7 +83,12 @@
         height: 100%;
       }
 
-      [part="value"]::-ms-clear {
+      [part="input-field"] ::slotted(textarea) {
+        resize: none;
+      }
+
+      [part="value"]::-ms-clear,
+      [part="input-field"] ::slotted(input)::-ms-clear {
         display: none;
       }
 
@@ -100,6 +109,18 @@
    */
   window.Vaadin = window.Vaadin || {};
 
+  const HOST_PROPS = {
+    default: ['list', 'autofocus', 'pattern', 'autocapitalize', 'autocorrect', 'maxlength',
+      'minlength', 'name', 'placeholder', 'autocomplete', 'title'],
+    accessible: ['disabled', 'readonly', 'required', 'invalid']
+  };
+
+  const PROP_TYPE = {
+    DEFAULT: 'default',
+    ACCESSIBLE: 'accessible'
+  };
+
+
   /**
    * @polymerMixin
    * @memberof Vaadin
@@ -259,11 +280,26 @@
     }
 
     static get observers() {
-      return ['_stateChanged(disabled, readonly, clearButtonVisible, hasValue)'];
+      return ['_stateChanged(disabled, readonly, clearButtonVisible, hasValue)',
+        '_hostPropsChanged(' + HOST_PROPS.default.join(', ') + ')',
+        '_hostAccessiblePropsChanged(' + HOST_PROPS.accessible.join(', ') + ')',
+        '_getActiveErrorId(invalid, errorMessage, _errorId)',
+        '_getActiveLabelId(label, _labelId)'];
     }
 
     get focusElement() {
-      return this.root && this.root.querySelector('[part=value]');
+      if (!this.shadowRoot) {
+        return;
+      }
+      const slotted = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
+      if (slotted) {
+        return slotted;
+      }
+      return this.shadowRoot.querySelector('[part="value"]');
+    }
+
+    get _slottedTagName() {
+      return 'input';
     }
 
     _onInput(e) {
@@ -271,8 +307,11 @@
         const input = this.focusElement;
         if (input.value.length > 0 && !this.checkValidity()) {
           input.value = this.value || '';
+          return;
         }
       }
+      this.__userInput = true;
+      this.value = e.target.value;
     }
 
     // NOTE(yuriy): Workaround needed for IE11 and Edge for proper displaying
@@ -311,6 +350,15 @@
       if (newVal === '' && oldVal === undefined) {
         return;
       }
+      if (this.__userInput) {
+        this.__userInput = false;
+        return;
+      } else if (newVal !== undefined) {
+        this.focusElement.value = newVal;
+      } else {
+        this.value = '';
+      }
+
       if (this.invalid) {
         this.validate();
       }
@@ -329,6 +377,74 @@
       }
     }
 
+    _onSlotChange() {
+      const slotted = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
+
+      if (this.value) {
+        this.focusElement.value = this.value;
+        this.validate();
+      }
+
+      if (slotted && !this._slottedInput) {
+        this._validateSlottedValue(slotted);
+        this._addInputListeners(slotted);
+        this._addIEListeners(slotted);
+        this._slottedInput = slotted;
+      } else if (!this._slottedInput) {
+        this._removeInputListeners(this._slottedInput);
+        this._removeIEListeners(this._slottedInput);
+        this._slottedInput = undefined;
+      }
+
+      Object.keys(PROP_TYPE).map(key => PROP_TYPE[key]).forEach(type =>
+        this._propagateHostAttributes(HOST_PROPS[type].map(attr => this[attr]), type));
+    }
+
+    _hostPropsChanged(...attributesValues) {
+      this._propagateHostAttributes(attributesValues, PROP_TYPE.DEFAULT);
+    }
+
+    _hostAccessiblePropsChanged(...attributesValues) {
+      this._propagateHostAttributes(attributesValues, PROP_TYPE.ACCESSIBLE);
+    }
+
+    _validateSlottedValue(slotted) {
+      if (slotted.value !== this.value) {
+        console.warn('Please define value on the vaadin-text-field component!');
+        slotted.value = '';
+      }
+    }
+
+    _propagateHostAttributes(attributesValues, type) {
+      const input = this.focusElement;
+      const attributeNames = HOST_PROPS[type];
+
+      if (type === 'accessible') {
+        attributeNames.forEach((attr, index) => {
+          this._setOrToggleAttribute(attr, attributesValues[index], input);
+          this._setOrToggleAttribute(`aria-${attr}`, attributesValues[index], input);
+        });
+      } else {
+        attributeNames.forEach((attr, index) => {
+          this._setOrToggleAttribute(attr, attributesValues[index], input);
+        });
+      }
+    }
+
+    _setOrToggleAttribute(name, value, node) {
+      if (!name || !node) {
+        return;
+      }
+
+      if (node.hasAttribute(name) === !value) {
+        if (value) {
+          node.setAttribute(name, (typeof value === 'boolean') ? '' : value);
+        } else {
+          node.removeAttribute(name);
+        }
+      }
+    }
+
     /**
      * Returns true if the current input value satisfies all constraints (if any)
      * @returns {boolean}
@@ -341,9 +457,41 @@
       }
     }
 
+    _addInputListeners(node) {
+      if (!node) {
+        return;
+      }
+
+      node.addEventListener('input', this._boundOnInput);
+      node.addEventListener('change', this._boundOnChange);
+      node.addEventListener('blur', this._boundOnBlur);
+    }
+
+    _removeInputListeners(node) {
+      if (!node) {
+        return;
+      }
+
+      node.removeEventListener('input', this._boundOnInput);
+      node.removeEventListener('change', this._boundOnChange);
+      node.removeEventListener('blur', this._boundOnBlur);
+    }
 
     ready() {
       super.ready();
+
+      this._boundOnInput = this._onInput.bind(this);
+      this._boundOnChange = this._onChange.bind(this);
+      this._boundOnBlur = this.validate.bind(this);
+
+      const defaultInput = this.shadowRoot.querySelector('[part="value"]');
+      this._slottedInput = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
+      this._addInputListeners(defaultInput);
+      this._addInputListeners(this._slottedInput);
+
+      this.shadowRoot.querySelector('[name="input"], [name="textarea"]')
+        .addEventListener('slotchange', this._onSlotChange.bind(this));
+
       if (!(window.ShadyCSS && window.ShadyCSS.nativeCss)) {
         this.updateStyles();
       }
@@ -356,10 +504,7 @@
       this._errorId = `${this.constructor.is}-error-${uniqueId}`;
       this._labelId = `${this.constructor.is}-label-${uniqueId}`;
 
-      /* istanbul ignore if */
-      if (navigator.userAgent.match(/Trident/)) {
-        this._addIEListeners();
-      }
+      this._addIEListeners(defaultInput);
     }
 
     /**
@@ -390,31 +535,46 @@
       }
     }
 
-    _addIEListeners() {
-      // IE11 dispatches `input` event in following cases:
-      // - focus or blur, when placeholder attribute is set
-      // - placeholder attribute value changed
-      // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101220/
-      const prevent = e => {
-        e.stopImmediatePropagation();
-        this.focusElement.removeEventListener('input', prevent);
-      };
-      const shouldPreventInput = () => this.placeholder && this.focusElement.addEventListener('input', prevent);
-      this.focusElement.addEventListener('focusin', shouldPreventInput);
-      this.focusElement.addEventListener('focusout', shouldPreventInput);
-      this._createPropertyObserver('placeholder', shouldPreventInput);
+    _addIEListeners(node) {
+      /* istanbul ignore if */
+      if (navigator.userAgent.match(/Trident/)) {
+        // IE11 dispatches `input` event in following cases:
+        // - focus or blur, when placeholder attribute is set
+        // - placeholder attribute value changed
+        // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101220/
+        this._prevent = e => {
+          e.stopImmediatePropagation();
+          this.focusElement.removeEventListener('input', this._prevent);
+        };
+        this._shouldPreventInput = () => this.placeholder && node.addEventListener('input', this._prevent);
+        node.addEventListener('focusin', this._shouldPreventInput);
+        node.addEventListener('focusout', this._shouldPreventInput);
+        this._createPropertyObserver('placeholder', this._shouldPreventInput);
+      }
+    }
+
+    _removeIEListeners(node) {
+      /* istanbul ignore if */
+      if (navigator.userAgent.match(/Trident/)) {
+        node.removeEventListener('focusin', this._shouldPreventInput);
+        node.removeEventListener('focusout', this._shouldPreventInput);
+      }
     }
 
     _getActiveErrorId(invalid, errorMessage, errorId) {
-      return errorMessage && invalid ? errorId : undefined;
+      this._setOrToggleAttribute('aria-describedby',
+        (errorMessage && invalid ? errorId : undefined),
+        this.focusElement);
     }
 
     _getActiveLabelId(label, labelId) {
-      return label ? labelId : undefined;
+      this._setOrToggleAttribute('aria-labelledby',
+        (label ? labelId : undefined),
+        this.focusElement);
     }
 
     _getErrorMessageAriaHidden(invalid, errorMessage, errorId) {
-      return (!this._getActiveErrorId(invalid, errorMessage, errorId)).toString();
+      return (!(errorMessage && invalid ? errorId : undefined)).toString();
     }
 
     /**
diff --git a/src/vaadin-text-field.html b/src/vaadin-text-field.html
index 7c685283..d91c80d1 100644
--- a/src/vaadin-text-field.html
+++ b/src/vaadin-text-field.html
@@ -22,30 +22,9 @@
 
         <slot name="prefix"></slot>
 
-        <input part="value"
-          autocomplete$="[[autocomplete]]"
-          autocorrect$="[[autocorrect]]"
-          autocapitalize$="[[autocapitalize]]"
-          autofocus$="[[autofocus]]"
-          disabled$="[[disabled]]"
-          list="[[list]]"
-          maxlength$="[[maxlength]]"
-          minlength$="[[minlength]]"
-          pattern="[[pattern]]"
-          placeholder$="[[placeholder]]"
-          readonly$="[[readonly]]"
-          aria-readonly$="[[readonly]]"
-          required$="[[required]]"
-          aria-required$="[[required]]"
-          value="{{value::input}}"
-          title="[[title]]"
-          on-blur="validate"
-          on-input="_onInput"
-          on-change="_onChange"
-          aria-describedby$="[[_getActiveErrorId(invalid, errorMessage, _errorId)]]"
-          aria-labelledby$="[[_getActiveLabelId(label, _labelId)]]"
-          aria-invalid$="[[invalid]]"
-        >
+        <slot name="input">
+          <input part="value">
+        </slot>
 
         <div part="clear-button" id="clearButton" role="button" aria-label="Clear"></div>
         <slot name="suffix"></slot>
@@ -86,6 +65,22 @@
        * </vaadin-text-area>
        * ```
        *
+       * ### Custom input
+       *
+       * It is possible to use custom input within `<vaadin-text-field>`.
+       * In order for an input to be considered as a custom input, it must have the slot
+       * attribute set to `input`.
+       *
+       * **NOTE:** when using custom input: all properties and attributes that the
+       * `<vaadin-text-field>` has should be defined on the host element. They will be
+       * automatically propagated to the custom input.
+       *
+       * ```html
+       * <vaadin-text-field label="Phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 111-222-3333">
+       *   <input type="tel" slot="input">
+       * </vaadin-text-field>
+       * ```
+       *
        * ### Styling
        *
        * The following custom properties are available for styling:

From 0b36201239dc4adcf0642ca95d028936b54366bf Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 29 Nov 2018 14:17:55 +0200
Subject: [PATCH 04/13] Add custom input demo

---
 demo/demos.json                   | 10 +++++
 demo/text-field-custom-demos.html | 67 +++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 demo/text-field-custom-demos.html

diff --git a/demo/demos.json b/demo/demos.json
index cf452cfd..ca5d613e 100644
--- a/demo/demos.json
+++ b/demo/demos.json
@@ -31,6 +31,16 @@
         "image": ""
       }
     },
+    {
+      "name": "Custom Input",
+      "url": "text-field-custom-demos",
+      "src": "text-field-custom-demos.html",
+      "meta": {
+        "title": "Vaadin Text Field Custom Input Examples",
+        "description": "",
+        "image": ""
+      }
+    },
     {
       "name": "RTL",
       "url": "text-field-rtl-demos",
diff --git a/demo/text-field-custom-demos.html b/demo/text-field-custom-demos.html
new file mode 100644
index 00000000..9e986f82
--- /dev/null
+++ b/demo/text-field-custom-demos.html
@@ -0,0 +1,67 @@
+<dom-module id="text-field-custom-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <h3>Number Input</h3>
+    <p>
+      <b>Note:</b> All properties and attributes that `vaadin-text-field` has should be defined on the host.
+    </p>
+    <vaadin-demo-snippet id="text-field-custom-demos-phone">
+      <template preserve-content>
+        <vaadin-text-field label="Amount" pattern="^[1-9]{1,2}[0]?|100" prevent-invalid-input value="0">
+          <input type="number" slot="input" min="0" max="100" step="2">
+        </vaadin-text-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Email Input</h3>
+    <vaadin-demo-snippet id="text-field-custom-demos-email">
+      <template preserve-content>
+        <vaadin-text-field label="Email" required error-message="Please enter valid email"  pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$">
+          <input type="email" slot="input">
+        </vaadin-text-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Phone Input</h3>
+    <vaadin-demo-snippet id="text-field-custom-demos-phone">
+      <template preserve-content>
+        <vaadin-text-field label="Phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 111-222-3333">
+          <input type="tel" slot="input">
+        </vaadin-text-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Password Field</h3>
+    <vaadin-demo-snippet id="text-field-custom-demos-pass">
+      <template preserve-content>
+        <vaadin-password-field label="Password">
+          <input type="password" slot="input">
+        </vaadin-password-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Textarea</h3>
+    <vaadin-demo-snippet id="text-field-custom-demos-textarea">
+      <template preserve-content>
+        <vaadin-text-area label="Textarea">
+          <textarea slot="textarea"></textarea>
+        </vaadin-text-area>
+      </template>
+    </vaadin-demo-snippet>
+
+
+  </template>
+  <script>
+    class TextFieldCustomDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {
+      static get is() {
+        return 'text-field-custom-demos';
+      }
+    }
+    customElements.define(TextFieldCustomDemos.is, TextFieldCustomDemos);
+  </script>
+</dom-module>

From 261a6084573d5e0baf7ba0bdadb367f041cc168c Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 29 Nov 2018 15:27:10 +0200
Subject: [PATCH 05/13] Fix clear button change event

---
 src/vaadin-text-field-mixin.html | 14 ++++++++------
 test/text-field.html             |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
index 6000c48b..9f3cab00 100644
--- a/src/vaadin-text-field-mixin.html
+++ b/src/vaadin-text-field-mixin.html
@@ -350,6 +350,13 @@
       if (newVal === '' && oldVal === undefined) {
         return;
       }
+
+      if (newVal !== '' && newVal != null) {
+        this.hasValue = true;
+      } else {
+        this.hasValue = false;
+      }
+
       if (this.__userInput) {
         this.__userInput = false;
         return;
@@ -362,11 +369,6 @@
       if (this.invalid) {
         this.validate();
       }
-      if (newVal !== '' && newVal != null) {
-        this.hasValue = true;
-      } else {
-        this.hasValue = false;
-      }
     }
 
     _labelChanged(label) {
@@ -526,7 +528,7 @@
       this.focusElement.focus();
       this.clear();
       this._valueClearing = false;
-      this.focusElement.dispatchEvent(new Event('change', {bubbles: true}));
+      this.focusElement.dispatchEvent(new Event('change', {bubbles: !this._slottedInput}));
     }
 
     _onKeyDown(e) {
diff --git a/test/text-field.html b/test/text-field.html
index 5875f9c0..c3c0d4e6 100644
--- a/test/text-field.html
+++ b/test/text-field.html
@@ -130,7 +130,7 @@
             expect(textField._valueClearing).to.be.true;
 
             // Emulates native change coming from input.
-            textField.focusElement.dispatchEvent(new Event('change', {bubbles: true}));
+            textField.focusElement.dispatchEvent(new Event('change', {bubbles: !condition}));
 
             textField.$.clearButton.dispatchEvent(new CustomEvent('click'));
             expect(textField._valueClearing).to.be.false;

From 6d444cfa327ac4473f2e28522cfecc0833df26b5 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 29 Nov 2018 16:03:58 +0200
Subject: [PATCH 06/13] Fix IE11 change event test and workaround

---
 src/vaadin-text-field-mixin.html | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
index 9f3cab00..81169a22 100644
--- a/src/vaadin-text-field-mixin.html
+++ b/src/vaadin-text-field-mixin.html
@@ -460,20 +460,12 @@
     }
 
     _addInputListeners(node) {
-      if (!node) {
-        return;
-      }
-
       node.addEventListener('input', this._boundOnInput);
       node.addEventListener('change', this._boundOnChange);
       node.addEventListener('blur', this._boundOnBlur);
     }
 
     _removeInputListeners(node) {
-      if (!node) {
-        return;
-      }
-
       node.removeEventListener('input', this._boundOnInput);
       node.removeEventListener('change', this._boundOnChange);
       node.removeEventListener('blur', this._boundOnBlur);
@@ -489,7 +481,11 @@
       const defaultInput = this.shadowRoot.querySelector('[part="value"]');
       this._slottedInput = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
       this._addInputListeners(defaultInput);
-      this._addInputListeners(this._slottedInput);
+      this._addIEListeners(defaultInput);
+      if (this._slottedInput) {
+        this._addIEListeners(this._slottedInput);
+        this._addInputListeners(this._slottedInput);
+      }
 
       this.shadowRoot.querySelector('[name="input"], [name="textarea"]')
         .addEventListener('slotchange', this._onSlotChange.bind(this));
@@ -505,8 +501,6 @@
       var uniqueId = Vaadin.TextFieldMixin._uniqueId = 1 + Vaadin.TextFieldMixin._uniqueId || 0;
       this._errorId = `${this.constructor.is}-error-${uniqueId}`;
       this._labelId = `${this.constructor.is}-label-${uniqueId}`;
-
-      this._addIEListeners(defaultInput);
     }
 
     /**

From 7ff31e4b52da2098ddf5b73c311078fee8c77e7c Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 29 Nov 2018 16:42:55 +0200
Subject: [PATCH 07/13] Add visual tests and screenshots

---
 .../password-field-custom-input/chrome.png    | Bin 0 -> 1439 bytes
 .../password-field-custom-input/firefox.png   | Bin 0 -> 1134 bytes
 .../password-field-custom-input/chrome.png    | Bin 0 -> 1036 bytes
 .../password-field-custom-input/firefox.png   | Bin 0 -> 901 bytes
 .../text-area-custom-textarea/chrome.png      | Bin 0 -> 1217 bytes
 .../text-area-custom-textarea/firefox.png     | Bin 0 -> 934 bytes
 .../text-area-custom-textarea/chrome.png      | Bin 0 -> 704 bytes
 .../text-area-custom-textarea/firefox.png     | Bin 0 -> 671 bytes
 .../text-field-custom-input/chrome.png        | Bin 0 -> 1163 bytes
 .../text-field-custom-input/firefox.png       | Bin 0 -> 816 bytes
 .../text-field-custom-input/chrome.png        | Bin 0 -> 682 bytes
 .../text-field-custom-input/firefox.png       | Bin 0 -> 651 bytes
 .../password-field-custom-input.html          |  29 ++++++++++++++++++
 .../text-area-custom-textarea.html            |  29 ++++++++++++++++++
 .../text-field-custom-input.html              |  29 ++++++++++++++++++
 15 files changed, 87 insertions(+)
 create mode 100644 test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/chrome.png
 create mode 100644 test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/firefox.png
 create mode 100644 test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/chrome.png
 create mode 100644 test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/firefox.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/chrome.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/firefox.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/chrome.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/firefox.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/chrome.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/firefox.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/chrome.png
 create mode 100644 test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/firefox.png
 create mode 100644 test/visual/vaadin-password-field/password-field-custom-input.html
 create mode 100644 test/visual/vaadin-text-area/text-area-custom-textarea.html
 create mode 100644 test/visual/vaadin-text-field/text-field-custom-input.html

diff --git a/test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/chrome.png b/test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff858482afa7b264e7cf07a811f9675ee0e63427
GIT binary patch
literal 1439
zcmZ{kX*3%M5XTd@kXlzA)kZbW)mWY)B-*+vh_j7EP*me+Q&Nu=N2qmHsXJ9sl{&Tu
zt6id6l%lC9LAK6PSL%rSYON)k{jgv9c0bI_n|brz{NK!*Uxusm1u#ez1ONcQD0>@s
zLHs1Ja}r_#PdZd-0suq_D4X*aqiHJ>KEWPAYRru=LhKWh6t8QK6+??JZG7l8BKcXM
z(hO8u@x;oAe#3>r7PlzV@SoO)p8BAb6~xSmESd)<b7aOS&3)h`kOTVoT=_aWGk$;u
zB`7sS1YEN3^~gK4%qgMe&n1vrY5CgXGoc|NC=HE}pm7s8V1IX|WD#fc!b|;!=o4y*
z%-P~@vLM6bk1>c_eNHkOMkP9CvcD+M($9mOJJm(C19Fn&4ei@Alq;req}{_c#JJ65
zs%NG-$&Lw;cR^?t|8crFuf-dt1do_(M<$#gW0poM;!<PfvJAI_3$Tdt5hzbH9~H16
zVtv<+ESFXJm!+<_>Fzfa3!<0TT@|rht>%r`Fy_iAb_a6cyB<fJskugY^!&)MUgiI4
z&=p9mirji(UzMJ1IW@h|iOeaAmF>E5&F+h9cwPg2S{*rDOKJ(D<?1pFYQ6jZjO1Z)
z_rtDhiE87tRV4=}2GB0b>QqoH{K3^8+yaHsu>fedXb}-^ssFm;?)s{rchU=Uw37d<
zdJ39pChd!4qxgVRLmCK+CpbLL>co-qW2N3rCLbjB3TnL4n0VWoVgI@{nO7DuAz{Qy
zIzcHCQkX-1Cz+*xUm6UKm|HM3SwXZt-i_#-mGqm@>d*9{M46g!Hb0tvI@mAc`^w+d
zHv34)Mq9{)3wl#iQ_*+yRIc3_55mJ&A#KFiVED_DC6?T#@+{-G!Xd|#Nz){|4&iNY
zb2jO6j?U4p!iHre)}<6#M&YYumw}zhdwUFJ$<@KNgu%!?Q1<M4$K7g)-3g%Ix_@$h
z>+d$Hse3$3Vp&`eDM0@6_5HQU+2l1PHD)<)Q;~A8LeFs1v<CYg6z^JMS8C>^)<7UF
z)8w#zvdmFWB6q!<;C1B8z{SFz_buIy&WTo-7+%OOEUEQIoF}A$=zOYOb7n)g%q0(+
zdoO0314YC~X(^Cf#6=Ef{lW;DKHuIJ1qUX|`gJ|gWWy9svoNQ{rznBT39()Z<M`1V
z9q|bU<;Lhx=u311#N)L;vgqmtcOLxgS8uU4dWsahzb=g~ni5wxM&M5#$2K(qn(=OZ
zw+>?K^fSl6ywSr&JNZWrc6t>b#Dpj@Z~LV1o1f%?lUWG9gOObE`^RkuGfRQSaapwh
zg%L;Wy(*O8MEY3Q_l=h!ltnVNr|aFAs>#q$GXmSErn<x!aBb}EOwSw8*K2;gp3Lr#
zrx&J8#zZ+iSY#0y3OhH;XN^C9rnvwOPo!RP4czkIo8ui96E3AKOBlKba^`C6$KPhG
z8t3Y}Sw(VS3~EPBHYaX=ivuAg$_<&U2E>wK&e62PaOtOU;NGk=3c>^SXOXR#?4Oe#
z3JT~m1(hU+1ATQ|Me^6LCeO|KZG$c(%GUrv4n5d6UywyHXCIB;p3ceSN=Lk5vv*2v
z1xaad;dm3NOqdhTMd;xal!p~8HMpKBF|j}&hs;<pe=Iup%xZ|@o>d)+8nZ5`n1VWT
zJunSf@AUk(f#u=p`_mbhP*3ZVx+)!YqTU=HA3WcV+Kr&PVsKVCu9FPiR$lhecW}_*
zPI<$I$7$BkD^BwxF7TH$xH+7)Y+QQfEZ6f3yQE|@?RMacMYVlh{yNgsfGP@WJiLh|
zq%`hOJ2<a6P&Vr%TQ7PmTSF+g(7jXVKalg!yMH(IUm~%95+XwN4Gq29`WiR`CWEL2
d(a7`V3t7z5@QFaVZ~=G$C|hTnS}VV#zX7(FsdE4T

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/firefox.png b/test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e351e5e667e7b18391c6b9e686e2dabf1c5a60e
GIT binary patch
literal 1134
zcmeAS@N?(olHy`uVBq!ia0vp^H-OlQgAGWU-jz7Pz`$ba>EaktG3V`Fe~;PaGRHsq
zCvD;Qm$`|z{jL?$v`3B$cUDL^zc}c~m3%Dri$xj7mkr)!nom@|Y>F!ru$gi!c(0E&
zo9MJ=1?OXWWiJvtoaW3nk~Ci1*C$nb$ysP}$*!L%KeJALuA6)2^B=iS)=$p9e?FQ0
zk@wP|O2!qt_wBP|RnZjdj{OqT&^GC8nkWw&ccW*JyZdq1bL<%!n>TOnI-2w;{)<b4
zn_EJIA`>%@phQB)0S0FlHVGwz0|JeVZ5%uXB0t_M{x5lAaqD*dx;qaS%Cx&nUfl7g
zZvHH0#;x18YF)VU<X_cxaT&|Le`nskJnGoD<H83S_4VTHmT&FuUZ41Q$G&@|3Dv*P
zb8^pnY*G34|JUuWU&pYQO|UNctLC6=apGxA{9~&PHS?}=-wQc?u6K6_PKUT8G%TDo
zZy9@Bwtx7S2mcmr^OL=>bm93n(}J6IS}bkH3Y{V*PTY~#+O2QIEj9mV<fXn#-_@tu
zwO=@=xIz8br^CB{ZTn(W<$k}u?y=0VgWlIJPo5R0_ow#hvlVu|C35oe^ELTi^=r+P
zn4<Dl&-T)h8pAFBR!njZ_kEW7$Nq-4p~s~=v9%wr3O_FV(3k$}W1``@ci&5`1@(`G
z7Vb%@^n1)7zC~M8L^90CaMi+huO5F*le&?A|4hj703-9o>$kr>cF_9T<;!0A;$dr_
zM9g<uDm-)klzU-?SG%-lc4Tjfzw~WU-H9n|rCA9&>u#IxUh>w}cZvCHJNwHA>i(vF
zonpNDRL;%b=J1@X(#W9tFBRSqn`Y~-ai5s|bZz|kt#O{0{JuqAy%CVIL*Raq+w0PK
z3o{em?<@a1#rV4Dz9e(LxQi>zyQB9UpZUsoVM3zr>YkM%vEdu6+)~B5qR#|WvaS)n
zeBj>C3K#jgB}!I{{C5Fet8Ha!AQtL!>C%}cayp@Fd>(F4nzZfNa?`r}pvT|UObz!d
zuMEF__-W#9@BXfGv1-$(ok!OQKb|dP{^e+S`KrYhAJ@h2J$}%7-K#LAD8b84g|ox$
z;;yZ}cw|A9is$UA7{S<|6}3NuR)*M#b<h3D{-f@{a<&2Qga6uhtMpgyiG81TW`E`H
zwGU<<^Y!%wCgG2+#!~JYMr%@*{F!^>+Mg}Qp8HGY{J0yg%H(|brDT`3Wk^lopD)L>
z{Y&QvGdU-7^UK-qEflPnC1(IkHApFY9rNd(HDaF`;;OgSe2ZnjcInLA+KOP^`L)*@
zfr<Il`*hLf?LYq70ol9upL@&NxJ+%Y;F}9er=@M{&Zw}P?>{|imgufKahLs1T-$O#
z`_pgHH#w`H1|10A(anLBWl-%z$xR3;4F%8a?Chw>$ek~CGVmVXzH#G3ezx=9x&;~T
bRC2Dbh~NJz+Wru*9AWTu^>bP0l+XkK0ofU%

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/chrome.png b/test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..685c6736a3924ec1d80a16c20d062a3b33549b57
GIT binary patch
literal 1036
zcmeAS@N?(olHy`uVBq!ia0vp^cYxT1gAGW&%8y>pz`%Uj)5S5QV$R!JiUq4Z7}`I+
z&(oUV@#NH84V85sDvOvTBLf2^BY&p2xTd7IunKj$EHXMV^~BU2))TjRe$IQAc5B1j
z>Hq4D=f2EQh@H4TN9<o!Ma2(x!I^iHHa=i`@b2Ba-OrVZu73Od*U+Nj_U+s6=k%Wl
zt*)$0+!*oUd%3^M6ZOCXB}Pq)i47uiJRG?ER1{d%g(fr!b9x-?WLfgSg(-++=?iE7
z%PW0)K6}q$UfWvxM|%$^8Wc8p>Ryxbkzt+L-Zc63GuhnDi(me|$<6m%_FU-}hdE*)
zu6>=)=k_&CUi~!oY~JOE_t+jy*>q;3np)DK-HqGUy|n$YFYz*e%6HMHJy%~^&xujB
ze{*Bbu{18ZaM78*9m)z_o;hw?tCkq#vs>;u+jh60&UDWleOB{r+C|wX!*w73&N!bo
zGjX%(?0*$G`y(ga?0Ncf!3mi^4x8UvrcDl*X31%=O}cLFyo#v5NtgQ^oZ_ab9H0Dh
zJ8!Y+_tpn&vr5l$^n9I_X3^spdv@372iDh0kC#X+i7T(Lxw~uGY(0bGiT_O=-kQb#
z|C(=~FT?c>xp%TV<gVvr%1nqTDz0+!ziajE$Ba5fi)P>W>$?iOOxxoZADOgIZsM#N
zFAO?t`Ghi@J?fTB+-JSp=BS{cf$zNj^%Z|i7zHohyl!^?tNQ9~r+*$==IQe7O2BkJ
zpRU^O6CpX#rw!C@e0l4XyJDMenS^IfRnbqeohHs<QoC-+w%_SEK1oH)`}~K0O-I!P
z4UBeeF4r_Z!?XGKBfZof-^=&i7OSY*uGjMNsFxPmxkp7?^ViqJog5FWt)>Ugnvx}Y
z(M*@mIqt~~3AO7VA1=z^I+Zi;{Hij|r(CK}u1@+=JM+cMGV5K1N?p3HrRQry6CQVD
zzPa&s*W(~#zsRtkIjarswoiU7620np^`p0a*D60Sf35PJzAR<^_nUiO^ZC!)GdHPd
zRchnR!hXktC%<;_9Q~_&^Fq*d-RAE-wcfRL=~~;Kq<ZGXoBvE(^5DrS*CX2!c4{5y
z-%*(IrJeV`hM$L!v(e|rG0R2f{E;avsz~@Ly?lYMFwV65>r3s9=g*&epL2fF|LMbr
z4=X?0$=*r-zu<)bGS#J2NbL)x8~)avKYjXi`FYnTukPxIao?+RNs0T<^q@{!^?2{3
RY+x>D@O1TaS?83{1OVL4<iG#`

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/firefox.png b/test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d128f26d2bb9dddb00c54a3a1074df24528a916
GIT binary patch
literal 901
zcmeAS@N?(olHy`uVBq!ia0vp^H-OlUgAGWo^NG60z`*R|>EaktG3V{wjefTSB-$SK
zcS&lVVvXpvYGG8|m~!$$mu>UmLmpwq>dseJ2HTixr)fJMejq#bAUC&Al7f)O1Kul9
zF-)?PoRX5Xn*J}_@m@J~L+ym~2egkLpSDSW<=|X~CwZx<uHBQK?0UE7Ig`k#w{O>a
zExlx5;29MaHS2jzgVW9X_ou(!Rb~9Xlfl(3p+S*}nMY6}q2mC9GYgx9lEDFiM#eS{
z9s?H=q@w<O7I<LlE%J32*W)XB%NO>Ahu{41hNUgZOX=&bg_mOQb~~5eUZ~>U+qZmI
zU?xl3A<sqgcCGXdTl;i%q--wFudMeny=F<RcenXT$yTyWE#z-=s+0-$)vedj^IT>2
z^tbNSV`WDZ!}n^OthLkU&<WcR7`W8vPYz3@_~Sjt86_uqRQIoo@eNhw{gu1*_G15f
zg_Wz)R+|}`@qM3Co@~rkwxWM3|F4=q8=n98%pPhdC)LlqNu}#s(DxWW=lAWUFaJp|
zRFQp~apOj{>70-D9is1CPi@{flc~E||CiO<1K0JX_J4R{%XebRoR=z(>s5bN{>`}m
z^?XmyBjLGEBX0OK#>UB{%UE7Jy7aDvLh#OYU!$_(YZl8-I(2&WtQ`R-FTN^@yu^QZ
z$>KF@pYK{^5uA{Je{HHv<mKJl%N{o@51BogTl~^QzC|ut*PoV3Ej}SP?djwf4(`H_
zv$K5HwC%a$(`Xre`_`PYgyQJvzPlC=GDA(@J4<yPe)pknb<FhVzd!xGXuRIhe(S9l
zD=tdvbv(&b<Y=<KUYh=cabLv2V}}nNxwZWLFSD&}z;LQJ3fRAQ@-8derOT$x&yU%?
zdv{UnchyG5|JyS8=UkRq%zkD+^J8B=k+7ZbPOk4aJ9h8hjEdEVB^n?856C_BeRlod
zEqk<Bv8Iq0H_soe+B@&4O+)y>&wJ8)>&p_(+cJKzf2^%US;7J)#|w*8=FXr0`pcJ+
sd&P`g=?`DMdbKV@>uj~0gW_MN$-8;I7HdrW0?b|vp00i_>zopr0MXu(m;e9(

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/chrome.png b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..a459edba9fb654d616c5de9745d72c8eaddc31e3
GIT binary patch
literal 1217
zcmeAS@N?(olHy`uVBq!ia0vp^cYrvBgAGW&JsdZafq|vN)5S5QV$Rz;{vNZ-WsZM5
zzc?~zb>r5lJ5Q$Nx-WN8>o`<!snsF1KH-Jp%fx9Ly=ERt;$LSVyQckHf^AOgrl$6V
z);iW13G3JsbClbIPAy2>khp>;vHsLG$F9Y@e(BGWjar#pvf2NcdEkBh4-XE1eqQ}!
zZ{;NUMZ&#qo0&GeWNK`%nIyv3{@Ip$!`h`mD}NvK3^I^7^W5gZHnINWq8uzCQ{Fo^
z%x!tV;LO4<p=5DD;2>ig2cLmUL4#rwGmoH5!imrKm)qQU6y#Q1{%mSwWT@Hc`6)@i
zi)7sAJyM$bR&V0@*LKp^^LMl!O+9;O-sPgS)*Bn%rf!bZO%F3EuJ+^ZKE3Y!W2+tZ
z&&6ZxMQ)rbiu}E<`ShAKyXrJHOntiPTP*wW;~sB9cCM){(`3Zugbp08d-}!R*DNc`
zVv+FT|2A?~ri+Z-PwBWZa5Z@rl!v}px-HH2@$UK~`|oFeuUNn!!S;R0Jo{@4C)|J6
z>9Ej{=iU9YetsD#6)~MBC6|V-`gM41)!NO@y8dgdGe3&QcJ{u!+`0N!o}bqJ=+zf4
z@|AAAe(L)HYv$I)3TD2S;^$s|o!|eW%Y4OT=Je8kA*;XDTCdx;uGs5Nly!F0#(8mH
zd;hO{mArS?kGl1J<~o{&U*=V{FaK<5w;{1Df5#F(ccs^L`B!Fcv}^ryU3CA1kX`S5
zYt1gKD)J0kJBx4XE0=H|al83pD?Vo~Rkyo#;e1>v56`OI58uhYdM&jzf2DKn;$$zE
zUq5zqHBCS6JNbCX%c)<SgW`2O7fzRcf3)oUzjV<_CSNY|o?Yb>d_QLTm30A!e@))A
zs(xMIt~poMo2v@SaLLS8YgqWFzJ2woK#!nDpT2voxBqv0$~w<gE3Gy5p9+Z#SA4lj
zXmb7jnk*yDm62CN!<d=hJ*}U9>H3oJ-TYdHUl!hbwSVEe#l4^Id%e1JVaK|uvKN1D
zTdv~Ce(PR9N=d-Rf8{2(Z>|&P_q6xx$$pZ(e%3DKti;(u(GLHbCzmX!4G{l+Oyu_y
z@44^fr|+r0QuJeo-K#oR(`?0`vr3AdtXb8b)Wu)Fz}q`0HFWc#_up1MZtdE0jz4D#
zC{aHwh&Y(=VWHlhng5a}yD@RyfBdxH?#fSFTU)O7!>k`<`EEF(q+eW#2bi>}E47pF
zT;ZJm#e4~;Po%!x&37*N%xOXEV7=`7U#Bir-3?3qa@)n<eX?C->o@b+yEEFGH?7Js
zdtJq`;DTkJvVY;kQ)SanJTINw`}={)$>(2BJpcN<h&#dkVYdYFZnc>-#cQcZ|8Y=`
le_IL6|JUjma@Or<=*fIL?bpSv%D|$D!PC{xWt~$(698^6GRgn|

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/firefox.png b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..c03df7019f294fa99e615fa49dd616f0f87f6153
GIT binary patch
literal 934
zcmeAS@N?(olHy`uVBq!ia0vp^H-I>egAGWod=USFfq^;K)5S5QV$Rz;_8wCTWsZM5
z|M|{h#TBKdKid~gQz*#*0-lF#6Sdi=FHp@W%Hnj-T%nl58O0YRrPImgD5YPJkrB`&
zaOz-=mh<8hm!C^<wae_ee{uQqhadkoMa%88pLf3?f8O)Dj=;5H*<1(g&24PfxJ+7g
zHS1b6BUfs2vh&lTpXCXYuH3#o`)OT+)6ChkgSSS7&iU%rprmYYpyL38G81zT2akag
zGRKQg?q<HZ@7A4PV|(YyF4e3*)$yq7v4^bZqIvK1RF?+*_;rDGcjl_|(zAc<ysMxm
z5;x22Yw_-d`tjSh%wBfzbu;trJHPxQEJ`kIS-CdfzUewE`?k9`IQMY|u-xu-`!MUl
zfmy!u;w<Lesw{piB8X}=iaW4y7H|8f?!NlkJpar`4|msIcVC`f`nu`!IS0E4=E*8^
zcdt|bt}V6YKF109I6+3`|H5w=e#a?mZx5YsBX7g}BygGkhNCkJeQj)3?&jXSO8?BN
zeIFbquP!gieCB(BXF~YD1NW|(7#gkfuAc86HD$@yO51tU-InLScyzB|{<?d+)-C**
zUbXAqBc2J#H)V@zVlHpedwuKv^3K1tR*TDjeF&TsHRGlETj?L{7Ec&@HgV@91UOf%
z3}63$*S>$A?@Pm$vq#NgEYjJ1;FtEUu!(U#e}DR_dH!0m{Cif^x|oYs|B0nH$ejK%
z<KLqvYv#?Fb?L~7ANRH{oXsC1|C)Oi<EK+nHy+&B@+$d%I@<|lK1;0eh9$hPMK77k
zG%Pk~bjkc?C|W=FeO*DqTv^W#z70wl&v(nqMEI9ae>7vc1mARvzAKmSitf`ZaSYOW
z>9RB2-O9Qm*5#pV;1cDzvQ~9#+&x!{?Af>W``#d#)iqmo&s}<8;UP_>1eb&c!A3?m
z7B&e%3BsICm9=ZuWMpP)zTV5wD!g{xI<wPHi?01<;Cd;ZvE;%mJ_hw&!2HMH>FVdQ
I&MBb@0J$)ag#Z8m

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/chrome.png b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5a8d5252e60669db05a1e18302a3e15db71f1e1
GIT binary patch
literal 704
zcmeAS@N?(olHy`uVBq!ia0vp^cYxT7gAGVtNVU4pz`)e*>EaktG3V_a#ezox60Q$-
zTX%S<Z2IIIqO$J9i7u`b6{f(>9+$8X1!Zl4sS~H3&`=YK>^$;z)w{CYcQsXKpZ@Z-
z#@O(Kx=k_LCy5_s^Uv3FIK01Pa@Aqdy7lYN?-f(Xy8ZTBdBLQT%F4=fUl{_U*I)O#
z9CH8sUV#VNiWUbt9xy03G52ur87L9pEI#;K`Tw;wP0P0D+m{#L&ze@c(@J2z-$Bnw
zYTj43?{r%)=QrtGINPGjwic>VYMn2*E9O6y%L~^JeUjWNU@}uL#I${KTEqEu-yht{
zTD2#~G|p~CrdgC|=c~+xp`SNODzM#cuHJLef~9r(@nX$(_t4XGyF!;nngvbb5&abO
z^wEObn}Vv}@CbCiJLo%Y)oi!3ryo~VZ_53$AZGH1=bDK%OE2VYxh-$W?6T;(@8rM1
z+M2(sj~AKz+Pb>(439u}-1~=Zixpn>ZeOu{?kxT@3>#mRUsg%kb*cGP_|q-3qkbD)
zJNn^-q=L|2w&^}0I(i{zxz^57m*uP8TDr1m=k+x@B7Jiil`j6i&a`kxcr074Soo<;
z8`G{j{;XX)`%SX31CLeitdz~)R^<Nfu34xRUowx;&bm&QK|)X_!KI)<@F1fb3p-hy
zxqsHjmY0|RFP1&9+-UxJf2;RT9{ANdKG1%wtV*uY7ab;TyS?_>>#sYnGr8nXShjK=
dKf~W&oP37Iv=aU~9S5dN22WQ%mvv4FO#p=LD!Tvx

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/firefox.png b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..c22b5ecc4bc34f567725fecc71e2598441cab978
GIT binary patch
literal 671
zcmeAS@N?(olHy`uVBq!ia0vp^H-OlOgAGXXU$5N3z`&H|>EaktG3V`_jajb>B-%c1
zXHQoQ7dY{5l6FU{-`yie4bxvdy0I~ZOV+yVWr5MIj_Bo1k3~}oMVjIor(ZCZ(RDx9
zxaw`UN^RYPB)bpMazg(*#9agTa2}Zc`fJrIk4p&#7T@(8R_B;WvpRlIH}HH_w)^=V
z_Kc}FbCw-USRnsAjwQpGiMfY^$3V&8K*s?FWkQ@+H8!8t|BPKSfAar$>A$N==hq}D
zFL3qa@|h%(uC;vSA^jM(3~4z*M&;~;*GVfhy6(jvPO81cb0K8gfon$t{>Gd-6;&F$
zTF+SX{d?Au6Fe7Ema~UFef7WedFLXJi+5|P3)d~*6Ew$G<8G}dcd%{B##MhjKR2g0
zq*>c;un3OKe{Zw<`nw+m{}y#7#m2vrZ)}-<z036C=|2Y~7d*6h!T|EfCzfe3nM=IR
zum9aH`uci$sMJd>%L29xi_5Y)7k$N6pUVGQr?5k>WOjJhW@%OS^9*Ope(77<2`meq
zDz)l<|CIdu-J63ho7iNrWo(+v<oz!DD*Kt%mm#IUeo8J_3AKXAu)?9N?_c=J<Hy~P
z%Q-0b9Dls{SwG*K8~hCWj6tDBDEM(035mZI%ATj626Z2ObZ0li+Tx8-YwtBFSbUdr
c(EiJ|=-kp*GGePEfeDYn)78&qol`;+0M~aCF8}}l

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/chrome.png b/test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..806207ab3368290e3f2902fa45340854c1b47286
GIT binary patch
literal 1163
zcmeAS@N?(olHy`uVBq!ia0vp^cYxS|gAGU){*&Cvz`zpZ>EaktG3V{w{0!+*nd2YN
zFE#YMyk+*6_)8^<Z=X#mwk!Cz(A7Kn<}Fe0jV4{pORFEn2VL-7-uhBaI!y4Uvg?FK
z{#Rk9mwUy$moEOjIK)L{c}m``NYUwK)6`bKw4eQ?CZ$H<*4L!{)79pSe{t;3epmjX
zx_D<izaJ+HlT=5>)s?Hbj2V9Xty_HDY06cng%|E0WOS&l-8=EI;;F2I2?DED9ZLD)
z&{4$MtSofoK?jSWg_0vrpN9Y{cS7aQ*nf8)$rm1Z_Ds-UWnpHG%H&Pc7ikzgpZQ?J
z^TSye=l8zTzH{i2kdm>X&Qal>-c9qCWkz(V3(V|HOf2;L{`>`BURj;vcgN0an@XPT
zd-vc`=aP5LLTgiBo~gZi@ME^h(^VzU?7}rWao7)X&XjA1PhWp^_V8YdPyagWbMAls
zBAk(#H9>+Y&`p4okKs+3wUqR$4eM5DY|V9U4Sw~(Mbc4c$D%__Teg}lJhj>J)dUww
zcby&oC;6y-JR1J|!@1qZ3-!Lpe)6eYvGa3S$(x+xywa<Ke*5~ne>`|VfQ_x)P_}c?
zrMFJe-pWz4wkzLHGyTBRv99-Fx7w^_i3LAQ=H2~nlw&3x_vT*jx#Ly_X5WOr?JeP$
zeypC2!N=D(x&FK&4-ensy`}6`-|X9UU#0CS+#&9M&$_X~Ch@~e0bTz$T;_&9rLE-d
z&i!>aGOjC}ujFvz_Qw_f1+w1X=z5nv&t>6ZMurvNsxEx3;cs)dJE*+7?9rJQ&wo7o
z!zy#<cI)n}JZ6SF`@V|J5D{+ko9EQLep-CE=3~ii8A%&wJlt@*(9)(;zD~wH`}4Mt
z9EO0%NXGTYdpl2R#?1XG`&_>#F?g!@t6u5g-x0cEIXi!<)qMHLp)_$dPoL2|pbw`X
zo*d+?U^M69_kvVa)fH<B9-dym|LC1JF<I3WkGKv!)c#O)Cn7wAqyKhid>!xOM>i_6
z=2zG>cHfV8T6(+n(<LEhH~%e0ZR>-q<}S_1`|@z@_Wq>2I>zs2rV2v6i}Y{wKYH}_
zMxDQ`i0eVKcv-h|eT$xNy?*iDF6OJDadZBah%7%>(-zBrzn?37=f&ktTXYUL2aB-s
z-?`qj=~2=b+1JPKF|R-LP^01fJ1Ltl3DPm=j2IeDhqg8Amn_`=-dV=>T7N{2*lhFA
z<nzJ(hr`3UT?2XSgcm*4Y;<t={QIwV9rLRrAth7WT&Db-qxw30OMQB}`k%V}AHNs4
z>})wG$eC2&(j*}>QGv}}r31<>VLx7P61>hU{oQN6b90V&D?eQZO2+$jPHcZ^r*ScA
z+POQ||LQC~TP3?LT&Cu!!PA!iucsc)wB3`lbw=V=k!7C+T`XJ8lQ7Ihvj&ZOhCzU<
tRe*=BSB^XIn(^vYUHj`gGD`n)hO-G83m%=m5?IJEc)I$ztaD0e0s!{_BjEr5

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/firefox.png b/test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..13c37edfad6f442212e90d978aa0eda57b42487f
GIT binary patch
literal 816
zcmeAS@N?(olHy`uVBq!ia0vp^H-OlQgAGWU-jz7Pz`*p~)5S5QV$R#UwjR=nGRHsO
zj}>zDxD;po)5&|cNEe^1m4$_vVzbAp=I#eUFP=OJl3D6(EfU+J*Qm$0G02MJk|Aq5
zpX`(-j$F3*W!DxRO<FXaPnXYXhWd~9vd_OW>mC39aGqlPyPA#{Q@xh9F~scJx6f{=
z>dFWmx4q&Df#1G;6Ja@c|A30-{PXTR<rM;_O`8^?BlgsNub{$74ju!Sga$<>W*$L_
zgpLCY&Ma&aN(Ki68X4OziTBSb7izm@ZxQnMM?~U@aLI`=``&9#_S2sJHo$6XQT+Q|
z4^()**5=2%Z?!5^{CH@?!o^Xs_H}YERCwlIw`Si~U*Hk3qX;P69KV0=bxZcJ)$-Q&
zSv;De_P*P5%yNTU^K$WZ%fjy6v2bO<v>oEGh12%ExxHp>`DLlu_btk6GnTDc**>kD
z?a@IK1J6r;Id%7FtvLS2&Ee07E)I!J^-Zx4?qsJtoT)XLe@=RXMb{V3ZC2K+HvWvR
z+87j;x^&H{Q*+c-pEou5eKV7-L;LrEeN#-#ELJsMo_{@R>XNysdn2c{rOjLMzhp<S
za<K5L*t*q6=c=VQNOZrOkX-Hkx@yVC&C5Gu=k8j~TYG!j61B8lJ>Pg^nD{IioG-Fo
zySq59_QG-h^mXswyjuP4rC<4EV}~AB@rZE8$E+{^e%XKjq>AV6sG7)2RS!41?V2@*
zF-hlA@~?j<H;Lu>XXg}r`4aX1vSnzS_1v_E9Y(xs(ktAiKKyUYd_=Ha27C0(Vg77$
zK1tr;&DKvh%lX#m3je&H!89@B>E`z`5qh^3??2aUTYdDq?bA)N?_S4<FA3JX%kwEK
z|MZ7l9Y;Rf_`l7Syt`vw_RIJa+rI3Z{;8Jr`lhuytm{Pl1R0T%0G`x=kXovmSzH{P
tot+){p4CHUebidBCWVeFc?YGxjOl$Bf)x7y1OjscgQu&X%Q~loCII=eWW4|Y

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/chrome.png b/test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d37156bc543762dfd083891f1b24e6e792495f1
GIT binary patch
literal 682
zcmeAS@N?(olHy`uVBq!ia0vp^cYxT1gAGW&%8y>pz`#`K>EaktG3V`V#R<0pMBE<k
zmvvDQ>Z}nK?PQkhbWl(h<WMmZ0y6|poS1q-LrtjD<=ED)vfX#jF=gs)&OdK1%xwN}
zrtyU74{z7l{a0jI%Y8UN)^nDR+W9!{2U{P1{9$e3DaF@*K8F9nR-5ypZ439=S1TR}
zcPeO5Y+~jSlu77#z~IcnE}>*`K;R%_8wa0(3kg!MYHU8`KfRW@tM32aqw6l|WEGVj
zu<vb}tkN5%b!}r+ejH!Zv2eCMmu)OqU$Hg5;Qle=r0t!R5t^OsMdvb2Vzsnix2H9n
zU-$LFs+?68YfU2FhE8M8o$PSb<l?qH`D`B?KR<{Qld@3%{%gmyp#2)rbEo7OpItPs
zX@R!*a<A!IuVpTKbxrbs@Y!bRwINfMp1OX#w0e`)*6=kGe}5J+mpC2DK3C8D9K*bf
z(#ubZ)~UGGzmND<wZF_Xe<owi#aFg5+n=lK{VZB)w{lN1+XvU(v(@x2MO2ICpIXV+
zs+YH*?)x#I*>Bmzd#338K9$zF?P+9bZD8mUuW<3Rmt5X~EM99bR&dhK^;JnkpQtPI
z*-cR&*IiKB1#<Xe-^m$acemu;@1K6^QR-vK2b&+?XTlleUp_RyKb!X1{yJlg*5{vp
z7JioFdv}qaWuH-95EH3Uf{4f~6PG;xxWeZA{Jmlas^=Q;l-e?Ed96M{_n6$=qcIu4
PG|1rT>gTe~DWM4ffuI|t

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/firefox.png b/test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..f05e319b6058573cb175bb4aca0d21e3998460c8
GIT binary patch
literal 651
zcmeAS@N?(olHy`uVBq!ia0vp^H-OlUgAGWo^NG60z`zvb>EaktG3V{Ajajb>B-%c1
zXHQoQ7dY{5l6FU{-`yie4bxvdy0I~ZOV+yVWr5MIj_Bo1k3~}oMVjIor(ZCZ(RDx9
zxaw`UN^RYPB)bpMazg*B0!5C_W~kX2w|;q_3NKr8@q4B%r_weD3b52OO<t0>z4}~j
zL)gr-X;M6FzY5>EHkc_J9OyW}pv=VF!@*;qL>_0w=Z`1$KP#VD=l8EZ_si;QwVyhB
z8^kO%4LpP9temrqYkz^{g4_xhmYy|@Yr7XN(x|HE?f&X%>=1mDDO%k5Yq6$w_SMq0
zyUr}xvtRszqOrr|xpEOxSO330SG`NgwfytjqdVt)@+$ncpya!%uFuyAM^}APKg&Ol
zan{=}2OjyP?%n(OP2BFshktgfb(PlctY;C5i_^a5qW_sWy`k;#1ZI%0P6$U7EuE-k
zyZ@bh*qZqHp_xloKRF<|;Gs|X1{d?lHCp?x{%(A*>q2gv=DEBnGB(U6w_pB$^21?<
zUuf2fI{Tn~wfg70d@p}kA-UkBAD7O~^`Y_x;>&`szI>kEu<Q}U3T&a+_iy3Pj~_2?
zWWT`i_~VZiKNmAwe`9WV-{bB=VW7YAxKy<BO43G)?|KfeW7dSN-mbuLZZG=<ul<bu
XaZB%I<gs`F6B&c2tDnm{r-UW|zuFZn

literal 0
HcmV?d00001

diff --git a/test/visual/vaadin-password-field/password-field-custom-input.html b/test/visual/vaadin-password-field/password-field-custom-input.html
new file mode 100644
index 00000000..28f50119
--- /dev/null
+++ b/test/visual/vaadin-password-field/password-field-custom-input.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../../../webcomponentsjs/webcomponents-loader.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      customElements.whenDefined('vaadin-password-field').then(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
+  <link href="../common.html" rel="import">
+</head>
+
+<body>
+
+  <fieldset id="password-field-custom-input">
+    <vaadin-password-field value="Foo">
+      <input type="password" slot="input">
+    </vaadin-password-field>
+  </fieldset>
+
+</body>
diff --git a/test/visual/vaadin-text-area/text-area-custom-textarea.html b/test/visual/vaadin-text-area/text-area-custom-textarea.html
new file mode 100644
index 00000000..539c3d1b
--- /dev/null
+++ b/test/visual/vaadin-text-area/text-area-custom-textarea.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../../../webcomponentsjs/webcomponents-loader.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
+  <link href="../common.html" rel="import">
+</head>
+
+<body>
+
+  <fieldset id="text-area-custom-textarea">
+    <vaadin-text-area value="Foo">
+      <textarea slot="textarea"></textarea>
+    </vaadin-text-area>
+  </fieldset>
+
+</body>
diff --git a/test/visual/vaadin-text-field/text-field-custom-input.html b/test/visual/vaadin-text-field/text-field-custom-input.html
new file mode 100644
index 00000000..1ae28129
--- /dev/null
+++ b/test/visual/vaadin-text-field/text-field-custom-input.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../../../webcomponentsjs/webcomponents-loader.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
+  <link href="../common.html" rel="import">
+</head>
+
+<body>
+
+  <fieldset id="text-field-custom-input">
+    <vaadin-text-field value="Foo">
+      <input type="text" slot="input">
+    </vaadin-text-field>
+  </fieldset>
+
+</body>

From 41c008daf942eb83bc745016c374bd97351936d4 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Fri, 30 Nov 2018 16:07:32 +0200
Subject: [PATCH 08/13] Add placeholder styles and update demos, docs

---
 demo/index.html                               |  8 ++
 demo/text-field-custom-demos.html             | 29 +++++---
 src/vaadin-password-field.html                | 17 +++++
 src/vaadin-text-area.html                     | 17 +++++
 src/vaadin-text-field.html                    | 17 +++++
 theme/lumo/vaadin-placeholder-styles.html     | 73 +++++++++++++++++++
 theme/lumo/vaadin-text-field-styles.html      | 28 ++-----
 theme/material/vaadin-placeholder-styles.html | 66 +++++++++++++++++
 theme/material/vaadin-text-field-styles.html  | 24 ++----
 9 files changed, 234 insertions(+), 45 deletions(-)
 create mode 100644 theme/lumo/vaadin-placeholder-styles.html
 create mode 100644 theme/material/vaadin-placeholder-styles.html

diff --git a/demo/index.html b/demo/index.html
index a296cc7d..c12e0af4 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,6 +18,7 @@
   <link rel="import" href="../vaadin-text-area.html">
   <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../vaadin-lumo-styles/icons.html">
+  <link rel="import" href="../theme/lumo/vaadin-placeholder-styles.html">
 
   <!-- Used in the styling examples, keep in sync -->
   <dom-module id="my-text-field-styles" theme-for="vaadin-text-field vaadin-text-area">
@@ -35,6 +36,13 @@
     </template>
   </dom-module>
 
+  <!-- Used for the custom input examples -->
+  <dom-module id="included-lumo-placeholder-styles" theme-for="vaadin-demo-shadow-dom-renderer">
+    <template>
+      <style include="lumo-placeholder-styles"></style>
+    </template>
+  </dom-module>
+
   <custom-style>
     <style include="vaadin-component-demo-shared-styles"></style>
   </custom-style>
diff --git a/demo/text-field-custom-demos.html b/demo/text-field-custom-demos.html
index 9e986f82..5d199684 100644
--- a/demo/text-field-custom-demos.html
+++ b/demo/text-field-custom-demos.html
@@ -6,6 +6,26 @@
       }
     </style>
 
+    <h3>Custom Input</h3>
+    <p>
+      <b>Note:</b> In order to apply lumo or material theme styles to the placeholder
+      of the slotted input you should explicitly import a file
+      `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+      and include styles into the same scope as `vaadin-text-field`:
+      <code>&lt;custom-style&gt;&lt;style include="lumo-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code> OR 
+      <code>&lt;custom-style&gt;&lt;style include="material-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code>
+    </p>
+    <vaadin-demo-snippet id="text-field-custom-demos-phone">
+      <template preserve-content>
+        <custom-style>
+          <style include="lumo-placeholder-styles"></style>
+        </custom-style>
+        <vaadin-text-field label="Name">
+          <input type="text" slot="input">
+        </vaadin-text-field>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Number Input</h3>
     <p>
       <b>Note:</b> All properties and attributes that `vaadin-text-field` has should be defined on the host.
@@ -27,15 +47,6 @@ <h3>Email Input</h3>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Phone Input</h3>
-    <vaadin-demo-snippet id="text-field-custom-demos-phone">
-      <template preserve-content>
-        <vaadin-text-field label="Phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 111-222-3333">
-          <input type="tel" slot="input">
-        </vaadin-text-field>
-      </template>
-    </vaadin-demo-snippet>
-
     <h3>Password Field</h3>
     <vaadin-demo-snippet id="text-field-custom-demos-pass">
       <template preserve-content>
diff --git a/src/vaadin-password-field.html b/src/vaadin-password-field.html
index 74416335..76e6f6f2 100644
--- a/src/vaadin-password-field.html
+++ b/src/vaadin-password-field.html
@@ -68,6 +68,23 @@
        * </vaadin-password-field>
        * ```
        *
+       * **NOTE:** when using custom input: in order to apply lumo or material theme styles to the placeholder
+       * of the slotted input you should explicitly import a file
+       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+       * and include styles into the same scope as `vaadin-password-field`:
+       *
+       * ```html
+       * <custom-style>
+       *   <style include="lumo-placeholder-styles"></style>
+       * </custom-style>
+       *
+       * <!--OR-->
+       *
+       * <custom-style>
+       *   <style include="material-placeholder-styles"></style>
+       * </custom-style>
+       * ```
+       *
        * ### Styling
        *
        * See vaadin-text-field.html for the styling documentation
diff --git a/src/vaadin-text-area.html b/src/vaadin-text-area.html
index a9b1269c..9c998fd2 100644
--- a/src/vaadin-text-area.html
+++ b/src/vaadin-text-area.html
@@ -115,6 +115,23 @@
        * </vaadin-text-area>
        * ```
        *
+       * **NOTE:** when using custom textarea: in order to apply lumo or material theme styles to the placeholder
+       * of the slotted textarea you should explicitly import a file
+       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+       * and include styles into the same scope as `vaadin-text-area`:
+       *
+       * ```html
+       * <custom-style>
+       *   <style include="lumo-placeholder-styles"></style>
+       * </custom-style>
+       *
+       * <!--OR-->
+       *
+       * <custom-style>
+       *   <style include="material-placeholder-styles"></style>
+       * </custom-style>
+       * ```
+       *
        * ### Styling
        *
        * The following shadow DOM parts are available for styling:
diff --git a/src/vaadin-text-field.html b/src/vaadin-text-field.html
index d91c80d1..1d7c99c8 100644
--- a/src/vaadin-text-field.html
+++ b/src/vaadin-text-field.html
@@ -81,6 +81,23 @@
        * </vaadin-text-field>
        * ```
        *
+       * **NOTE:** when using custom input: in order to apply lumo or material theme styles to the placeholder
+       * of the slotted input you should explicitly import a file
+       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+       * and include styles into the same scope as `vaadin-text-field`:
+       *
+       * ```html
+       * <custom-style>
+       *   <style include="lumo-placeholder-styles"></style>
+       * </custom-style>
+       *
+       * <!--OR-->
+       *
+       * <custom-style>
+       *   <style include="material-placeholder-styles"></style>
+       * </custom-style>
+       * ```
+       *
        * ### Styling
        *
        * The following custom properties are available for styling:
diff --git a/theme/lumo/vaadin-placeholder-styles.html b/theme/lumo/vaadin-placeholder-styles.html
new file mode 100644
index 00000000..9a27977a
--- /dev/null
+++ b/theme/lumo/vaadin-placeholder-styles.html
@@ -0,0 +1,73 @@
+<dom-module id="lumo-placeholder-styles">
+  <template>
+    <style>
+      vaadin-text-field > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-password-field > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::-webkit-input-placeholder {
+        color: inherit;
+        transition: opacity 0.175s 0.05s;
+        opacity: 0.5;
+      }
+
+      vaadin-text-field > input[slot="input"]::-ms-input-placeholder,
+      vaadin-password-field > input[slot="input"]::-ms-input-placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::-ms-input-placeholder {
+        color: inherit;
+        opacity: 0.5;
+      }
+
+      vaadin-text-field > input[slot="input"]::-moz-placeholder,
+      vaadin-password-field > input[slot="input"]::-moz-placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::-moz-placeholder {
+        color: inherit;
+        transition: opacity 0.175s 0.05s;
+        opacity: 0.5;
+      }
+
+      vaadin-text-field > input[slot="input"]::placeholder,
+      vaadin-password-field > input[slot="input"]::placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::placeholder {
+        color: inherit;
+        transition: opacity 0.175s 0.1s;
+        opacity: 0.5;
+      }
+
+      /* Read-only and disabled */
+      vaadin-text-field[readonly] > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-password-field[readonly] > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-text-area[readonly] > textarea[slot="textarea"]::-webkit-input-placeholder,
+      vaadin-text-field[disabled] > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-password-field[disabled] > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-text-area[disabled] > textarea[slot="textarea"]::-webkit-input-placeholder {
+        opacity: 0;
+      }
+
+      vaadin-text-field[readonly] > input[slot="input"]::-ms-input-placeholder,
+      vaadin-password-field[readonly] > input[slot="input"]::-ms-input-placeholder,
+      vaadin-text-area[readonly] > textarea[slot="textarea"]::-ms-input-placeholder,
+      vaadin-text-field[disabled] > input[slot="input"]::-ms-input-placeholder,
+      vaadin-password-field[disabled] > input[slot="input"]::-ms-input-placeholder,
+      vaadin-text-area[disabled] > textarea[slot="textarea"]::-ms-input-placeholder {
+        opacity: 0;
+      }
+
+      vaadin-text-field[readonly] > input[slot="input"]::-moz-placeholder,
+      vaadin-password-field[readonly] > input[slot="input"]::-moz-placeholder,
+      vaadin-text-area[readonly] > textarea[slot="textarea"]::-moz-placeholder,
+      vaadin-text-field[disabled] > input[slot="input"]::-moz-placeholder,
+      vaadin-password-field[disabled] > input[slot="input"]::-moz-placeholder,
+      vaadin-text-area[disabled] > textarea[slot="textarea"]::-moz-placeholder {
+        opacity: 0;
+      }
+
+      vaadin-text-field[readonly] > input[slot="input"]::placeholder,
+      vaadin-password-field[readonly] > input[slot="input"]::placeholder,
+      vaadin-text-area[readonly] > textarea[slot="textarea"]::placeholder,
+      vaadin-text-field[disabled] > input[slot="input"]::placeholder,
+      vaadin-password-field[disabled] > input[slot="input"]::placeholder,
+      vaadin-text-area[disabled] > textarea[slot="textarea"]::placeholder {
+        opacity: 0;
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/theme/lumo/vaadin-text-field-styles.html b/theme/lumo/vaadin-text-field-styles.html
index 01cb3b81..1d19138b 100644
--- a/theme/lumo/vaadin-text-field-styles.html
+++ b/theme/lumo/vaadin-text-field-styles.html
@@ -64,28 +64,24 @@
         }
       }
 
-      [part="value"]::-webkit-input-placeholder,
-      [part="input-field"] ::slotted(*)::-webkit-input-placeholder {
+      [part="value"]::-webkit-input-placeholder {
         color: inherit;
         transition: opacity 0.175s 0.05s;
         opacity: 0.5;
       }
 
-      [part="value"]:-ms-input-placeholder,
-      [part="input-field"] ::slotted(*)::-ms-input-placeholder {
+      [part="value"]:-ms-input-placeholder {
         color: inherit;
         opacity: 0.5;
       }
 
-      [part="value"]::-moz-placeholder,
-      [part="input-field"] ::slotted(*)::-moz-placeholder {
+      [part="value"]::-moz-placeholder {
         color: inherit;
         transition: opacity 0.175s 0.05s;
         opacity: 0.5;
       }
 
-      [part="value"]::placeholder,
-      [part="input-field"] ::slotted(*)::placeholder {
+      [part="value"]::placeholder {
         color: inherit;
         transition: opacity 0.175s 0.1s;
         opacity: 0.5;
@@ -157,30 +153,22 @@
 
       /* Read-only and disabled */
       :host([readonly]) [part="value"]::-webkit-input-placeholder,
-      :host([disabled]) [part="value"]::-webkit-input-placeholder,
-      :host([readonly]) ::slotted(*)::-webkit-input-placeholder,
-      :host([disabled]) ::slotted(*)::-webkit-input-placeholder {
+      :host([disabled]) [part="value"]::-webkit-input-placeholder {
         opacity: 0;
       }
 
       :host([readonly]) [part="value"]:-ms-input-placeholder,
-      :host([disabled]) [part="value"]:-ms-input-placeholder,
-      :host([readonly]) ::slotted(*)::-ms-input-placeholder,
-      :host([disabled]) ::slotted(*)::-ms-input-placeholder {
+      :host([disabled]) [part="value"]:-ms-input-placeholder {
         opacity: 0;
       }
 
       :host([readonly]) [part="value"]::-moz-placeholder,
-      :host([disabled]) [part="value"]::-moz-placeholder,
-      :host([readonly]) ::slotted(*)::-moz-placeholder,
-      :host([disabled]) ::slotted(*)::-moz-placeholder {
+      :host([disabled]) [part="value"]::-moz-placeholder {
         opacity: 0;
       }
 
       :host([readonly]) [part="value"]::placeholder,
-      :host([disabled]) [part="value"]::placeholder,
-      :host([readonly]) ::slotted(*)::placeholder,
-      :host([disabled]) ::slotted(*)::placeholder {
+      :host([disabled]) [part="value"]::placeholder {
         opacity: 0;
       }
 
diff --git a/theme/material/vaadin-placeholder-styles.html b/theme/material/vaadin-placeholder-styles.html
new file mode 100644
index 00000000..68605829
--- /dev/null
+++ b/theme/material/vaadin-placeholder-styles.html
@@ -0,0 +1,66 @@
+<link rel="import" href="../../../vaadin-material-styles/color.html">
+
+<dom-module id="material-placeholder-styles">
+  <template>
+    <style>
+      vaadin-text-field > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-password-field > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::-webkit-input-placeholder {
+        color: var(--material-disabled-text-color);
+        transition: opacity 0.175s 0.05s;
+        opacity: 1;
+      }
+
+      vaadin-text-field > input[slot="input"]::-ms-input-placeholder,
+      vaadin-password-field > input[slot="input"]::-ms-input-placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::-ms-input-placeholder {
+        color: var(--material-disabled-text-color);
+      }
+
+      vaadin-text-field > input[slot="input"]::-moz-placeholder,
+      vaadin-password-field > input[slot="input"]::-moz-placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::-moz-placeholder {
+        color: var(--material-disabled-text-color);
+        transition: opacity 0.175s 0.05s;
+        opacity: 1;
+      }
+
+      vaadin-text-field > input[slot="input"]::placeholder,
+      vaadin-password-field > input[slot="input"]::placeholder,
+      vaadin-text-area > textarea[slot="textarea"]::placeholder {
+        color: var(--material-disabled-text-color);
+        transition: opacity 0.175s 0.1s;
+        opacity: 1;
+      }
+
+      vaadin-text-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-password-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-webkit-input-placeholder,
+      vaadin-text-area[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::-webkit-input-placeholder {
+        opacity: 0;
+        transition-delay: 0;
+      }
+
+      vaadin-text-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-moz-placeholder,
+      vaadin-password-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-moz-placeholder,
+      vaadin-text-area[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::-moz-placeholder {
+        opacity: 0;
+        transition-delay: 0;
+      }
+
+      vaadin-text-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::placeholder,
+      vaadin-password-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::placeholder,
+      vaadin-text-area[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::placeholder {
+        opacity: 0;
+        transition-delay: 0;
+      }
+
+      /* IE11 doesn’t show the placeholder when the input is focused, so it’s basically useless for this theme */
+      vaadin-text-field[has-label] > input[slot="input"]:-ms-input-placeholder,
+      vaadin-password-field[has-label] > input[slot="input"]:-ms-input-placeholder,
+      vaadin-text-area[has-label] > input[slot="textarea"]:-ms-input-placeholder {
+        opacity: 0;
+      }
+    </style>
+  </template>
+</dom-module>
+  
diff --git a/theme/material/vaadin-text-field-styles.html b/theme/material/vaadin-text-field-styles.html
index bb5f1eb0..1446f163 100644
--- a/theme/material/vaadin-text-field-styles.html
+++ b/theme/material/vaadin-text-field-styles.html
@@ -106,53 +106,45 @@
 
       /* TODO: the text opacity should be 42%, but the disabled style is 38%.
       Would need to introduce another property for it if we want to be 100% accurate. */
-      [part="value"]::-webkit-input-placeholder,
-      [part="input-field"] ::slotted(*)::-webkit-input-placeholder {
+      [part="value"]::-webkit-input-placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.05s;
         opacity: 1;
       }
 
-      [part="value"]:-ms-input-placeholder,
-      [part="input-field"] ::slotted(*):-ms-input-placeholder {
+      [part="value"]:-ms-input-placeholder {
         color: var(--material-disabled-text-color);
       }
 
-      [part="value"]::-moz-placeholder,
-      [part="input-field"] ::slotted(*)::-moz-placeholder {
+      [part="value"]::-moz-placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.05s;
         opacity: 1;
       }
 
-      [part="value"]::placeholder,
-      [part="input-field"] ::slotted(*)::placeholder {
+      [part="value"]::placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.1s;
         opacity: 1;
       }
 
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-webkit-input-placeholder,
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) ::slotted(*)::-webkit-input-placeholder {
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-webkit-input-placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-moz-placeholder,
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) ::slotted(*)::-moz-placeholder {
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::-moz-placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::placeholder,
-      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) ::slotted(*)::placeholder {
+      :host([has-label]:not([focused]):not([invalid]):not([theme="always-float-label"])) [part="value"]::placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
       /* IE11 doesn’t show the placeholder when the input is focused, so it’s basically useless for this theme */
-      :host([has-label]) [part="value"]:-ms-input-placeholder,
-      :host([has-label]) ::slotted(*):-ms-input-placeholder {
+      :host([has-label]) [part="value"]:-ms-input-placeholder {
         opacity: 0;
       }
 

From e969916ea1d39a4d1fcd82a3e646535c4d6bece7 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Mon, 3 Dec 2018 13:34:43 +0200
Subject: [PATCH 09/13] Fix styling visual tests

---
 test/visual/vaadin-text-area/styling.html  | 6 +++++-
 test/visual/vaadin-text-field/styling.html | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/test/visual/vaadin-text-area/styling.html b/test/visual/vaadin-text-area/styling.html
index 668f2224..bbe1022b 100644
--- a/test/visual/vaadin-text-area/styling.html
+++ b/test/visual/vaadin-text-area/styling.html
@@ -26,7 +26,11 @@
           font-weight: bold;
         }
 
-        [part~="value"] {
+        /* NOTE(yuriy): Targeting slotted elements as workaround for
+           gemini firfox 47 to overcome stronger selector */
+        [part="value"],
+        [part="input-field"] ::slotted(input),
+        [part="input-field"] ::slotted(textarea) {
           background-color: red;
           border: none;
           --_lumo-text-field-overflow-mask-image: none;
diff --git a/test/visual/vaadin-text-field/styling.html b/test/visual/vaadin-text-field/styling.html
index fe1787b2..bd1c6e9b 100644
--- a/test/visual/vaadin-text-field/styling.html
+++ b/test/visual/vaadin-text-field/styling.html
@@ -26,7 +26,11 @@
           font-weight: bold;
         }
 
-        [part~="value"] {
+        /* NOTE(yuriy): Targeting slotted elements as workaround for
+           gemini firfox 47 to overcome stronger selector */
+        [part="value"],
+        [part="input-field"] ::slotted(input),
+        [part="input-field"] ::slotted(textarea) {
           background-color: red;
           border: none;
           --_lumo-text-field-overflow-mask-image: none;

From 5e501fa144cfbe8f2d618242b8a15c4326f472c3 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Tue, 4 Dec 2018 10:08:35 +0200
Subject: [PATCH 10/13] Update demo description, remove number field demo

---
 demo/text-field-custom-demos.html | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/demo/text-field-custom-demos.html b/demo/text-field-custom-demos.html
index 5d199684..3f534e93 100644
--- a/demo/text-field-custom-demos.html
+++ b/demo/text-field-custom-demos.html
@@ -7,10 +7,16 @@
     </style>
 
     <h3>Custom Input</h3>
+    <p>
+      `vaadin-text-field` has major part of the properties and attributes available on the native input.
+    </p>
+    <p>
+      <b>Note:</b> All properties and attributes that `vaadin-text-field` has should be defined on the host.
+    </p>
     <p>
       <b>Note:</b> In order to apply lumo or material theme styles to the placeholder
       of the slotted input you should explicitly import a file
-      `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+      theme/lumo/vaadin-placeholder-styles.html or theme/material/vaadin-placeholder-styles.html
       and include styles into the same scope as `vaadin-text-field`:
       <code>&lt;custom-style&gt;&lt;style include="lumo-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code> OR 
       <code>&lt;custom-style&gt;&lt;style include="material-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code>
@@ -20,23 +26,12 @@ <h3>Custom Input</h3>
         <custom-style>
           <style include="lumo-placeholder-styles"></style>
         </custom-style>
-        <vaadin-text-field label="Name">
+        <vaadin-text-field label="Name" placeholder="Name">
           <input type="text" slot="input">
         </vaadin-text-field>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Number Input</h3>
-    <p>
-      <b>Note:</b> All properties and attributes that `vaadin-text-field` has should be defined on the host.
-    </p>
-    <vaadin-demo-snippet id="text-field-custom-demos-phone">
-      <template preserve-content>
-        <vaadin-text-field label="Amount" pattern="^[1-9]{1,2}[0]?|100" prevent-invalid-input value="0">
-          <input type="number" slot="input" min="0" max="100" step="2">
-        </vaadin-text-field>
-      </template>
-    </vaadin-demo-snippet>
 
     <h3>Email Input</h3>
     <vaadin-demo-snippet id="text-field-custom-demos-email">

From 3da72921c235865ea218270dde732595fc11ba33 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Tue, 4 Dec 2018 10:21:34 +0200
Subject: [PATCH 11/13] Remove vaadin field specific selectors from placeholder
 styles

---
 theme/lumo/vaadin-placeholder-styles.html     | 60 ++++++++-----------
 theme/material/vaadin-placeholder-styles.html | 40 +++++--------
 2 files changed, 40 insertions(+), 60 deletions(-)

diff --git a/theme/lumo/vaadin-placeholder-styles.html b/theme/lumo/vaadin-placeholder-styles.html
index 9a27977a..64f99ede 100644
--- a/theme/lumo/vaadin-placeholder-styles.html
+++ b/theme/lumo/vaadin-placeholder-styles.html
@@ -1,71 +1,59 @@
 <dom-module id="lumo-placeholder-styles">
   <template>
     <style>
-      vaadin-text-field > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-password-field > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::-webkit-input-placeholder {
+      input[slot="input"]::-webkit-input-placeholder,
+      textarea[slot="textarea"]::-webkit-input-placeholder {
         color: inherit;
         transition: opacity 0.175s 0.05s;
         opacity: 0.5;
       }
 
-      vaadin-text-field > input[slot="input"]::-ms-input-placeholder,
-      vaadin-password-field > input[slot="input"]::-ms-input-placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::-ms-input-placeholder {
+      input[slot="input"]::-ms-input-placeholder,
+      textarea[slot="textarea"]::-ms-input-placeholder {
         color: inherit;
         opacity: 0.5;
       }
 
-      vaadin-text-field > input[slot="input"]::-moz-placeholder,
-      vaadin-password-field > input[slot="input"]::-moz-placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::-moz-placeholder {
+      input[slot="input"]::-moz-placeholder,
+      textarea[slot="textarea"]::-moz-placeholder {
         color: inherit;
         transition: opacity 0.175s 0.05s;
         opacity: 0.5;
       }
 
-      vaadin-text-field > input[slot="input"]::placeholder,
-      vaadin-password-field > input[slot="input"]::placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::placeholder {
+      input[slot="input"]::placeholder,
+      textarea[slot="textarea"]::placeholder {
         color: inherit;
         transition: opacity 0.175s 0.1s;
         opacity: 0.5;
       }
 
       /* Read-only and disabled */
-      vaadin-text-field[readonly] > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-password-field[readonly] > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-text-area[readonly] > textarea[slot="textarea"]::-webkit-input-placeholder,
-      vaadin-text-field[disabled] > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-password-field[disabled] > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-text-area[disabled] > textarea[slot="textarea"]::-webkit-input-placeholder {
+      [readonly] > input[slot="input"]::-webkit-input-placeholder,
+      [readonly] > textarea[slot="textarea"]::-webkit-input-placeholder,
+      [disabled] > input[slot="input"]::-webkit-input-placeholder,
+      [disabled] > textarea[slot="textarea"]::-webkit-input-placeholder {
         opacity: 0;
       }
 
-      vaadin-text-field[readonly] > input[slot="input"]::-ms-input-placeholder,
-      vaadin-password-field[readonly] > input[slot="input"]::-ms-input-placeholder,
-      vaadin-text-area[readonly] > textarea[slot="textarea"]::-ms-input-placeholder,
-      vaadin-text-field[disabled] > input[slot="input"]::-ms-input-placeholder,
-      vaadin-password-field[disabled] > input[slot="input"]::-ms-input-placeholder,
-      vaadin-text-area[disabled] > textarea[slot="textarea"]::-ms-input-placeholder {
+      [readonly] > input[slot="input"]::-ms-input-placeholder,
+      [readonly] > textarea[slot="textarea"]::-ms-input-placeholder,
+      [disabled] > input[slot="input"]::-ms-input-placeholder,
+      [disabled] > textarea[slot="textarea"]::-ms-input-placeholder {
         opacity: 0;
       }
 
-      vaadin-text-field[readonly] > input[slot="input"]::-moz-placeholder,
-      vaadin-password-field[readonly] > input[slot="input"]::-moz-placeholder,
-      vaadin-text-area[readonly] > textarea[slot="textarea"]::-moz-placeholder,
-      vaadin-text-field[disabled] > input[slot="input"]::-moz-placeholder,
-      vaadin-password-field[disabled] > input[slot="input"]::-moz-placeholder,
-      vaadin-text-area[disabled] > textarea[slot="textarea"]::-moz-placeholder {
+      [readonly] > input[slot="input"]::-moz-placeholder,
+      [readonly] > textarea[slot="textarea"]::-moz-placeholder,
+      [disabled] > input[slot="input"]::-moz-placeholder,
+      [disabled] > textarea[slot="textarea"]::-moz-placeholder {
         opacity: 0;
       }
 
-      vaadin-text-field[readonly] > input[slot="input"]::placeholder,
-      vaadin-password-field[readonly] > input[slot="input"]::placeholder,
-      vaadin-text-area[readonly] > textarea[slot="textarea"]::placeholder,
-      vaadin-text-field[disabled] > input[slot="input"]::placeholder,
-      vaadin-password-field[disabled] > input[slot="input"]::placeholder,
-      vaadin-text-area[disabled] > textarea[slot="textarea"]::placeholder {
+      [readonly] > input[slot="input"]::placeholder,
+      [readonly] > textarea[slot="textarea"]::placeholder,
+      [disabled] > input[slot="input"]::placeholder,
+      [disabled] > textarea[slot="textarea"]::placeholder {
         opacity: 0;
       }
     </style>
diff --git a/theme/material/vaadin-placeholder-styles.html b/theme/material/vaadin-placeholder-styles.html
index 68605829..fb7161e0 100644
--- a/theme/material/vaadin-placeholder-styles.html
+++ b/theme/material/vaadin-placeholder-styles.html
@@ -3,61 +3,53 @@
 <dom-module id="material-placeholder-styles">
   <template>
     <style>
-      vaadin-text-field > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-password-field > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::-webkit-input-placeholder {
+      input[slot="input"]::-webkit-input-placeholder,
+      textarea[slot="textarea"]::-webkit-input-placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.05s;
         opacity: 1;
       }
 
-      vaadin-text-field > input[slot="input"]::-ms-input-placeholder,
-      vaadin-password-field > input[slot="input"]::-ms-input-placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::-ms-input-placeholder {
+      input[slot="input"]::-ms-input-placeholder,
+      textarea[slot="textarea"]::-ms-input-placeholder {
         color: var(--material-disabled-text-color);
       }
 
-      vaadin-text-field > input[slot="input"]::-moz-placeholder,
-      vaadin-password-field > input[slot="input"]::-moz-placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::-moz-placeholder {
+      input[slot="input"]::-moz-placeholder,
+      textarea[slot="textarea"]::-moz-placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.05s;
         opacity: 1;
       }
 
-      vaadin-text-field > input[slot="input"]::placeholder,
-      vaadin-password-field > input[slot="input"]::placeholder,
-      vaadin-text-area > textarea[slot="textarea"]::placeholder {
+      input[slot="input"]::placeholder,
+      textarea[slot="textarea"]::placeholder {
         color: var(--material-disabled-text-color);
         transition: opacity 0.175s 0.1s;
         opacity: 1;
       }
 
-      vaadin-text-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-password-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-webkit-input-placeholder,
-      vaadin-text-area[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::-webkit-input-placeholder {
+      [has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-webkit-input-placeholder,
+      [has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::-webkit-input-placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
-      vaadin-text-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-moz-placeholder,
-      vaadin-password-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-moz-placeholder,
-      vaadin-text-area[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::-moz-placeholder {
+      [has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::-moz-placeholder,
+      [has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::-moz-placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
-      vaadin-text-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::placeholder,
-      vaadin-password-field[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::placeholder,
-      vaadin-text-area[has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::placeholder {
+      [has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="input"]::placeholder,
+      [has-label]:not([focused]):not([invalid]):not([theme="always-float-label"]) > input[slot="textarea"]::placeholder {
         opacity: 0;
         transition-delay: 0;
       }
 
       /* IE11 doesn’t show the placeholder when the input is focused, so it’s basically useless for this theme */
-      vaadin-text-field[has-label] > input[slot="input"]:-ms-input-placeholder,
-      vaadin-password-field[has-label] > input[slot="input"]:-ms-input-placeholder,
-      vaadin-text-area[has-label] > input[slot="textarea"]:-ms-input-placeholder {
+      [has-label] > input[slot="input"]:-ms-input-placeholder,
+      [has-label] > input[slot="textarea"]:-ms-input-placeholder {
         opacity: 0;
       }
     </style>

From 6b3e43e7475d0c0942d31b652c60d035a6d35489 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Tue, 4 Dec 2018 14:22:33 +0200
Subject: [PATCH 12/13] Update demo intro for custom input

---
 demo/text-field-custom-demos.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/demo/text-field-custom-demos.html b/demo/text-field-custom-demos.html
index 3f534e93..cacfb0e9 100644
--- a/demo/text-field-custom-demos.html
+++ b/demo/text-field-custom-demos.html
@@ -8,7 +8,9 @@
 
     <h3>Custom Input</h3>
     <p>
-      `vaadin-text-field` has major part of the properties and attributes available on the native input.
+      A native <code>&lt;input&gt;</code> element can optionally be defined separately as a child element for the
+      <code>&lt;vaadin-text-field&gt;</code>. This will enable use-cases where having the <code>&lt;input&gt;</code>
+      element available in the global DOM is necessary, such as supporting password managers or native forms.
     </p>
     <p>
       <b>Note:</b> All properties and attributes that `vaadin-text-field` has should be defined on the host.

From 38993808c5d5cdf4b4c48ec7755273e30020c4e0 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Tue, 11 Dec 2018 17:14:21 +0200
Subject: [PATCH 13/13] Remove demos and docs for slotted input

---
 demo/demos.json                   | 10 -----
 demo/index.html                   |  8 ----
 demo/text-field-custom-demos.html | 75 -------------------------------
 src/vaadin-password-field.html    | 33 --------------
 src/vaadin-text-area.html         | 33 --------------
 src/vaadin-text-field.html        | 33 --------------
 6 files changed, 192 deletions(-)
 delete mode 100644 demo/text-field-custom-demos.html

diff --git a/demo/demos.json b/demo/demos.json
index ca5d613e..cf452cfd 100644
--- a/demo/demos.json
+++ b/demo/demos.json
@@ -31,16 +31,6 @@
         "image": ""
       }
     },
-    {
-      "name": "Custom Input",
-      "url": "text-field-custom-demos",
-      "src": "text-field-custom-demos.html",
-      "meta": {
-        "title": "Vaadin Text Field Custom Input Examples",
-        "description": "",
-        "image": ""
-      }
-    },
     {
       "name": "RTL",
       "url": "text-field-rtl-demos",
diff --git a/demo/index.html b/demo/index.html
index c12e0af4..a296cc7d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,7 +18,6 @@
   <link rel="import" href="../vaadin-text-area.html">
   <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../vaadin-lumo-styles/icons.html">
-  <link rel="import" href="../theme/lumo/vaadin-placeholder-styles.html">
 
   <!-- Used in the styling examples, keep in sync -->
   <dom-module id="my-text-field-styles" theme-for="vaadin-text-field vaadin-text-area">
@@ -36,13 +35,6 @@
     </template>
   </dom-module>
 
-  <!-- Used for the custom input examples -->
-  <dom-module id="included-lumo-placeholder-styles" theme-for="vaadin-demo-shadow-dom-renderer">
-    <template>
-      <style include="lumo-placeholder-styles"></style>
-    </template>
-  </dom-module>
-
   <custom-style>
     <style include="vaadin-component-demo-shared-styles"></style>
   </custom-style>
diff --git a/demo/text-field-custom-demos.html b/demo/text-field-custom-demos.html
deleted file mode 100644
index cacfb0e9..00000000
--- a/demo/text-field-custom-demos.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<dom-module id="text-field-custom-demos">
-  <template>
-    <style include="vaadin-component-demo-shared-styles">
-      :host {
-        display: block;
-      }
-    </style>
-
-    <h3>Custom Input</h3>
-    <p>
-      A native <code>&lt;input&gt;</code> element can optionally be defined separately as a child element for the
-      <code>&lt;vaadin-text-field&gt;</code>. This will enable use-cases where having the <code>&lt;input&gt;</code>
-      element available in the global DOM is necessary, such as supporting password managers or native forms.
-    </p>
-    <p>
-      <b>Note:</b> All properties and attributes that `vaadin-text-field` has should be defined on the host.
-    </p>
-    <p>
-      <b>Note:</b> In order to apply lumo or material theme styles to the placeholder
-      of the slotted input you should explicitly import a file
-      theme/lumo/vaadin-placeholder-styles.html or theme/material/vaadin-placeholder-styles.html
-      and include styles into the same scope as `vaadin-text-field`:
-      <code>&lt;custom-style&gt;&lt;style include="lumo-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code> OR 
-      <code>&lt;custom-style&gt;&lt;style include="material-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code>
-    </p>
-    <vaadin-demo-snippet id="text-field-custom-demos-phone">
-      <template preserve-content>
-        <custom-style>
-          <style include="lumo-placeholder-styles"></style>
-        </custom-style>
-        <vaadin-text-field label="Name" placeholder="Name">
-          <input type="text" slot="input">
-        </vaadin-text-field>
-      </template>
-    </vaadin-demo-snippet>
-
-
-    <h3>Email Input</h3>
-    <vaadin-demo-snippet id="text-field-custom-demos-email">
-      <template preserve-content>
-        <vaadin-text-field label="Email" required error-message="Please enter valid email"  pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$">
-          <input type="email" slot="input">
-        </vaadin-text-field>
-      </template>
-    </vaadin-demo-snippet>
-
-    <h3>Password Field</h3>
-    <vaadin-demo-snippet id="text-field-custom-demos-pass">
-      <template preserve-content>
-        <vaadin-password-field label="Password">
-          <input type="password" slot="input">
-        </vaadin-password-field>
-      </template>
-    </vaadin-demo-snippet>
-
-    <h3>Textarea</h3>
-    <vaadin-demo-snippet id="text-field-custom-demos-textarea">
-      <template preserve-content>
-        <vaadin-text-area label="Textarea">
-          <textarea slot="textarea"></textarea>
-        </vaadin-text-area>
-      </template>
-    </vaadin-demo-snippet>
-
-
-  </template>
-  <script>
-    class TextFieldCustomDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {
-      static get is() {
-        return 'text-field-custom-demos';
-      }
-    }
-    customElements.define(TextFieldCustomDemos.is, TextFieldCustomDemos);
-  </script>
-</dom-module>
diff --git a/src/vaadin-password-field.html b/src/vaadin-password-field.html
index 76e6f6f2..a14e5653 100644
--- a/src/vaadin-password-field.html
+++ b/src/vaadin-password-field.html
@@ -52,39 +52,6 @@
        * </vaadin-password-field>
        * ```
        *
-       * ### Custom input
-       *
-       * It is possible to use custom input within `<vaadin-password-field>`.
-       * In order for an input to be considered as a custom input, it must have the slot
-       * attribute set to `input`.
-       *
-       * **NOTE:** when using custom input: all properties and attributes that the
-       * `<vaadin-password-field>` has should be defined on the host element. They will be
-       * automatically propagated to the custom input.
-       *
-       * ```html
-       * <vaadin-password-field label="Password">
-       *   <input type="password" slot="input">
-       * </vaadin-password-field>
-       * ```
-       *
-       * **NOTE:** when using custom input: in order to apply lumo or material theme styles to the placeholder
-       * of the slotted input you should explicitly import a file
-       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
-       * and include styles into the same scope as `vaadin-password-field`:
-       *
-       * ```html
-       * <custom-style>
-       *   <style include="lumo-placeholder-styles"></style>
-       * </custom-style>
-       *
-       * <!--OR-->
-       *
-       * <custom-style>
-       *   <style include="material-placeholder-styles"></style>
-       * </custom-style>
-       * ```
-       *
        * ### Styling
        *
        * See vaadin-text-field.html for the styling documentation
diff --git a/src/vaadin-text-area.html b/src/vaadin-text-area.html
index 9c998fd2..5ba8b8f8 100644
--- a/src/vaadin-text-area.html
+++ b/src/vaadin-text-area.html
@@ -99,39 +99,6 @@
        * </vaadin-text-area>
        * ```
        *
-       * ### Custom textarea
-       *
-       * It is possible to use custom textarea within `<vaadin-text-area>`.
-       * In order for an textarea to be considered as a custom textarea, it must have the slot
-       * attribute set to `textarea`.
-       *
-       * **NOTE:** when using custom textarea: all properties and attributes that the
-       * `<vaadin-text-area>` has should be defined on the host element. They will be
-       * automatically propagated to the custom textarea.
-       *
-       * ```html
-       * <vaadin-text-area label="Textarea">
-       *   <textarea slot="textarea"></textarea>
-       * </vaadin-text-area>
-       * ```
-       *
-       * **NOTE:** when using custom textarea: in order to apply lumo or material theme styles to the placeholder
-       * of the slotted textarea you should explicitly import a file
-       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
-       * and include styles into the same scope as `vaadin-text-area`:
-       *
-       * ```html
-       * <custom-style>
-       *   <style include="lumo-placeholder-styles"></style>
-       * </custom-style>
-       *
-       * <!--OR-->
-       *
-       * <custom-style>
-       *   <style include="material-placeholder-styles"></style>
-       * </custom-style>
-       * ```
-       *
        * ### Styling
        *
        * The following shadow DOM parts are available for styling:
diff --git a/src/vaadin-text-field.html b/src/vaadin-text-field.html
index 1d7c99c8..d3fbee5b 100644
--- a/src/vaadin-text-field.html
+++ b/src/vaadin-text-field.html
@@ -65,39 +65,6 @@
        * </vaadin-text-area>
        * ```
        *
-       * ### Custom input
-       *
-       * It is possible to use custom input within `<vaadin-text-field>`.
-       * In order for an input to be considered as a custom input, it must have the slot
-       * attribute set to `input`.
-       *
-       * **NOTE:** when using custom input: all properties and attributes that the
-       * `<vaadin-text-field>` has should be defined on the host element. They will be
-       * automatically propagated to the custom input.
-       *
-       * ```html
-       * <vaadin-text-field label="Phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 111-222-3333">
-       *   <input type="tel" slot="input">
-       * </vaadin-text-field>
-       * ```
-       *
-       * **NOTE:** when using custom input: in order to apply lumo or material theme styles to the placeholder
-       * of the slotted input you should explicitly import a file
-       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
-       * and include styles into the same scope as `vaadin-text-field`:
-       *
-       * ```html
-       * <custom-style>
-       *   <style include="lumo-placeholder-styles"></style>
-       * </custom-style>
-       *
-       * <!--OR-->
-       *
-       * <custom-style>
-       *   <style include="material-placeholder-styles"></style>
-       * </custom-style>
-       * ```
-       *
        * ### Styling
        *
        * The following custom properties are available for styling: