CODEWITHSUNDEEP
polymer-1.0
user176504
user176504

Reputation: 313

Polymer setting property Javascript error

I'm very (very) new to Polymer, and I'm trying to create my first component. I created a Plunker, but it's not working for some reason: http://plnkr.co/edit/RbcBuO9y8SUHyKqe7OJA

anyway, you can see my code on there.

It has a component blob-component.html, which is very basic. It just has a label and the content of the tag.

On the index.html, I want to update both of these when I click a button.

In the Plunker, the component isn't resolving the component, so we only get the innerHTML displaying, but when I run this in my development environment, I do get the label showing (twice, as defined).

However, when I try to set it on the click of the button, I get an error:

Unhandled exception in http://localhost:50169/Content/WebComponents/Polymer/webcomponentsjs/webcomponents.js 0x80070057 - JavaScript runtime error: Invalid argument.

This is occurring at 

unsafeUnwrap(this).data = value;

If I put a breakpoint in, then I can see that

this is a defined object and

e = "Updated label Initial label"

As you can see, I've also tried using setAttribute() instead of just assigning the value, but I get the same issue.

This is obviously super simple, but I can't understand why it's happening.

This is in IE11. In Chrome, I don't get an error, but the label disappears when I click the button.

Any suggestions? Thanks.

Upvotes: 0

Views: 70

Answers (1)

Tomasz Pluskiewicz
Tomasz Pluskiewicz

Reputation: 3662

There are two problems with your example. I'm trying this is Chrome but should fix other browsers too.

First and foremost you should notice that you polymer.html imports fails because CORS. In plunker, jsbin, etc you can use polygit

http://polygit.org/components/polymer/polymer.html

Second problem occurs when you change the innerHTML. When using Shady DOM, which is the default, by setting the innerHTML property you simply remove any content that you declared inside you <dom-module>. In Chrome you can fix this by forcing Shadow DOM, but it will still not work as expected in Firefox/IE/Safari.

For now you should avoid replacing inner HTML completely and either work with the DOM node-by-node or wrap you tags content with an additional container:

<blob-component id="p">
  <div>
    Flip
  </div>
</blob-component>

<script>
   function changeLabels() {
     var blob = document.getElementById("p");
     blob.querySelector('div').innerHTML = "Flop";
   }
</script>

Upvotes: 1

Related Questions