binding: Using replaceable parts on repeated items causes duplication in Edge/IE
I’m submitting a bug report
- Library Version: 1.2.1
Please tell us about your environment:
-
Operating System: Windows 10
-
Node Version: 6.11.0
- NPM Version: 3.10.10
- Yarn Version: 0.24.6
-
Browser: Edge 40.15063.0.0 | IE 11.413.15063.0
-
Language: ESNext
Current behavior: Gist (IE/Edge can’t use gist.run, download gist and run in browser): https://gist.github.com/AStoker/39b571d960bc9d8a0e38bd4688a3a0d4
When you use replaceable
on a repeated element, where that repeated element is the actual repeater (i.e. contains the repeat.for
attribute), on Edge/IE, you get duplicate elements for each item in the array.
Given the code:
<ul>
<li replaceable part="item" repeat.for="item of items">${item}</li>
</ul>
When I attempt to replace item
, for each item in the list of items, I get a duplicate entry.
So with this as my replacement:
<custom-element items.bind="items">
<template replace-part="item">
<li repeat.for="item of items">Foo: ${item}</li>
</template>
</custom-element>
And with a list of 3 items, this is the compiled output:
<ul>
<li>Foo: 1</li>
<li>Foo: 2</li>
<li>Foo: 3</li>
<li>Foo: 1</li>
<li>Foo: 2</li>
<li>Foo: 3</li>
<li>Foo: 1</li>
<li>Foo: 2</li>
<li>Foo: 3</li>
</ul>
If my list would have only 2 items in it, then I would have a repeated list of Foo: 1
and Foo: 2
twice.
This behavior only appears in Edge and IE, not any of the other browsers.
Expected/desired behavior:
Expected behavior is that I would not have a duplicated list, and that Edge/IE would behave in the same manner as other browsers. I know, asking Edge/IE to be… consistent? Crazy talk! 😉
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 15 (10 by maintainers)
It’s because of the unpredictable order of attributes in different browsers.
On Jul 18, 2017 12:04 PM, “Andrew Stoker” notifications@github.com wrote: