jlengrand/webcomponentsjs
1
0
Fork 0
mirror of https://github.com/jlengrand/webcomponentsjs.git synced 2026-03-10 08:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

custom-elements-es5-adapter.js

Browse Source
This commit is contained in:
valdrinkoshi
2017-03-21 14:02:56 -07:00
parent 3b3bd26f28
commit f8b627e722
10 changed files with 136 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@@ -60,15 +60,22 @@ elements, etc.). Here's an example:
</script>
```
## `webcomponents-es5-loader.js`
## `custom-elements-es5-adapter.js`
According to the spec, Custom Elements must be ES6 classes (https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance). Since most projects need to support a wide range of browsers that don't necessary support ES6, it may make sense to compile your project to ES5. However, ES5-style custom element classes will **not** work with native Custom Elements because ES5-style classes cannot properly extend ES6 classes, like `HTMLElement`.
To work around this, `webcomponents-es5-loader.js` first loads an extra ES5 compatibility [shim](https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js) before
loading the minimum polyfill bundle, like `webcomponents-loader.js` does.
To work around this, load `custom-elements-es5-adapter.js` before declaring new Custom Elements. **The adapter must NOT be compiled.**
The reason for having two different loaders (`webcomponents-loader.js` for ES6 deployed code and `webcomponents-es5-loader.js` for ES5) is that the polyfill can't know if you're deploying ES5 or ES6 code -- it runs before your code, and only _you_ as an author of the code know what you're going to deploy. This means that _you_ have to make the decision about which loader to use.
**TL; DR: ** Use `webcomponents-es5-loader.js` only if you want to deploy ES5 code to _all_ browsers (both with and without native custom elements support) -- if this isn't a requirement, then use
`webcomponents-loader.js` instead.
```html
<!-- Load Custom Elements es5 adapter -->
<script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!-- Load polyfills; note that "loader" will load these async -->
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Load the es5 compiled custom element definition -->
<link rel="import" href="my-es5-element.html">
<!-- Use the custom element -->
<my-es5-element></my-es5-element>
```
## Browser Support