Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[0.8] Nested property binding not working on Firefox/IE #1391

Closed
Sleeckx opened this issue Apr 9, 2015 · 5 comments
Closed

[0.8] Nested property binding not working on Firefox/IE #1391

Sleeckx opened this issue Apr 9, 2015 · 5 comments
Labels
0.8

Comments

@Sleeckx
Copy link

Sleeckx commented Apr 9, 2015

Consider the following code:

<html>
<head>
    <script src="Bower/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="Polymer/polymer.html" />
    <link rel="import" href="index-test-elements.html" />
</head>

<body touch-action="auto">
    <host-element first="First name" last="Last name"></host-element>
</body>
</html>
<dom-module id="host-element">
    <template>
        <span>{{first}}</span>
        <child-element name="{{last}}"></child-element>
    </template>
</dom-module>

<dom-module id="child-element">
    <template>
        <span>{{name}}</span>
    </template>
</dom-module>

<script>
    Polymer({
        is: "host-element",
        properties: {
            first: String,
            last: String
        },
    });

    Polymer({
        is: "child-element",
        properties: {
            name: String
        }
    });
</script>

In Chrome, this results in: First name Last name being displayed.
In Firefox/IE, this results in First name only.
@Sleeckx Sleeckx changed the title Nested property binding not working on Firefox/IE [0.8] Nested property binding not working on Firefox/IE Apr 9, 2015
@Sleeckx
Copy link
Author

Sleeckx commented Apr 11, 2015

Created a demo case for this: http://jsbin.com/mawexu/2/edit?html,output

At the moment this is preventing every more complex web components application to run in anything but Chrome (did not test on Safari, but I would assume it will react the same way as IE/FF).

@robdodson
Copy link
Contributor

This was brought up in Slack as well. Just curious if @kevinpschaaf or @sorvell see's anything wrong with the above example.

@IntranetFactory
Copy link

Not sure if that's related, but while analyzing nested, preserve-content templates which fail only in IE and Safari I found that the importNode (https://github.com/Polymer/polymer/blob/0.8-preview/src/mini/template.html#L50) might cause the problem. In my case the template.content contains other template nodes. These nodes have a .content DocumentFragment. After the importNode the nested nodes in dom have either an empty .content property or it's missing in IE/Safari. In Chrome and FF these dom nodes retain the original .content

@IntranetFactory
Copy link

In Safari probably this bug might be the reason https://bugs.webkit.org/show_bug.cgi?id=137619 Just checked, that error still exists in Safari 8.0.5

@Sleeckx
Copy link
Author

Sleeckx commented May 6, 2015

Closing this issue as it was resolved in one of the recent commits.

http://jsbin.com/sinuzi/1/edit?html,output

Output on IE11:
image

Output on FF (37.0.2):
image

@Sleeckx Sleeckx closed this as completed May 6, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0.8
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@justinfagnani @robdodson @Sleeckx @IntranetFactory