Do Custom Elements / WebComponents work with SVG?

Question

For CustomElements I can do this:

class MyElement extends HTMLElement {}

Can I do the same for SVG Elements? like

class MyOwnRectangle extends SVGRectElement {}

If it works, can I trouble someone for a jsbin?

If not, why not?

This has some very good use cases like being able to store model data in the element itself. SVG manipulation is basically used in 2 major areas:

1. Animations
2. Diagrams like ER, Organisation Charts, Process flows etc.

A library like JointJS has its own abstractions in the form of classes (which extends a Backbone View) to store model data associated with the view (SVG diagrams on screen).

Like WebComponents can eventually replace jQuery Plugins, Framework X's components in a standard way, why not do the same for SVG?

Finally,

How is Polymer 0.5 able to do this?

Does Polymer.js support inner SVG elements?

How is this patch able to do this in Polymer 1.0?

https://github.com/Polymer/polymer/pull/3372

What is the alternative for now?

I guess we can extend HTMLElement. In our ShadowDOM use an <svg> element and then attach all the SVG tags we actually want to extend like <rect>, <polyline> etc! Perhaps a much cleaner way out of this?

Will this be implemented in the future?

Answer 1

According to the specification

If result’s namespace is not the HTML namespace, then throw a NotSupportedError.

All SVG elements are in the SVG namespace. So the speification precludes support.

Ways to store data in SVG include the the <metadata> tag and data- attributes.