Reflecting polymer/web components interface

Question

i wondered if it is possible in general to retrieve the interface of a polymer-webcomponent. As far as i can see beside attributes there is a lot more to a polymer-webcomponent which is a kind of interface to it, respective events and the light DOM, but i have not grasped yet how this could be determined in a generic and reliable way (read tool-support).

Any hints and comments on this would be much appreciated. Best Regards, Hilmar

Answer 1

This is a general area of exploration for web components, not just ones created with Polymer :)

For Polymer, we've created a documentation system (see core-component-page that's loosely based off of JSDocs. It scrapes a component's documented properties, methods, and events and renders a page with basic examples, docs, and a demo link. Example: http://polymer.github.io/core-ajax/components/core-ajax/.

The good news is that properties/methods automatically show up in the devtool console auto-complete when native custom elements are available in the browser. For things like accepted light dom attributes and css styling hooks,...these will just need solid documentation.

Answer 2

You can access a web components interface imperatively by using DOM operations:

var fooComponent = document.createElement('foo-component');

fooComponent.doSomething();

Where as fooComponent could look sth. like this:

Polymer('foo-component', {
  doSomething: function () {
    // do something
  }
});