Fixes #4213

README.md

@@ -277,3 +277,4 @@ id is to use `id`.
 * <a name="breaking-attribute-property-timing"></a>Any attribute values will take priority over property values set prior to upgrade due to V1 `attributeChangedCallback` timing semantics.  In 1.x properties set prior to upgrade overrode attributes.
 * <a name="breaking-transpiling"></a>Polymer 2.0 uses ES2015 syntax, and can be run without transpilation in current Chrome, Safari 10, Safari Technology Preview, Firefox, and Edge.  Transpilation is required to run in IE11 and Safari 9.  We will be releasing tooling for development and production time to support this need in the future.
 * <a name="breaking-hostAttributes-class"></a>In Polymer 1.x, the `class` attribute was explicitly blacklisted from `hostAttributes` and never serialized. This is no longer the case using the 2.0 legacy API.
+* <a name="breaking-url-rewriting"></a>Polymer 1.x rewrote URL's in templates such that all `href`, `src`, and `url` attributes, `<form>`'s action` attribute, and any URL's found in `style` attributes were relative to the HTML import that loaded the `<template>`.  In 2.x, the only attributes rewritten are `src` and `style`.  Since import-relative URL's can either be desired or not, depending on use case, this change seeks to strike a better balance for most the common use cases: links to _assets_ (which typically use `src`) remain relative to the HTML import so that reusable components can bundle assets with them, but URL's related to navigation (e.g. `<a href="..."`) stay relative to the main document base URI.  In situations where you do want a URL relative to the import document for the `<template>`, you can use a binding and the `resolveUrl` method on `Polymer.Element`, e.g. `<a href="[[resolveUrl('./page-relative-to-component.html')]]">`.

src/utils/resolve-url.html

@@ -26,18 +26,12 @@
     // url fixup for urls in an element's attributes made relative to
     // ownerDoc's base url
     function resolveAttrs(element, ownerDocument) {
-      for (var name in URL_ATTRS) {
-        var a$ = URL_ATTRS[name];
-        for (var i=0, l=a$.length, a, at, v; (i<l) && (a=a$[i]); i++) {
-          if (name === '*' || element.localName === name) {
-            at = element.attributes[a];
-            v = at && at.value;
-            if (v && (v.search(BINDING_RX) < 0)) {
-              at.value = (a === 'style') ?
-                resolveCss(v, ownerDocument) :
-                resolve(v, ownerDocument);
-            }
-          }
+      for (let i=0, l=URL_ATTRS.length, a, v; (i<l) && (a=URL_ATTRS[i]); i++) {
+        v = element.getAttribute(a);
+        if (v && (v.search(BINDING_RX) < 0)) {
+          element.setAttribute(a, (a === 'style') ?
+            resolveCss(v, ownerDocument) :
+            resolve(v, ownerDocument));
         }
       }
     }
@@ -47,13 +41,13 @@
       if (url && ABS_URL.test(url)) {
         return url;
       }
-      var resolver = getUrlResolver(ownerDocument);
+      let resolver = getUrlResolver(ownerDocument);
       resolver.href = url;
       return resolver.href || url;
     }
 
-    var tempDoc;
-    var tempDocBase;
+    let tempDoc;
+    let tempDocBase;
     function resolveUrl(url, baseUri) {
       if (!tempDoc) {
         tempDoc = document.implementation.createHTMLDocument('temp');
@@ -69,13 +63,10 @@
         (ownerDocument.__urlResolver = ownerDocument.createElement('a'));
     }
 
-    var CSS_URL_RX = /(url\()([^)]*)(\))/g;
-    var URL_ATTRS = {
-      '*': ['href', 'src', 'style', 'url'],
-      form: ['action']
-    };
-    var ABS_URL = /(^\/)|(^#)|(^[\w-\d]*:)/;
-    var BINDING_RX = /\{\{|\[\[/;
+    let CSS_URL_RX = /(url\()([^)]*)(\))/g;
+    let URL_ATTRS = ['src', 'style'];
+    let ABS_URL = /(^\/)|(^#)|(^[\w-\d]*:)/;
+    let BINDING_RX = /\{\{|\[\[/;
 
     // exports
     Polymer.ResolveUrl = {

test/unit/resolveurl.html

@@ -43,15 +43,15 @@
         assert.match(style.textContent, rx, 'url not relative to main document');
         assert.match(el.$.div.getAttribute('style'), rx, 'style url not relative to main document');
         assert.match(el.$.img.src, rx, 'src url not relative to main document');
-        assert.match(el.$.a.href, rx, 'href url not relative to main document');
-        assert.match(el.$.zonk.getAttribute('url'), rx, 'url url not relative to main document');
-        assert.notMatch(el.$.rel.href, rx, 'relative href url not relative to main document');
+        assert.notMatch(el.$.a.href, rx, 'href was re-written');
+        assert.notMatch(el.$.zonk.getAttribute('url'), rx, 'url was re-written');
+        assert.notMatch(el.$.rel.href, rx, 'relative href was re-written');
         assert.match(el.$.rel.href, /\?123$/, 'relative href does not preserve query string');
-        assert.equal(el.$.action.getAttribute('action'), 'foo.z', 'action attribute relativized for incorrect element type');
-        assert.match(el.$.formAction.action, rx, 'action attribute relativized for incorrect element type');
-        assert.equal(el.$.hash.getAttribute('href'), '#foo.z', 'hash-only url should not be resolved');
-        assert.equal(el.$.absolute.getAttribute('href'), '/foo.z', 'absolute urls should not be resolved');
-        assert.equal(el.$.protocol.getAttribute('href'), 'data:foo.z', 'urls with other protocols should not be resolved');
+        assert.equal(el.$.action.getAttribute('action'), 'foo.z', 'action was re-written');
+        assert.equal(el.$.formAction.getAttribute('action'), 'foo.z', 'action was re-written');
+        assert.equal(el.$.hash.getAttribute('href'), '#foo.z', 'hash-only href was re-written');
+        assert.equal(el.$.absolute.getAttribute('href'), '/foo.z', 'absolute href was re-written');
+        assert.equal(el.$.protocol.getAttribute('href'), 'data:foo.z', 'href with other protocols was re-written');
       });
 
       test('resolveUrl api', function() {