时间戳

首页 > 解决方案 > 当使用 webcomponents-loader 而不是 webcomponents-lite

web-component - 当使用 webcomponents-loader 而不是 webcomponents-lite

问题描述

我的 bower.json 中有这两个依赖项：Polymer/polymer#^2.6.0 和 webcomponents/webcomponentsjs#^v1.1.0。

在我的 index.html 中，如果我添加，我看不到任何区别

<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
or  
<script src="bower_components/webcomponentsjs/webcomponents-loader.js">.

从https://www.npmjs.com/package/webcomponents-lite我读到“webcomponents-lite.js 包括除 shadow DOM 之外的所有 polyfills”和https://www.npmjs.com/package/web-components-我读到“将 HTML 文件及其所有依赖项复制到公共/输出目录中的命名空间位置”。我可以假设 web-components-loader 做 webcomponents-lite 默认做的加上其他一些加载功能吗？有什么理由使用一个而不是另一个？似乎 webcomponents-lite 的加载过程更少，所以如果它符合我的需求，它会比 webcomponents-loader 更好吗？

标签： web-componentpolymer-2.xpolyfills

解决方案

webcomponents-lite.js将加载所有最低要求的 polyfill，即使您使用自然支持的浏览器，例如Chrome但是web-components-loader有一些浏览器的检查。由于此检查，由于浏览器支持performance reason.

webcomponents-hi.html
webcomponents-hi-ce.html
webcomponents-hi-sd.html
webcomponents-hi-sd-ce.html
webcomponents-sd-ce.html

应用以下检查：

var polyfills = [];

 if (!('import' in document.createElement('link'))) {
    polyfills.push('hi');
  }
  if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
    (window.ShadyDOM && window.ShadyDOM.force)) {
    polyfills.push('sd');
  }
  if (!window.customElements || window.customElements.forcePolyfill) {
    polyfills.push('ce');
  }
  // NOTE: any browser that does not have template or ES6 features
  // must load the full suite (called `lite` for legacy reasons) of polyfills.
  if (!('content' in document.createElement('template')) || !window.Promise || !Array.from ||
    // Edge has broken fragment cloning which means you cannot clone template.content
    !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment)) {
    polyfills = ['lite'];
  }

所以，使用webcomponents-loader而不是webcomponents-lite

推荐阅读