Name: shadow-selection-polyfill
Owner: GoogleChromeLabs
Description: Polyfill for shadowRoot.getSelection() in Safari
Created: 2018-04-19 01:41:22.0
Updated: 2018-05-21 17:33:00.0
Pushed: 2018-04-19 01:52:42.0
Homepage: https://googlechromelabs.github.io/shadow-selection-polyfill/demo.html
Size: 15
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Polyfill for the shadowRoot.getSelection() method for Safari 10+.
See a demo!
Safari supports .attachShadow() to create a Shadow Root, but does not support programatically retrieving user selection within this root.
?? As of April 2018, this polyfill only supports Safari, but is safe to include in other browsers supporting Shadow DOM (e.g. Chrome).
Include ./shadow.js as an ES6 module, and call its getShadowRootSelectionRange method, passing the relevant shadow root.
On browsers that implement shadowRoot.getSelection(), this uses the native implementation.
Typically, you'd call this method in response to a selectionchange event, which is a global event on the document.
However, this polyfill will cause additional selectionchange events to fire in the course of its work.
Instead, you can listen to the -shadow-selectionchange event, which will safely fire only once.
rt {getShadowRootSelectionRange} from './node_modules/shadow-selection-polyfill/shadow.js';
t root = myElement.createShadowRoot({mode: 'open'});
.innerHTML = `...`;
ment.addEventListener('-shadow-selectionchange', () => {
nst range = getShadowRootSelectionRange(root);
(range) {
console.info('range selected within root element', range.toString());
Install via NPM as shadow-selection-polyfill, this has no dependencies.
Depending on your transpiler, you might be able to include the polyfill with:
aked imports
rt {getShadowRootSelectionRange} from `shadow-selection-polyfill`;
equire() compatibility
t {getShadowRootSelectionRange} = require('shadow-selection-polyfill');
This isn't technically a polyfill, as it adds a new method: it doesn't patch an existing method. There's nothing stopping us from emulating a faux-Selection, but it would probably make the code more complex than required.
This is not an official Google product.