Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom Elements polyfill is myopic about SVG #169

Closed
dominiccooney opened this issue May 30, 2013 · 5 comments
Closed

Custom Elements polyfill is myopic about SVG #169

dominiccooney opened this issue May 30, 2013 · 5 comments
Assignees
@morethanreal
Labels
0.5

Comments

@dominiccooney
Copy link

If I write this in Chrome:

<!DOCTYPE html>
<svg>
  <circle is="foo-bar" cx="50" cy="50" r="50" fill="red"></circle>
</svg>

and inspect the red circle, its prototype is SVGCircleElement.prototype. Likewise if I follow through with registering a definition, it stays "instanceof SVGCircleElement".

However if I write this:

<!DOCTYPE html>
<script src="polymer/polymer.js"></script>

<element name="foo-bar" extends="circle">
<script>
if (this !== window) {
  this.register({prototype: Object.create(SVGCircleElement.prototype, {})});
}
</script>
</element>
<svg> 
  <circle is="foo-bar" cx="50" cy="50" r="50" fill="red"></circle>
</svg>

then the circle becomes a HTMLUnknownElement.

In general it seems the polyfill assumes "extends" refers to HTML elements, and it also doesn't match up tag names of custom elements with what is on the prototype chain (for example if I make that extends="button", then my circle ends up with a prototype chain that leads to HTMLButtonElement.
@sjmiles
Copy link
Contributor

sjmiles commented May 30, 2013

Absolutely agree about the issue subject, we semi-consciously avoided thinking about SVG elements. Thanks for bringing it up.

this.register({prototype: Object.create(SVGCircleElement.prototype, {})});

Fwiw, HTMLElementElement.register doesn't take a fully qualified prototype (in the polyfill), it only takes the custom prototype. The suffix prototype chain is established by the system based on the extends attribute.

This is almost the only thing that HTMLElementElement does. This is a general topic we need to discuss more fully I think (apart from the SVG support which would be good too).

@ghost ghost assigned sorvell and morethanreal Sep 25, 2013
@zkat
Copy link

zkat commented Jun 14, 2014

+1. It would be wonderful to be able to write higher-level svg-based charting libraries with custom elements.

@Emasoft
Copy link

Emasoft commented Jun 16, 2014

+1 for SVG support!

@adamthebig
Copy link

+1 for SVG support.

@tjsavage tjsavage added the 0.5 label May 21, 2015
@tjsavage
Copy link
Contributor

Closing this issue due to age and the release of version 1 release of Polymer - please feel free to re-open if this is incorrect.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@morethanreal morethanreal

Labels
0.5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@zkat @dominiccooney @sorvell @sjmiles @tjsavage @Emasoft @morethanreal @adamthebig