when use webcomponents-loader instead of webcomponents-lite

Question

I have these two dependencies in my bower.json: Polymer/polymer#^2.6.0 and webcomponents/webcomponentsjs#^v1.1.0.

In my index.html I don't see any difference if I add

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

From https://www.npmjs.com/package/webcomponents-lite I read "webcomponents-lite.js includes all polyfills except for shadow DOM" and from https://www.npmjs.com/package/web-components-loader I read "Copies the HTML file and all of its dependencies to a namespaced location in your public/output directory". Can I assume that web-components-loader does what webcomponents-lite does by default plus few other loading features? Is there any reason to use one instead of other? It seems webcomponents-lite does less loading process so if it matches my needs would it be better than webcomponents-loader?

Cappittall · Accepted Answer · 2018-11-16T06:58:12.313

webcomponents-lite.js will load all minimum required polyfills, even you use nature supported browser like Chrome But web-components-loader has some browser's checks. due to this check, will load one of below files due to browser support for performance reason.

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

This below checks applied :

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'];
  }

SO, use webcomponents-loader instead of webcomponents-lite

when use webcomponents-loader instead of webcomponents-lite

1 Answers1