Как я могу редактировать и сортировать железный список Polymer из расширения браузера /usercript?

Question

Я хочу написать расширение Chrome, чтобы добавить некоторые данные к каждой записи в списке на сайте, который использует Polymer и <iron-list> для отображения данных. У меня нет опыта работы с Polymer или Web Components, но похоже, что мне нужно отредактировать используемый шаблон; это верно?

На сайте есть <iron-list> тег, содержащий пустой <array-selector id="..."></array-selector>, затем <div> который в свою очередь содержит <template id="..."></template>, а затем куча записей в списке (с использованием пользовательских тегов).
Записи списка загружаются лениво, поэтому одновременно существует только около 20, даже если список намного больше.

Тег шаблона выглядит пустым в DevTools (он просто показывает "#document-фрагмент"), и я также не смог продвинуться дальше с JavaScript.

Следующим шагом после этого будет сортировка списка по некоторым данным, которые я добавлю в список.

Как я могу продолжить? И что мне нужно знать, чтобы вообще добиться прогресса в этом проекте?

Answer 1

Скажем так, есть 2 версии веб-компонентов.

Те, которые изначально поддерживаются браузерами (Chrome), где shadowrootsтакже называемый shadow-dom,

И те, которые нуждаются в полифиллах.

Эти 2 версии очень разные. Тот, который вы описываете с помощью # document-фрагмента, это с помощью polyfill (возможно), и я никогда не находил решения о том, как редактировать <template>, В вашем случае это будет намного сложнее, так как вы не знаете, какую привязку он использует, вы не можете видеть внутри и так далее. Очень трудно заставить это работать..

Я не видел никого здесь на стеке потока с таким хорошим знанием полимера.