Extending Native Input Text-box using Polymer v1.0
- Clone and Install the package:
git clone https://github.com/kumaran-is/wc-polymer-textbox.git
cd wc-polymer-textbox
Or download as ZIP.
-
npm install -g bower polyserve
-
Install local dependencies:
bower install
-
Start development server and open http://localhost:8080/components/wc-polymer-textbox/.
$ polyserve
-
Styling of Host element using :host for custom input text box element(Type Extension custom element) works with Shady DOM in chrome 51.0 , IE11 and Firefox 47.0.1. But as soon as full native shadow DOM is enabled refer below script, styling of host element is not working for chrome 51.0 but works for IE11 and Firefox 47.0.1. This looks like issue with chrome browser. It throws below error for chrome.
Uncaught InvalidStateError: Failed to execute 'createShadowRoot' on 'Element': Shadow root cannot be created on a host which already hosts an user-agent shadow tree.
Enable native shadow DOM in polymer Add this Javascript in your index.html file before include component HTML file.
<script> window.Polymer = { dom: 'shadow', lazyRegister: true }; </script>