'What is the purpose for webcomponents-sd-ce-pf.js
I am building a webcomponent based application and I am eliminating unnecessary code in my bundles. To compile es5 elements, I've added the webcomponentsjs polyfills and it suggested two script files to attach:
"node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js"
"node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
It seems I can't get away without the adapter but it seems to be working fine without webcomponents-sd-ce-pf.js. I'd like to ask about its purpose. The documentation seems to be a bit vague about it.
Solution 1:[1]
if you want to support IE or (legacy) Edge you will need it.
Solution 2:[2]
They are webcomponents polyfills.
- webcomponents-sd-ce-pf.js
sd(Shadow DOM),ce(Custom Elements), pf(polyfill)
- custom-elements-es5-adapter.js
According to the spec, only ES6 classes (https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance) may be passed to the native customElements.define API. For best performance, ES6 should be served to browsers that support it, and ES5 code should be serve to those that don't. Since this may not always be possible, it may make sense to compile and serve ES5 to all browsers. However, if you do so, ES5-style custom element classes will now not work on browsers with native Custom Elements because ES5-style classes cannot properly extend ES6 classes, like HTMLElement.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Normunds Kalnberzins |
| Solution 2 | frankkai |