Getting the list of polymer published properties

Question

Is there a way of getting the list of all published properties defined in a polymer component? (e.g. get the available properties of component public API)

<polymer-element name="sample-component"
                 attributes="foo1 foo2" bar="10">
   /* ... */
</polymer-element>

<sample-component foo1="5"></sample-component>


document.querySellector('sample-component').attributes;
// returns bar and foo1 (which have a value assigned to them)
// but I want to get foo1 and foo2

score 3 · Accepted Answer · edited Dec 03 '15 at 20:58

3

It's best to use element.publish to get the list of published properties for an element. (In polymer 1.0 element.properties does the same).

element.getAttribute('attributes) won't include the publish properties that are setup in a publish block.

edited Dec 03 '15 at 20:58

Potherca

13,207
5
76
94

answered Aug 07 '14 at 16:03

ebidel

23,921
3
63
76

What about polymer 1.0? published doesn't seem to work in polymer 1.0 Thanks – sepans Aug 19 '15 at 20:58
Did you try `element.properties`? – ebidel Aug 20 '15 at 00:44
That was it. It was my first guess but by some reason it didn't work first time I tried it. Edited answer to include polymer 1.0. Thanks – sepans Aug 20 '15 at 16:37

Dirk Grappendorf · Answer 2 · 2014-08-07T18:51:12.653

1

You can access the element definition (i.e. the polymer-element itself) through the element property. So

document.querySelector('sample-component')
  .element.getAttribute('attributes')

gives you 'foo1 foo2' (btw. inside an element you can simply write this.element.)

Be aware that this only works after Polymer has registered and processed all elements, so depending on where you want to use this statement, you may have to put it into a polymer-ready event handler:

<script>
  addEventListener('polymer-ready', function() {
    console.log(document.querySelector('sample-component')
      .element.getAttribute('attributes'));
  });
</script>

Update:

If you want to get a list of all published properties (i.e. the ones in the attributes attribute plus the ones of the publish: {} property), you can use

   Object.keys(document.querySelector('sample-component').publish)

which gives you ['foo1', 'foo2'].

edited Aug 07 '14 at 18:51

answered Aug 06 '14 at 22:40

Dirk Grappendorf

3,422
16
15

Thanks @dirk-grappendorf. Sorry I wasn't using the accurate terminology in my question. I edited the question with the link to Polymer docs. – sepans Aug 07 '14 at 15:43
I updated my answer accordingly. But Eric was faster ;-) – Dirk Grappendorf Aug 07 '14 at 16:05
FYI calling the publish property now gives you an object with key value pairs versus the array listed in the question. – Kris Mar 09 '15 at 21:39

Getting the list of polymer published properties

2 Answers2

Linked

Related