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)

Most upvoted comments

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:

Okay, if that’s how it needs to be done, that’s fine. Just seems strange that this works currently in all the other browsers. So if I have a