TypeError: Cannot set property 'invalid' of null

[jarrodek]

I receive following error:

Uncaught TypeError: Cannot set property 'invalid' of null, paper-tags-input.html:262

It should not use following syntax:
var input = document.querySelector('#tag-input');
since it use shadow DOM.

If you replace it with:
var input = Polymer.dom(this.root).querySelector('#tag-input');
it will be working.

[cheonhyangzhang]

Do you know how to reproduce this error?
Like in what Browser and its version,
example use of paper-tags-input and on what condition and events, you will receive the error.

[jarrodek]

It's about Polymer setup, not the browser. Your code will work if Polymer use shady dom. However if you force to use shadow DOM this code will not work since elements will be encapsulated.
Try change your code to use shadow dom. Put following script after webcomponents.js:

<script type="text/javascript">
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

This should cause the error.

[cheonhyangzhang]

Okay. Got you.

I am still learning the whole Polymer thing and wondering what is the use case to use shadow dom instead of shady dom?

I know that in the version of 0.x, it is using shadow dom and then when the 1.0 version came out, they started to use shady dom.

[jarrodek]

Eventually they will switch on using shadow DOM by default. It's just a matter of time.

To see you work written more in Polymer way check my fork of your repository. I altered it couple of days ago.

[cheonhyangzhang]

The changes are made in v1.2.2, using Polymer DOM API in order to support the element to work correctly both in shady dom and shadow dom.