diff --git a/src/vaadin-password-field.html b/src/vaadin-password-field.html
index 0e987f14..a14e5653 100644
--- a/src/vaadin-password-field.html
+++ b/src/vaadin-password-field.html
@@ -141,6 +141,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..5ba8b8f8 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>
@@ -173,6 +156,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..81169a22 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,14 +350,25 @@
       if (newVal === '' && oldVal === undefined) {
         return;
       }
-      if (this.invalid) {
-        this.validate();
-      }
+
       if (newVal !== '' && newVal != null) {
         this.hasValue = true;
       } else {
         this.hasValue = false;
       }
+
+      if (this.__userInput) {
+        this.__userInput = false;
+        return;
+      } else if (newVal !== undefined) {
+        this.focusElement.value = newVal;
+      } else {
+        this.value = '';
+      }
+
+      if (this.invalid) {
+        this.validate();
+      }
     }
 
     _labelChanged(label) {
@@ -329,6 +379,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 +459,37 @@
       }
     }
 
+    _addInputListeners(node) {
+      node.addEventListener('input', this._boundOnInput);
+      node.addEventListener('change', this._boundOnChange);
+      node.addEventListener('blur', this._boundOnBlur);
+    }
+
+    _removeInputListeners(node) {
+      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._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));
+
       if (!(window.ShadyCSS && window.ShadyCSS.nativeCss)) {
         this.updateStyles();
       }
@@ -355,11 +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}`;
-
-      /* istanbul ignore if */
-      if (navigator.userAgent.match(/Trident/)) {
-        this._addIEListeners();
-      }
     }
 
     /**
@@ -381,7 +522,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) {
@@ -390,31 +531,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..d3fbee5b 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>
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..c3c0d4e6 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: !condition}));
 
-          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>
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 00000000..ff858482
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/chrome.png differ
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 00000000..3e351e5e
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/password-field-custom-input-lumo/password-field-custom-input/firefox.png differ
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 00000000..685c6736
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/chrome.png differ
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 00000000..2d128f26
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/password-field-custom-input-material/password-field-custom-input/firefox.png differ
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 00000000..a459edba
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/chrome.png differ
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 00000000..c03df701
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-lumo/text-area-custom-textarea/firefox.png differ
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 00000000..a5a8d525
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/chrome.png differ
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 00000000..c22b5ecc
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-area-custom-textarea-material/text-area-custom-textarea/firefox.png differ
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 00000000..806207ab
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/chrome.png differ
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 00000000..13c37edf
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-field-custom-input-lumo/text-field-custom-input/firefox.png differ
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 00000000..9d37156b
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/chrome.png differ
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 00000000..f05e319b
Binary files /dev/null and b/test/visual/screens/vaadin-text-field/text-field-custom-input-material/text-field-custom-input/firefox.png differ
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/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-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/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;
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>
diff --git a/theme/lumo/vaadin-placeholder-styles.html b/theme/lumo/vaadin-placeholder-styles.html
new file mode 100644
index 00000000..64f99ede
--- /dev/null
+++ b/theme/lumo/vaadin-placeholder-styles.html
@@ -0,0 +1,61 @@
+<dom-module id="lumo-placeholder-styles">
+  <template>
+    <style>
+      input[slot="input"]::-webkit-input-placeholder,
+      textarea[slot="textarea"]::-webkit-input-placeholder {
+        color: inherit;
+        transition: opacity 0.175s 0.05s;
+        opacity: 0.5;
+      }
+
+      input[slot="input"]::-ms-input-placeholder,
+      textarea[slot="textarea"]::-ms-input-placeholder {
+        color: inherit;
+        opacity: 0.5;
+      }
+
+      input[slot="input"]::-moz-placeholder,
+      textarea[slot="textarea"]::-moz-placeholder {
+        color: inherit;
+        transition: opacity 0.175s 0.05s;
+        opacity: 0.5;
+      }
+
+      input[slot="input"]::placeholder,
+      textarea[slot="textarea"]::placeholder {
+        color: inherit;
+        transition: opacity 0.175s 0.1s;
+        opacity: 0.5;
+      }
+
+      /* Read-only and disabled */
+      [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;
+      }
+
+      [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;
+      }
+
+      [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;
+      }
+
+      [readonly] > input[slot="input"]::placeholder,
+      [readonly] > textarea[slot="textarea"]::placeholder,
+      [disabled] > input[slot="input"]::placeholder,
+      [disabled] > textarea[slot="textarea"]::placeholder {
+        opacity: 0;
+      }
+    </style>
+  </template>
+</dom-module>
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..1d19138b 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,6 +57,8 @@
       */
       @-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);
         }
@@ -246,7 +253,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-placeholder-styles.html b/theme/material/vaadin-placeholder-styles.html
new file mode 100644
index 00000000..fb7161e0
--- /dev/null
+++ b/theme/material/vaadin-placeholder-styles.html
@@ -0,0 +1,58 @@
+<link rel="import" href="../../../vaadin-material-styles/color.html">
+
+<dom-module id="material-placeholder-styles">
+  <template>
+    <style>
+      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;
+      }
+
+      input[slot="input"]::-ms-input-placeholder,
+      textarea[slot="textarea"]::-ms-input-placeholder {
+        color: var(--material-disabled-text-color);
+      }
+
+      input[slot="input"]::-moz-placeholder,
+      textarea[slot="textarea"]::-moz-placeholder {
+        color: var(--material-disabled-text-color);
+        transition: opacity 0.175s 0.05s;
+        opacity: 1;
+      }
+
+      input[slot="input"]::placeholder,
+      textarea[slot="textarea"]::placeholder {
+        color: var(--material-disabled-text-color);
+        transition: opacity 0.175s 0.1s;
+        opacity: 1;
+      }
+
+      [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;
+      }
+
+      [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;
+      }
+
+      [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 */
+      [has-label] > input[slot="input"]:-ms-input-placeholder,
+      [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 11842aa1..1446f163 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;
@@ -209,7 +213,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);
       }