Add importMeta getter to derive importPath from modules. Fixes #5163

Author: kevinpschaaf

lib/mixins/element-mixin.html

@@ -409,13 +409,33 @@
        */
       static get importPath() {
         if (!this.hasOwnProperty(JSCompiler_renameProperty('_importPath', this))) {
+          const meta = this.importMeta;
+          if (meta) {
+            this._importPath = meta.url.slice(0, meta.url.lastIndexOf('/') + 1);
+          } else {
             const module = Polymer.DomModule && Polymer.DomModule.import(/** @type {PolymerElementConstructor} */ (this).is);
-            this._importPath = module ? module.assetpath : '' ||
-            Object.getPrototypeOf(/** @type {PolymerElementConstructor}*/ (this).prototype).constructor.importPath;
+            if (module) {
+              this._importPath = module ? module.assetpath : '';
+            } else {
+              this._importPath = Object.getPrototypeOf(/** @type {PolymerElementConstructor}*/ (this).prototype).constructor.importPath;
+            }
+          }
         }
         return this._importPath;
       }
 
+      /**
+       * When an element definition is being loaded from an ES module, users
+       * may override this getter to return the `import.meta` object from that
+       * module, which will be used to derive the `importPath` for the element.
+       * When implementing `importMeta`, users should not implement `importPath`.
+       *
+       * @return {!Object} The `import.meta` object for the element's module
+       */
+      static get importMeta() {
+        return null;
+      }
+
       constructor() {
         super();
         /** @type {HTMLTemplateElement} */
@@ -447,14 +467,13 @@
       _initializeProperties() {
         Polymer.telemetry.instanceCount++;
         this.constructor.finalize();
-        const importPath = this.constructor.importPath;
         // note: finalize template when we have access to `localName` to
         // avoid dependence on `is` for polyfilling styling.
         this.constructor._finalizeTemplate(/** @type {!HTMLElement} */(this).localName);
         super._initializeProperties();
         // set path defaults
         this.rootPath = Polymer.rootPath;
-        this.importPath = importPath;
+        this.importPath = this.constructor.importPath;
         // apply property defaults...
         let p$ = propertyDefaults(this.constructor);
         if (!p$) {

test/unit/resolveurl.html

@@ -52,10 +52,10 @@
   <script>
     suite('ResolveUrl', function() {
 
-      test('Urls in styles and attributes', function() {
-        var el = document.createElement('p-r');
+      const testStylesAndAttributes = (elementName, folder) => () => {
+        var el = document.createElement(elementName);
         document.body.appendChild(el);
-        var resolvedUrl = /sub\/foo\.z/;
+        var resolvedUrl = new RegExp(`${folder}/foo\\.z`);
         var styleHashUrl = /url\('#bar'\)/;
         var styleAbsUrl = /url\('\/zot'\)/;
         var style = el.shadowRoot.querySelector('style') || document.querySelector('style[scope=p-r]');
@@ -78,7 +78,11 @@
         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');
         document.body.removeChild(el);
-      });
+      }
+
+      test('Urls in styles and attributes', testStylesAndAttributes('p-r', 'sub'));
+
+      test('Urls in styles and attributes (importMeta)', testStylesAndAttributes('p-r-im', 'http://foo.com/mymodule'));
 
       test('url changes via setting importPath/rootPath on element instance', function() {
         var el = document.createElement('p-r');

test/unit/sub/resolveurl-elements.html

@@ -38,6 +38,15 @@
     static get is() { return 'p-r'; }
   }
   customElements.define(PR.is, PR);
+
+  class PRImportMeta extends PR {
+    static get importMeta() {
+      // Idiomatically, this would be `return import.meta`, but for purposes
+      // of stubbing the test without actual modules, it's shimmed
+      return { url: 'http://foo.com/mymodule/index.js' }
+    }
+  }
+  customElements.define('p-r-im', PRImportMeta);
 </script>
 
 <dom-module id="p-r-ap" assetpath="../../assets/"></dom-module>