In the weekend I take a look to polymer. Polymer is a js library to use and create webcomponents. The idea, is to bring to the web something that exists lot time ago in desktop applications. Reusable components.

It make use of shadow dom, so it makes incompatible with a lot of old browser and some new ones. But I think it will be the future of web programming apps. So I ask myself if I cant integrate this with my idea of “Rack” and to use it to embed svg into svg as components. That test is not for today, but I’ve tried to add a component that create and SVG at root level.

It works, the component is not too elaborated, just take the size property and use it to establish width and height of one SVG that draws a rect inside it. No JS embeded in the component, no more magic, just that.

Once again, the demo is the same url

One corious thing that happend. After added my component all the svg created by SnapSVG, loose the colors. I take a fast look and the problem comes from the named colors, some of them (silver, white) don’t work anymore, so I had to change them by the hexa color reference. Probably, something of polymer its reusing the names or something like that, but I don’t have more time today to take a look to it.

If you are wondering how looks like the code of a webcomponent maded with polymer, here goes my silly component: