when use webcomponents-loader instead of webcomponents-lite
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?
web-component polymer-2.x polyfills
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
add a comment |
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?
web-component polymer-2.x polyfills
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
add a comment |
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?
web-component polymer-2.x polyfills
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
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?
web-component polymer-2.x polyfills
web-component polymer-2.x polyfills
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
asked Nov 15 '18 at 14:38
Jim CJim C
87332246
87332246
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321839%2fwhen-use-webcomponents-loader-instead-of-webcomponents-lite%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
add a comment |
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
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
add a comment |
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
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
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
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
edited Nov 16 '18 at 6:58
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
answered Nov 15 '18 at 18:08
HakanCHakanC
2,1843814
2,1843814
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321839%2fwhen-use-webcomponents-loader-instead-of-webcomponents-lite%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
