What are the rules for implicit adjustment of hrefs in Polymer elements?

Question

I've noticed that the href attribute on an <a> element get automatically adjusted in a Polymer element definition, but I haven't seen that documented anywhere. Mostly the adjustments are harmless, but sometimes it's a subtle source of bugs.

See http://jsbin.com/kelun/2/edit. The document contains two links, on in light DOM and one inside a <polymer-element>. Both point to href="..". When run (in either production Chrome or Canary), the first link is left untouched, but the second has it's href silently modified to href (with no destination).

While this example is contrived, I have some page components that want to inspect their own links for various reasons. These mysteriously modified hrefs are causing that code to fail. E.g., if a page called foo.html has a link to itself, the link destination in the href is silently removed.

Is this href modification a bug or feature? And if this is intentional, what are the rules for how href's get modified. And I can turn that off?

Answer 1

Imports are designed to be relocatable. IOW, I can make an import that uses <img src="foo.png"> and put foo.png in the same folder as the import, and a project can use that import and have access to the image without fumbling with the paths.

Polymer takes this one step further by (attempting) to make paths inside of templates also import-relative. That way I can put <img src="foo.png"> in my template and have the same behavior as above.

Rewriting of paths in a <polymer-element> in the main document is a bug. Any path mangling that doesn't result in a correct import-relative path is a bug. Sounds like you hit some bugs here, suggest you file issue tickets.

Additional notes:

1. Until recently, any url containing bindings was left untouched. I believe the latest version will instead convert such urls to be import-relative, if the url is unambiguously relative in the first place.

2. If you need to imperatively calculate a path to wherever your element was sourced, you can use the resolvePath method that is built-in to every polymer element. IOW, something like this: var documentRelativePathToFoo = this.resolvePath('foo.png');. This calculates the path to foo.png that is correct from the perspective of window.document, which is the perspective of most DOM operations (e.g. XHR).