Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gkovacs/enable-webcomponents-and-shadow-dom-in-content-scripts
Enables use of Web Components Custom Elements and Shadow DOM in Chrome content scripts.
https://github.com/gkovacs/enable-webcomponents-and-shadow-dom-in-content-scripts
Last synced: 4 days ago
JSON representation
Enables use of Web Components Custom Elements and Shadow DOM in Chrome content scripts.
- Host: GitHub
- URL: https://github.com/gkovacs/enable-webcomponents-and-shadow-dom-in-content-scripts
- Owner: gkovacs
- Created: 2018-07-07T00:49:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-07T00:51:11.000Z (over 6 years ago)
- Last Synced: 2024-11-08T02:15:09.975Z (about 2 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# enable-webcomponents-in-content-scripts
Enables use of Web Components Custom Elements in Chrome content scripts.
It inserts a polyfill for the v1 version of Custom Elements from webcomponentsjs.
It is necessary to use [SkateJS](https://github.com/skatejs/skatejs) within a content script.
## Usage
You can use it via a require statement in webpack.
Install via npm:
```
npm install enable-webcomponents-in-content-scripts
```Within a content script, make sure you require it before skatejs
```
require('enable-webcomponents-in-content-scripts')
skate = require('skatejs')
```## Example
This library is used by [HabitLab](https://github.com/habitlab/habitlab-chrome/)
See the `src/interventions` and `src/components_skate` directories
## Details
This module check if Chrome is using the native implementation of `document.registerElement` (for v0 of the CustomElements API), or `window.customElements` (for v1 of the CustomElements API), and if yes, it substitutes them with a polyfill. You can do this manually via:
```
document.registerElement = null
require('webcomponentsjs-custom-element-v0')
``````
window.customElements = null
require('webcomponentsjs-custom-element-v1')
```See [webcomponentsjs-custom-element-v0](https://github.com/gkovacs/webcomponentsjs-custom-element-v0) and [webcomponentsjs-custom-element-v1](https://github.com/gkovacs/webcomponentsjs-custom-element-v1) for details.
## License
MIT
## Credits
By [Geza Kovacs](https://github.com/gkovacs)