能夠在任何現有頁面上加載聚合物

Question

我正在開發使用聚合物的擴展。如果頁面上存在聚合物，則事情開始中斷。 我想找出一種不會與當前頁面的聚合物（如果存在）衝突的方式加載聚合物的可靠策略。

我目前加載聚合物和我的組件，例如：

function loadRes(res) { 
    return new Promise(
     function(resolve, reject) { 
     var link = document.createElement('link'); 
     link.setAttribute('rel', 'import'); 
     link.setAttribute('href', res); 
     link.onload = function() { 
      resolve(res); 
     }; 
     document.head.appendChild(link); 
     }); 
    } 

    loadRes(chrome.extension.getURL("polymer/polymer.html")) 
    .then(loadRes(component1Url))) 
    .then(loadRes(component2Url))) 
    ... 

另外，我有一個大口的工作混淆的擴展中所有自定義元素的名稱爲這樣：

gulp.task('build:polymer', function(){ 
    gulp.src(polymer) 
    .pipe(replace('Polymer', 'Polymer' + APP_KEY)) 
    .pipe(replace('dom-module', 'dom-module-' + APP_KEY)) 
    .pipe(replace('custom-style', 'custom-style-' + APP_KEY)) 
    .pipe(replace('dom-template', 'dom-template-' + APP_KEY)) 
    .pipe(replace('dom-repeat', 'dom-repeat-' + APP_KEY)) 
    .pipe(replace('array-selector', 'array-selector-' + APP_KEY)) 
    .pipe(replace('dom-if', 'dom-if-' + APP_KEY)) 
    .pipe(replace('dom-bind', 'dom-bind-' + APP_KEY)) 
    .pipe(gulp.dest('vendor/polymer')); 
}); 

我意識到這是醜陋的，但這是最後一種解決方案。上述作品在大多數使用聚合物的地方仍然會引起意想不到的問題 - 我懷疑由於其他東西被綁定到window。

有沒有更接近這個更清潔的方式？

Answer 1

您可以使用Rob Dodson代碼來有條件地加載聚合物zuperkulblog-progressive。 他在Chrome瀏覽器開發高峯論壇2015年here

// 4. Conditionally load the webcomponents polyfill if needed by the browser. 
 
// This feature detect will need to change over time as browsers implement 
 
// different features. 
 
var webComponentsSupported = ('registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')); 
 

 
if (!webComponentsSupported) { 
 
    var script = document.createElement('script'); 
 
    script.async = true; 
 
    script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js'; 
 
    script.onload = finishLazyLoading; 
 
    document.head.appendChild(script); 
 
} else { 
 
    finishLazyLoading(); 
 
}