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