need more visual way of documenting the custom css properties

[davidmaxwaterman]

I am trying to style a paper-slider. It has 13 different properties and the documentation for each refers to different structural bits of the slider. It is quite difficult to know what these actual bits are.

It would be much better if there was a diagram of the element, with an arrow for each custom ccs property that pointed to the bit to which it refers.

Perhaps there could be something more dynamic, with all the styles having controls, so we can twiddle them and see how they change the element...yeah, but tricky I guess.

[arturparkhisenko]

@davidmaxwaterman maybe we can have an visualisation approach(tool for analyse) wich will work autimatically inside seed-element. Like this: https://github.com/webpack/webpack/issues/690

[davidmaxwaterman]

Really, I'm more interested in adding a diagram to this sort of page :

https://elements.polymer-project.org/elements/paper-slider

that, for each custom property :

--paper-slider-bar-color
--paper-slider-active-color
--paper-slider-secondary-color
--paper-slider-knob-color
--paper-slider-disabled-knob-color
--paper-slider-pin-color
--paper-slider-font-color
--paper-slider-disabled-active-color
--paper-slider-disabled-secondary-color
--paper-slider-knob-start-color
--paper-slider-knob-start-border-color
--paper-slider-pin-start-color
--paper-slider-height

have an actual arrow that points to the thing it is referring to on a diagram of the element.

Descriptions like The progress bar color don't help too much.

Perhaps an anatomy diagram is what I am asking for - if the custom properties are worded using the labels on the diagram, then it is easy enough to see what bit is what. Of course, there's also the issue of how to display things that are dynamic.

Currently, the only option is to look at the source, and also probably to look in the dev inspector to see what is what.