Package Exports

shadow-dom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (shadow-dom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A shadow dom ponyfill

🚧 Please note: This is a work in progress and not usable for production yet

shadow-dom

🌲 planed obsolescence: uses native shadow-dom if available
📦 encapsulation: protect against css bleeding
👩‍💻 supports responsive design

Installation

npm install --save shadow-dom

Usage

const {shadowDom} = require('shadow-dom');

const el = document.querySelector('[data-protected]');
const protected = shadowDom(el);

protected.shadowRoot.innerHTML = '<p>This is protected against outer styles</p>';

Development

npx yarn
code src.js 
npx yarn test

Testing

shadow-dom ensures functionality via cross browser testing.

yarn test --local: Headless Chrome, Headless Firefox
yarn test --remote: Test on BrowserStack

Remote tests require BrowserStack credentials. Provide them by CLI or a .env file:

BROWSER_STACK_USERNAME=[browserstack-username]
BROWSER_STACK_ACCESS_KEY=[browserstack-access-key]

Testing may optionally be limited to browsers via cli flags

yarn test -- --firefox Test only in Firefox
yarn test -- --chrome Test only in Chrome

Unit tests are placed next to the files tested in src/**/[name].test.js while integration tests can be found in test/*.js.

# All flags
--chrome
--edge
--firefox
--ie
--safari

License

shadow-dom is published under the MIT license