How can I edit and sort a Polymer iron-list from a browser extension/userscript?

Question

I want to write a Chrome extension to add some data to each list entry on a site that uses Polymer and <iron-list> to display data. I have no experience of Polymer or Web Components, but it looks as if I need to edit the template used; is that correct?

The site has has an <iron-list> tag containing an empty <array-selector id="..."></array-selector> , then <div> which in turn contains a <template id="..."></template> , followed by a bunch of list entries (using custom tags).
The list entries are lazy-loaded, so only about 20 exist at a time, even through the list is much larger.

The template tag looks empty in DevTools (it just shows "#document-fragment"), and I haven't successfully gotten any further with JavaScript, either.

The next step after that would be to sort the list according to some data that I add to the list.

How can I proceed? And what do I need to know, in general, to start making progress on this project?

Answer 1

Just to say, there are 2 versions of webcomponents.

The ones natively supported by browsers (chrome) where are shadowroots also called shadow-dom .

And the ones that need polyfills.

These 2 versions are very different. The one you are describing with #document-fragment is with polyfill (propably) and i have never found a solution on how to edit <template> . In your case it will be even much much much more harder since you don't know what binding does it use, you can't see inside and so on. Very hard to make it work..

I haven't seen anyone here on stackoverflow with so good knowledge of polymer.