能够在任何现有页面上加载聚合物

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 Dev Summit 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();
}

​