Cannot style paper-input-container's input correctly
kevinpschaaf opened this issue · 0 comments
kevinpschaaf commented
Description
The docs for paper-input-container
indicate:
You can style the nested
<input>
however you want; if you want it to look like a Material Design input, you can style it with the --paper-input-container-shared-input-style mixin.
However, due to limitations in the @apply shim, the --paper-input-container-shared-input-style
is not available to be applied from outside the element; as such, styling the input as described in the docs does not work:
<custom-style>
<style>
input {
@apply --paper-input-container-shared-input-style;
}
</style>
</custom-style>
<paper-input-container>
<iron-input slot="input">
<input>
</iron-input>
</paper-input-container>
Expected outcome
The input looks like a paper-input
Actual outcome
The input is unstyled
Live Demo
http://jsbin.com/loketi/edit?html,output
Steps to reproduce
- Open jsBin
- Note input is ugly
- Uncomment custom style with outer definition of
--paper-input-container-shared-input-style
and note input is nice
Browsers Affected
All